Evernote Design System / 2017

Building Evernote’s design system and a more cohesive user experience

Background

Since Evernote’s early days as a Windows application, the company’s philosophy was to build the best native experience possible. This also stemmed from a time when Mac apps—and later iPhone apps—were beginning to gain popularity. The vast majority of apps adopted UI components and patterns unique to the particular platform.

As the product team at Evernote grew, cross-functional teams were assembled around each platform we supported: Windows, Mac, iOS, Android, and Web. Each team had their own objectives and specific roadmap. Naturally, operating in this way led to differences across these platforms; some minor while others were vast. Of course there would be differences between the mobile and desktop apps, since they tended to serve different purposes for users, but as these differences grew, they became a pain point for those who often worked between multiple devices.

The core problem

Over the past few years, Evernote’s product strategy had shifted to focus and invest heavily on teams and collaboration. To support this vision, Evernote’s overall UX needed to evolve. The main issues that stood out included:

  • UX inconsistencies between platforms led to a steeper learning curve.

  • A disjointed visual language was causing confusion and made us look unrefined.

  • It became more difficult to collaborate with others, particularly colleagues, since users weren’t always looking at the same thing.

  • Paying customers, including Premium and Business, had high expectations. A different UX is not the norm. People are used to familiarities between mobile and desktop.

The image below demonstrates the vast divergence of visual styles across some platforms. (Windows and Mac never even had any green!)

 
  Evernote’s family of apps before 2018

Evernote’s family of apps before 2018

 

My role as design manager of platforms

At the time, I was heading up design efforts for our Platforms team, which meant I was the voice for our users and constantly championed for them. I represented product design as a key stakeholder for our product strategy and roadmap, our quarterly planning process, and our global design system initiative.

As 2016 was coming to a close, I had recently led a major redesign of Evernote’s iOS app, which included an overhaul of both the UX and the visual language. The team had agreed that this new visual direction was what we wanted to apply going forward. I then worked with our VP of Design to propose a strategy for making such improvements across our family of apps.

Getting buy-in

Working closely with my product and engineering counterparts, I advocated for finding opportunities to prioritize implementation of the new design system across the board.

Ultimately we agreed upon a dual-track approach. We would balance between giving our users features they want and need (visible improvements) and achieving our business objectives—to become a profitable, sustainable company via an increased focus on teams and collaboration.

Screen Shot 2018-09-28 at 4.04.14 PM.png
Screen Shot 2018-09-28 at 4.49.44 PM.png

Strategic alignment and risks

We also wanted to ensure that these efforts would be truly worthwhile for the company. We determined a few KPIs to measure, including second client on-boarding (note creates, retention, etc), CSAT, and time to design and execute. Risks included potentially affecting our CSAT for existing users who are often resistant to change.

Benefits for the user

  • Gain a more unified and familiar experience across devices

  • Increased productivity and efficiency in getting things done

  • A higher quality and more performant application

 

Benefits for the business

  • Happier users who recognize the value of Evernote (and pay!)

  • Streamline the workflow for designers and developers (no more designing 5x)

  • Provide the design team with guidelines and standards to scale the system

How will we achieve this?

As the design team worked hard to expand the design system I had created for iOS, we evaluated how we could best bring these changes to life. Lucky for us, our executive team gave us their full support, and shared our excitement to introduce a new design language.

Our approach became to do in a more incremental way. Our most active users were loyal, invested, and rely heavily on us for being productive. We realized we couldn’t just flip their world upside-down by making drastic changes.

  • A disciplined focus to hone in on key screens users see most often (navigation, note list, note editor, search, etc)

  • Chunk work into smaller, manageable projects versus full out re-designs

  • Iteratively build a framework to support A/B testing for quick learning

  • Drive more consistency between Mac/Win and iOS/Android

Our approach:

Screen Shot 2018-09-28 at 4.41.10 PM.png
 
The overall goal is to create a more cohesive experience and integrate a unified design system across all of Evernote’s platforms.

 

Rolling out the new system

Changes began rolling out in the latter half of 2017, starting with the new Web experience (then in Beta) and the Mac app. These changes first focused on the navigation pane, including a consistent location for the New Note button, as well as the note list and editor.

Though I’ve since left the company, I know the team is in good hands and set up to successfully continue executing this effort. 🙌

 
  A cohesive navigation across all desktop clients: Web, Mac, and Windows

A cohesive navigation across all desktop clients: Web, Mac, and Windows

Evernote’s experience today

Screen Shot 2018-09-28 at 4.58.24 PM.png