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.

Here are some shots of  UI and marketing before I began:

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.  


Adjacent: Marketing ad before & homepage before:

homepage



Starting The Process:

Team Alignment:

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:

 

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. 

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 research findings presentation:

 

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. 

 

 

Implementation:

Output to teams

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:

 

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:

New Product Pages

Next up were the product pages. After a bit of inventorying, I discovered there were many unnecessary UX design variations. In fact, there were about 14 stylistic variations for only two product types. Each moved and changed the navigation, primary CTA’s and reformatted style components. This not only confused the users, it also confused the designers and engineers as there was no easy was to iterate and add new features easily. 

I approached this by creating 1 consistent UX layout for both pages. By using a persistent and prominent CTA, with one navigation style paired with componentized content blocks through out the page, the users grew familiar with the site interaction, while the component approach allowed for quick testing, and fast iteration.  It is worth noting that the first version tested did not perform well.  In an attempt to reorganize the page, we deprioritized some components that should have been much more prominent. No worries though, with user research we were able to move quickly to fix and ship. 

Below: New Product Pages:

homepage

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

 

 

 

 

 

desktop@1x

 

 

 

 

Before and After Data

Coming Soon.