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?

Company
Microsoft
Date
2015 – 2017
Platform
Visual design, interaction design, prototyping
Role
Visual designer
Responsibilities
*iOS, *Mac, Windows, Android, *Responsive web – (*Platforms I supported)
Team
2 visual designers, 2 interaction designers, 1 motion designer, 2 UX researchers, 3 product managers, 30+ engineers

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:

• Low retention rates
• Several usability issues among first-time users
• Complete lack of accessibility support
The "Before" designs for iPad and iPhone
The "Before" designs for iPad and iPhone
Research

Identifying themes through insights

In order to understand the root causes of the problems, the team ran usability tests, interviewed current and former OneNote users, reviewed customer feedback data, and conducted ethnographic studies. The findings from all of this research indicated that the organization and navigation system was the biggest problem with the app. Even though we thought our organizational method to be understandable, we uncovered these main insights:

• The design of the navigation system did not effectively communicate the "Notebook > Section > Page/Notes" organizational model
• The product's requirement for notes to be organized into sections was burdensome to many users – not everyone needed such extensive levels of organization for their notes

On top of all of these issues, OneNote’s UI was inconsistent across all platforms.

The clearest example of these design flaws can be seen when looking at OneNote on iPad and Windows (below). The iPad app had sections horizontally across the top of the screen (like Windows), but pages were in a vertical list on the left side of the screen, and access to notebooks was hidden behind a menu icon in the top left corner. Windows laid out notebooks in a panel on the left, sections horizontally across the top, and pages in a panel on the right. These inconsistencies meant that people who used OneNote across multiple platforms experienced vastly different design and UX experiences, and had to relearn the app on each device.

These issues are glaring, but they paled in comparison to the challenges faced by people with any sort of accessibility needs. OneNote was never designed to support assistive technologies, so these people were completely unable to use the product.

Previous iPad design (left) – Sections in a horizontal list across the top, pages in a panel down the left side, and access to notebooks hidden behind the menu icon // Previous Windows design (right) – Vertical list of notebooks on the left side, sections across the top, and pages in another vertical list on the right side
Previous iPad design (left) – Sections in a horizontal list across the top, pages in a panel down the left side, and access to notebooks hidden behind the menu icon // Previous Windows design (right) – Vertical list of notebooks on the left side, sections across the top, and pages in another vertical list on the right side
Workshop
No items found.
Sketch & wireframe

Iterating through ideas

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

1. Develop a consistent navigation pattern across all platforms that clearly communicates OneNote’s organizational system
2. De-emphasize power-user features that went against the paper notebook metaphor - like section groups and subpages*
3. Make sections an optional level of organization to reduce friction for new users**

* We couldn't fully eliminate these features due to backward compatibility requirements.
** Due to high engineering costs this part of our solution ended up being out of scope.

Scan of a sketchbook page illustrating ways of find your notes in the app
Find, organize, and navigate sketches
Scan of a sketchbook image illustrating an idea for organizing notes with the app
Quick sketch on how Loose Notes could be "organized" within a new structure

I worked with the Creative Director and the Lead Interaction Designer to explore as many designs as possible that were consistent within this approach. We built a variety of interactive prototypes of some of the more promising design solutions (primarily with Framer) that were used to conduct usability testing. Afterward, we repeated the iteration cycle based on findings.

Testing included a broad variety of our user base - students, teachers, office workers, and people with various disabilities. My contribution to this part of the process included a variety of interaction models in the form of sketches and wireframes, dozens of high fidelity visual design treatments, and a handful of prototype iterations for user testing. I did not participate or sit in during any of the user tests.

Animated GIF of a OneNote prototype demonstrating the left panel organization
iPad prototype that was tested with users

After going through these steps, we soon determined that if we wanted OneNote’s organizational system to be understandable, the entire navigation UI needed to be in a single area of the screen. Using a variety of design methods to show/hide content in contextual moments, we aimed to minimize the impact on screen real estate. The most important part of the screen is the user-created content on the page, and we wanted to make sure the app chrome and navigation did not impact that too much.

No items found.
Design

Focusing on a final direction

After multiple rounds of iteration, we distilled our research, designs, and ideas down to the design below.

New OneNote design displayed in a Macbook, iPad, and iPhone all laid out on top of each other
Showcase mockups I created to communicate our new design direction. Navigation located in the same area on the screen, consistent color story, flat and minimal design.

This solution consists of three content panels - one for notebooks, one for sections, and one for pages – which scales very well across all platforms. The layout is flexible, allowing users to resize the width of the panels, as well as automatically pushing panels off of screen as the window shrunk in size. Testing showed that users quickly understood this new organizational system and therefore better understood the purpose of the app. Further, this new design met all accessibility requirements, easily working with screen readers and other accessibility tools.

Considering the details

One of my major contributions to this project was updating the color palette. Roughly half of the colors in OneNote did not meet our AAA contrast ratio standard, not to mention the 162 different colors visible in the app across all platforms. In order to meet our objective of accessibility compliance, it was necessary to revisit the entire color palette. This provided an excellent opportunity to improve in parallel with the overarching redesign.

Our goal was to create a palette of true, pure colors that represented each section of the color wheel in near-perfect increments. The resulting clean, vibrant palette allowed the product to fully lean into color as language. For a more in-depth look at my color process, see this documentation.

Layout of the old OneNote color palette, the new color palette, and the A11y color palette
Previous color palette // New color palette (launched in 2016) // Accessibility palette


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. The level of thought put into this palette was the same as the primary palette, in order for the app's color story to carry through. Below are designs for the Darken Colors mode on iPad and Mac.

No items found.
Test

Validating our assumptions

• Pilot testing allowed us to rapidly iterate before the broader launch
• Feedback from users during the pilot influenced the visual design direction
• We allowed users to opt-in to the Beta before the AB test

While we implemented the new design, OneNote partnered with schools around the world to conduct real-world pilot testing. Though we still user-tested smaller interactions, the changes we were proposing were so large that small-scale user testing wouldn't have the same kind of reach or visibility. We needed to test the whole product at once in its natural environment.

After this initial round of pilot testing, we AB tested the new design more broadly. We started with a small percentage of our user base and even offered the ability to opt in or out of the Beta. Throughout the AB test, we collected qualitative feedback through surveys and tracked KPI's such as retention rates and page creation counts.

Opt-in modals displaying a new beta design for OneNote
Opt-in modals I designed for iOS and Mac

Feedback from both the pilot test and the AB test led to countless small improvements, influencing visual design decisions before everything was fully released. OneNote's original design was significantly influenced by the skeuomorphic trends from the early 2000's and our new visual design went headlong in the other direction – flat, minimal, and much less playful. Feedback from testing revealed that those design details were missed, so the team worked to reintroduce some depth and skeuomorphic touches, which added back some of that emotional quality the new design had lost.

Detail screenshot of notebook tabs design
More personality in the shape and depth of the tabs – these details were designed after I left the team
No items found.
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.

Animated GIF demo of the launched OneNote redesign
Final design on Mac, released May 2017, screen-recorded Oct 2018
No items found.
Results

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

More projects