OneNote UX Redesign

Microsoft

4 floating iPhones in a row displaying screens of a newly redesigned OneNote app

How might we redesign OneNote with inclusive and accessible design at the forefront?

Context

OneNote is a cloud-based note-taking app reaching tens of millions of users. One of the big projects I supported while on the design team was a redesign effort that aimed to address usability issues, cross-platform inconsistencies, and accessibility. This project primarily included redesigning the navigation model, improving the color palette, and many other targeted improvements. As a visual designer, my involvement focused on the visual design patterns and systems being introduced in the new interaction models.

No matter the job function, everyone on the team understood our goal. The problems this project aimed to address were widely evangelized. Despite a passionate fan base, and respectable app store reviews, there were a handful of significant problems including:

  • Low retention rates
  • Several usability issues among first-time users
  • Complete lack of accessibility support

After many brainstorming sessions between the creative director, designers, and researchers, we tackled the problem with three goals in mind:

Goals

1. Develop a consistent navigation pattern across all platforms
  • Words  that clearly communicates OneNote’s organizational system
2. De-emphasize power-user features that went against the paper notebook metaphor
  • This meant removing features like section groups and subpages, in order to clarify the organizational structure of our app
  • Unfortunately, we couldn't fully eliminate these features due to backward compatibility requirements.
3. Make sections an optional level of organization to reduce friction for new users
  • Through extensive usability testing and research, we discovered that forcing people to organize their notes first, before actually taking a note, presented unnecessary friction.
  • However, due to high engineering costs this goal ended up being out of scope.
The "Before" designs for iPad and iPhone

The "Before" designs for iPad and iPhone

Responsibilities

Visual designer for Mac & iOS

Producing dozens of visual iterations

I worked with the Creative Director and the Lead Interaction Designer to explore as many designs as possible that were aligned with the project goals, repeating the iteration cycle based on findings. Through this process I created a variety of different interaction models for us to test going forward.

Coding prototypes to test with users

I created Framer prototypes with the more successful and interesting visual design solutions. These prototypes were then used to conduct usability testing with students, teachers, office workers, and people with various disabilities.

Rebuilding our color palette

Not only were roughly half of our colors not AAA compliant, but the palette had also bloated to 162 different colors across all platforms. To address this, I lead work in creating a palette of true, pure colors that allowed the product to fully lean into color as language. For a more in-depth look at my color process, see this documentation.

We also worked to purposefully design the Accessibility palette. If a user turns on the Darken Colors feature in iOS, OneNote has a specific design and color palette for this mode.

Solution

Unifying OneNote across platforms & pixels

The project's final solution was fully released in May 2017. Below is a screen recording from October 2018 of the design. The following screens are designs I created that ended up not making it to the final product.

Screen recording of OneNote interactions on Mac
Final design on Mac, released in May 2017
No items found.
Impact

Major redesigns can work!

By the time this project was completed, I was no longer at Microsoft – the bulk of my contributions shipped about 8 months after I left the team. After the release several former coworkers shared these exciting and important highlights:

• OneNote's App Store ratings, already high, actually increased after the redesign.

Our product averaged 4.5 stars across platforms just weeks after the release. Considering how many apps see their ratings decline after a redesign, this was a considerable achievement.

• Hundreds of people reached out to the team via social media and OneNote's feedback tool to tell us how much they loved the new design.

We also heard from many people with accessibility needs who told us how much they appreciated the improvements. Plus, we were no longer at risk of legal action because of our previously inaccessible product.

• Most importantly for the business, OneNote's retention rates and user growth saw statistically significant increases in the months after the redesign was released.

This was a really exciting team and project to work on, and I'm really pleased I was able to contribute so much to this massive project. Congrats again to the OneNote team!

Read the official redesign announcement
** Full case study available

More projects