Building a Design System at Coursera Client: Coursera Website: coursera.org Date: 2016-09-01 Services: Design, UX, Branding 01. The beginning: In early 2015 I began working with Coursera. My contract placed me inside of their in-house design team straddling brand design and product design. When I started, there was no brand team yet and the primary focus of design was building product features. The company had grown fast, resulting in siloed teams that evolved their own style preferences, duplicative components and conflicting styles. Locating patterns was too time costly, so design approached every feature from scratch. Eventually, this re-inventing of basic UI elements was more taxing the design process, and duplicative components caused in-product conflicts and confusion to their users. Uniquely positioned in both brand and on the product team, I was also able to navigate insights from outside the product too. From the outside, the organization knew what they wanted to do, but not quite how to communicate it. Without a dedicated brand team, many of the branding decisions had been made while building the product. This missed key opportunities to connect with the audience on an emotional level. Here are some shots of UI and marketing before I began: 02. Starting the Process Working cross-functionally, I teamed up with design researchers, the new director of brand marketing, the marketing team, ux writers, and other product designers to align the brand ethos, and codify design. Our aim was to turn these in to style guides for both product and marketing. Part one of this process was inventorying and analyzing the current design patterns, while simultaneously working to align teams on brand, why it matters and how to integrate it into product. Below: The visual voice presentation we shared to the executive team: 03. Research & testing Next was Qualitative and Quantitative research. In it, we attempted a range of market positions, messaging, UI and image styles. In total we tested an impressive 40 options within a total of 5 rounds. Here are some of the mockups I created for user testing. 04. Analyzing findings: Qualitative and quantitative research was eye opening. In many instances it solidified an already formed hypothesis; in others, it provided the team with much needed direction by which to steer design. With research conclusions in hand, I then worked with brand and writer to interpret the findings, adjust the visual systems to reflect the brand position, and then translate them into guides for the entire company. Below: A sample of the research finding presentation: 05. Fine Tuning Early on in research we found that the color, typographic, icon, and image systems were not aligned with core values. The colors read young, cold and impersonal. Stock photography felt ‘spammy’ and the typographic system wasn’t meant for screens. I shifted their brand blue to a deeper hue to put emphasis on trust and prestige of their partners, while adding brighter yellows and oranges for compliments to add the feeling of human connection and life to the platform. Type was changed to a system designed specifically for web and mobile interfaces with excellent legibility, and a large, multi-language character set. Imagery shifted from abstract stock, to people and positive outcome focus. UI was made cleaner, simple and added negative space to help in content hierarchy. Below: The output, Coursera’s first ever brand book. 06. Implementation & Output: Planning is only a portion of the challenge. Getting teams to adopt new processes and styles can taxing and sometimes insurmountable. Luckily, while research was happening the engineering team was working to organize their css into one style guide. Engineering paired with a product designer to build the style guide. I paired with another product designer to create a “product design master file”. This housed the refined UI components, named and linked with the CSS files. After the master file was created we trained the remaining design team to use the UI master for their projects and handoffs. Below: Designer working from master file: 07. Product Refinement: Simultaneously during brand development, I was also deeply involved in building the product (it’s a start up!). I was responsible to design, ship and iterate on many high-touch pages and flows, focusing primarily on revenue and conversion. Starting with customer emails, I designed a system of responsive components that allowed for teams to build custom emails quickly and efficiently without calling on a designer each time. These reusable plug and play components also eliminated coding from scratch each time, thus speeding up the delivery process. I worked with data scientists to apply logic to content and when and which to serve. These templates include recommendation up-sells, abandoned cart notifications, new product launches, short-form content teasers and more. Below: New email components: 08. Homepage: Instead of a redesign, user testing revealed we simply needed refinement. I cleaned up the UI styling to match the updated look and feel, sourced localized learner imagery for the feature banner, and finally added a how-it-works section to help new users understand the product benefits. We then modified and tested content algorithms to identify which content was most effective on the homepage. Below: Updated Homepage 09. Results: Paired with other initiatives, this work helped increased registered users from 10M-15M with a 34% increase in CTR on email campaigns.