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:
After many brainstorming sessions between the creative director, designers, and researchers, we tackled the problem with three goals in mind:
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.
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.
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.
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:
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.
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.
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!