OneNote UX Redesign

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

• Clearly communicate OneNote’s organizational system
• Significantly reduce design debt

2. De-emphasize power-user features that went against the paper notebook metaphor

• Remove 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.

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.

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.