SG-Cover-FNLSG-Cover-FNL

Building Foundations

Tubemogul is an analytics platform that enables brands and agencies to effectively optimize and measure global advertising.
Lead Product Designer

The Problem
The platform is complex and robust and we wanted to make it simple and easy to use. A history of design contractors had resulted in different visual styles and pattern inconsistencies. The interface needed to embody a simple & reliable experience.To maintain and scale in a fast agile environment without loosing quality as a one person design team meant we needed a secret weapon. We needed to empower the team with a modular design system, one that embodied our product vision,design philosophy and communicated effectively.

Research 
It began with an in-depth analysis of platform, documenting all screen types and creating a system map. Due to tight deadlines we shortlisted 20% of the patterns found on 80% of the flows. Once we had a clear understanding of the inventory we set out to establish our design approach. We had to deepen our understanding and discover an underlying vision. This led to a series of brainstorming sessions, stakeholder & user interviews and persona building exercises. 

SG-DataAnalysis-FNLSG-DataAnalysis-FNL
SG-Persona-BrandSG-Persona-Brand

Constraints
Due to our aggressive timeline we relied on our initial research and then led with our intuition and experience. We did not have the bandwidth to test our designs at various stages with users. Designing an entire system in bitesize deliverables posed its own challenges. The calendar component, we later realized could have been modified to support additional functionality. The timeline did not allow for extensive edge case analysis of components which was nerve-wracking. The existing marketing style guide turned out to be a good constraint. It helped accelerate decision making on the color palette. 

The Process & Outcome 
After synthesizing our learnings, "Simple, Effective and Empowered" best embodied our product vision. We wanted to imagine what TubeMogul would look like with the shortlisted set of patterns. So we set out to create mood boards, quick visual explorations and competitor analysis.

Our new found design philosophy became the baseline for all decision making. After few visual explorations we landed on a neutral aesthetic for the interface combined with pops of color. The new color system supported our latest approach and complimented the existing marketing palette. In the spirit of being simple and effective, we welcomed the Roboto font family. The font exhibited a blend of friendly characteristics and enhanced usability and readability. As a light weight font it is favorable for a data heavy platform. The voice, tone and language of the platform needed to be simple and reduce complexity. Due to limited resources and a time crunch we used the Hemingway app as our guide to keeping our language simple. Our new iconography was streamlined and we migrated to svg’s. This would reduce maintenance and scale well. 

Once we had established the visual styles, we shifted our attention to auditing our shortlisted patterns. We began updating the visual styles and improving their usability. Any modifications to the experience were tested to make sure we did not loose essential functionality. Eventually, this had to develop into a living style guide and we needed to collaborate with our team of developers. It was essential to understand what information would be useful to both groups at this stage. After initial back and forth the teams decided on the Bootstrap framework as our base. We partnered in figuring out the naming structure and how the components were to be organized. After having reviewed many style guide examples. We agreed that the Mailchimp pattern library structure was most relevant and realistic to achieve. We had to organize and categorize our patterns in a way that was easy for other teams as well. Product managers could then leverage the library and use existing components into their features.

SG-Color-2xSG-Color-2x
SG-Type-2xSG-Type-2x
SG-Icons-2xSG-Icons-2x
SG-Analytics1-2xSG-Analytics1-2x
SG-Navigation-2xSG-Navigation-2x
SG-FormElements-FNL-2xSG-FormElements-FNL-2x
SG-Tables-FNL-2xSG-Tables-FNL-2x
SG-UICompare-2-2xSG-UICompare-2-2x

"Confusion and Clutter are the failure of design not the attribute of information"

Edward Tufte