OneNote Fluid Notes
A framework for organizing and finding your notes
Overview

OneNote is a note taking app for all your notes, whether it’s for personal, work, or school. It’s like a digital notebook.

We created a new framework for organizing notes in OneNote. My main responsibility was exploring different ways to navigate and filter content to quickly find notes.

This work started as an incubation project but we later brought some ideas into product.

*Some of this work is still in incubation so confidential information has been omitted. Feel free to contact me for more details.

Timeline
2020 / 6 months
Role
Product design, Information architecture
Collaborators
PM, Product designers, Researchers, Engineers
Tools
Figma, Usertesting.com
Challenge

One of the biggest challenges people have in OneNote is the rigid organization structure that the app forces them to work within. In order to create a new note, you must first select the notebook and section it will be filed under.

However, when people first start out in OneNote, many don’t necessarily know what they want to call their notebook or how they plan to organize their notes—they just have something in mind to note down for later.

Once they have more notes, notetakers range from those who keep everything organized in clearly defined hierarchy to those who keep a mix of notes and rely on search or other tags to find their notes. Current OneNote structure caters much more to highly organized notes than a more “fluid” organization.

Fluid Framework introduced a more collaborative and interactive canvas for content creation that would give OneNote users more freedom in how they take notes. These Fluid notes could be created without being tied to the traditional OneNote structure, allowing for more flexibility in how they could be organized.

Source: Microsoft

We wanted to explore different ways to organize Fluid notes in OneNote.

The goal was to create a framework for organizing notes that works for both people who organize everything and those who never do.

Process

I worked in fast paced, 3 week design sprints: one week for research, design, and user testing each. My focus was on exploring different ways to navigate and filter content to quickly find notes. I then worked with another designer to put everything together into one cohesive framework.

One problem we faced in creating this framework was determining how our ideas would work with the classic notebook structure as it exists today. We wouldn’t be able to completely replace today’s OneNote with these new ideas. I ran a design sprint to determine how customers might best understand an organization structure that encapsulates both classic notebooks and Fluid notes.

Learnings

Working on an envisioning team

This was my first team working on an incubation project that we needed to go so broad on and then narrow down in such rapid cycles. We worked in back-to-back sprints to create designs quickly and collaborated closely with engineers to build those designs as we created them, which was exciting.

Scoping a complex and multi-faceted project into manageable pieces

This project had a huge scope of tasks and functionality to design for within a few months. Once I got started, I quickly realized how easy it was to spiral time into endless variations in designs with completely new organization structures. Since we only had time for a v1, I had to scope for and prioritize core functionality while laying out the foundation for future ideas. That also meant a lot of organization to make sure that ideas for more advanced features didn’t get lost after that moment.

Gaining momentum

Because of the exploratory nature of this incubation project, it was crucial to get buy-in from important stakeholders across the company and in leadership. We were able to successfully share out our work in a way that created excitement toward OneNote and gave us a seat at many larger Microsoft design discussions. I also saw how we can inspire more near term work and applications of a project that was originally intended to be more incubation.

More projects