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:
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 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.
After many brainstorming sessions between the creative director, designers, and researchers, we tackled the problem with three themes in mind:
* 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.
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.
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.
After multiple rounds of iteration, we distilled our research, designs, and ideas down to the design below.
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.
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.
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.
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.
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.
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.
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:
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!