UX Redesign

UX Redesign

UX Redesign

UX Redesign

UX Redesign

Microsoft OneNote

Microsoft OneNote

Microsoft OneNote

Microsoft OneNote

Microsoft OneNote

OneNote UX Framework

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

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

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

Company // Product
Microsoft // OneNote


Date
Aug 2015 – May 2017

Role
Visual designer

Responsibilities
Visual design
Some interaction design
Redline handoff
Prototyping

Platform
*iOS
*Mac
Windows
Android
Responsive web
(*Platforms I supported)

Team
10 designers
3 UX Researchers
30+ engineers

 

OneNote is a cloud-based note-taking app reaching 10’s 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 contractor on the team, my involvement focused on the visual design patterns and systems being introduced in the new interaction models. Alongside that work, I also participated in many of the UX discussions - at the time OneNote's job responsibilities across the team were largely siloed - which gave me a good introduction to thinking like a product designer.

 

The Problem

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 goal of this project was to address these issues without alienating existing fans as well as reinforce the value prop of the app through design.

OneNote

The "Before" designs for iPad and iPhone

Research

Identifying themes through insights

In order to understand the root causes and verify OneNote’s problem, 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 model was the biggest problem with the app. Even though we believed our organizational method to be understandable and fairly straightforward, we uncovered these main insights:

• Flaws in the navigation system design did not effectively communicate the "Notebook > Section > Page/Notes" organizational model

• Not everyone needed such extensive levels of organization for their notes, so the product's requirement for notes to be organized into sections was burdensome to many users

To illustrate these design flaws, the OneNote Windows app showed notebooks in a vertical panel along the left side of the screen, sections across the top of the screen, and pages in a third panel on the right side of the screen. The layout of these components simply did not match the hierarchical organizational system within the app.

Identifying themes through insights

In order to understand the root causes and verify OneNote’s problem, 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 model was the biggest problem with the app. Even though we believed our organizational method to be understandable and fairly straightforward, we uncovered these main insights:

• Flaws in the navigation system design did not effectively communicate the "Notebook > Section > Page/Notes" organizational model

• Not everyone needed such extensive levels of organization for their notes, so the product's requirement for notes to be organized into sections was burdensome to many users

To illustrate these design flaws, the OneNote Windows app showed notebooks in a vertical panel along the left side of the screen, sections across the top of the screen, and pages in a third panel on the right side of the screen. The layout of these components simply did not match the hierarchical organizational system within the app.

Identifying themes through insights

In order to understand the root causes and verify OneNote’s problem, 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 model was the biggest problem with the app. Even though we believed our organizational method to be understandable and fairly straightforward, we uncovered these main insights:

• Flaws in the navigation system design did not effectively communicate the "Notebook > Section > Page/Notes" organizational model

• Not everyone needed such extensive levels of organization for their notes, so the product's requirement for notes to be organized into sections was burdensome to many users

To illustrate these design flaws, the OneNote Windows app showed notebooks in a vertical panel along the left side of the screen, sections across the top of the screen, and pages in a third panel on the right side of the screen. The layout of these components simply did not match the hierarchical organizational system within the app.

ipad landscape old design

Previous iPad design – 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 (not the notebook icon)

Windows OneNote before

Previous Windows design – Vertical list of notebooks on the left side, sections across the top, and pages in another vertical list on the right side

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

For example, the iPad app placed sections horizontally across the top of the screen (like Windows), but pages were in a vertical list along the left side of the screen, and access to notebooks was hidden behind a menu button in the top left corner. 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.

Sketch & Wireframe

Iterating through ideas

After many brainstorming sessions between the Creative Director, UX designers, interaction designers, and researchers, we tackled the problem with 3 themes:

1. Develop a consistent navigation pattern across all platforms that would clearly communicate 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 wholly eliminate these features due to backward compatibility requirements.
** Due to high engineering costs this part of our solution ended up being out of scope.

All of the following sketches, wireframes, and designs were held up to our themes. We assessed how strongly they supported our direction and quickly decided whether or not to move the design on to the next stage.

Iterating through ideas

After many brainstorming sessions between the Creative Director, UX designers, interaction designers, and researchers, we tackled the problem with 3 themes:

1. Develop a consistent navigation pattern across all platforms that would clearly communicate 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 wholly eliminate these features due to backward compatibility requirements.
** Due to high engineering costs this part of our solution ended up being out of scope.

All of the following sketches, wireframes, and designs were held up to our themes. We assessed how strongly they supported our direction and quickly decided whether or not to move the design on to the next stage.

Iterating through ideas

After many brainstorming sessions between the Creative Director, UX designers, interaction designers, and researchers, we tackled the problem with 3 themes:

1. Develop a consistent navigation pattern across all platforms that would clearly communicate 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 wholly eliminate these features due to backward compatibility requirements.
** Due to high engineering costs this part of our solution ended up being out of scope.

All of the following sketches, wireframes, and designs were held up to our themes. We assessed how strongly they supported our direction and quickly decided whether or not to move the design on to the next stage.

Content organization sketches
iPhone sketches
iPhone sketches
iPhone sketches

Sketch iterations for mobile breakpoint

Prototype sketch
iPhone flow sketches
iphone-iterations-1

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.

iPad demo

iPad and iPad Pro prototypes that were tested with users

iPad pro demo

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.

iPad sketches
iPad sketches
iPad sketches
iPad sketches

Sketch iterations for desktop and tablet breakpoint

iPad sketches
iPad sketches
ipad landscape subway stops design

An example of one of my designs that experimented with consolidating all content except for notebooks into a single panel. Notebooks and recent notes were located in a second panel. In testing, we learned that this degree of content consolidation went too far, and confused users during testing. 

ipad portrait subway stops design

Design

Focusing on a final direction

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

Focusing on a final direction

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

Focusing on a final direction

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

OneNote responsive showcase

Original Microsoft Office "Ribbon" design (that didn't update until later), navigation in the same area of 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. This design also scales very well across all of the platforms that OneNote can exist. Testing showed that users quickly understood this new organizational system, and better understood the purpose of the app. Further, this new design met all accessibility requirements, easily working with screen readers and other accessibility tools.

The layout was also built to be 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. On any large-screen device, the default state hides the notebook panel off-screen, but still displays the sections and pages panel. As the screen sizes down, the section panel is also hidden to allow for maximum screen space to create content. Users are easily able to access their organized content by expanding the navigation with a click or tap of the chevron icon.

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 4:2:1 contrast ratio standard, not to mention the 162 different colors visible in the app across all platforms. In order to meet our objective of increased accessibility, it was necessary to revisit the entire color palette which provided an excellent opportunity to improve in parallel with the overarching redesign.

Our goal was to create a palette of true colors, through hue, saturation, and brightness, 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 attached document.

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 4:2:1 contrast ratio standard, not to mention the 162 different colors visible in the app across all platforms. In order to meet our objective of increased accessibility, it was necessary to revisit the entire color palette which provided an excellent opportunity to improve in parallel with the overarching redesign.

Our goal was to create a palette of true colors, through hue, saturation, and brightness, 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 attached document.

Original OneNote colors

Previous color palette

New OneNote colors

New color palette – launched 2016

Accessibility OneNote colors

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. 

iPad high-contrast

iPad high contrast

Mac high-contrast

Mac high contrast

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 broader 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 broader 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 broader test
 

Mac opt-in modal

Opt-in modals I designed for Mac and iOS

iPad opt in modal

As the engineers began implementing 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.

Feedback from both the pilot and the AB test led to countless small improvements, even influencing the visual design before it 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. With that feedback, the design team worked to reintroduce some depth and skeuomorphic touches, adding back some of that emotional quality the new design had lost.

Section tab close up

More personality in the shape and depth of the tabs – these details were designed after I left the team

Rejected iphone designs
onenote-ipad-screens_rejected

Design iterations that didn't make the cut

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.

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 that didn't make it past the cutting room floor.

Final design on Mac, released May 2017, recorded Oct 2018

Rejected designs
mac-hero

More rejected designs

Results

Investing in a redesign was a significant win

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

Investing in a redesign was a significant win

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

Investing in a redesign was a significant win

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

More projects

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

© 2018 Lauren Nielsen