< back

Microsoft OneNote

msft banner.jpg
 

About —

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

I joined the team in winter 2018 as a product designer, and during my time here I’ve had the opportunity to work on a number of projects:

  • Designing features for the core app such as page templates, custom tags, and the touch bar

  • Adapting the Fluent command bar flyout for OneNote

  • Improving integrations with Microsoft Teams

  • Designing the Send to OneNote integration with Outlook

  • Renewing the OneNote start experience to align with Office’s redesign

My Role:

Design Research, Journey Mapping, Product Design, Prototypes, Visuals, User Testing

When: 2018 - Present

 

Designs —

Core app features

I designed several features within OneNote. I gathered research and usage data, defined problems and goals, and then, with research-validated user journeys in mind, created a number of prototypes that I tested until we landed on designs that worked well. Many of these features brought in functionality that was available in OneNote 2016, the older version of the app, but usually with an improved experience founded on user testing.

Send me an email if you’d like to learn more!

 

Fluent command bar flyout

Fluent introduced the command bar flyout as a new design elements in 2018. It allows for easier access to commonly used tools inline rather than at the top of your window. OneNote is one of the first apps to implement this element, and we initiated several important feedback loops with the Fluent team, especially concerning accessibility for this feature.

My main responsibility was to figure out which commands to include for all of the different types of objects that can be inserted on a OneNote page (such as text, ink, pictures, tables, and files) for both mouse and touch entry. I relied on ribbon and command bar flyout usage data from OneNote, OneNote 2016, Word, Excel, PowerPoint, and Outlook to make my first draft of commands. With much user feedback, I adjusted the design and interaction behavior of the flyout until we came to a design that people resonated with.

Faster way to make edits! ...Without using shortcuts.

Faster way to make edits! ...Without using shortcuts.

In implementing the command bar flyout, we also needed to update the context menus.

In implementing the command bar flyout, we also needed to update the context menus.

 

Microsoft Teams integration

Microsoft Teams is a communications platform that combines chat, video meetings, and app integrations to create a hub for teamwork. One of the OneNote integrations is the add tab app, which is used to add a OneNote tab to any chat or team channel. You would then be able to quickly access your notes from within the context of your conversations.

Based on user feedback and research on the existing experience, I created a number of explorations to 1) incorporate a way to create new sections from within the notebook picker and 2) simplify the overall experience. I then conducted user testing and iterated until we could validate the design.

Since the redesign, we’ve seen a huge growth in selections of existing notebooks alongside a decrease in notebook creation.

Before:

Now:

addtabapp.png
 

Outlook Send to OneNote integration

The Send to OneNote integration allows you to save the content of your emails to OneNote. There were two main problems we kept hearing:

  1. Searching for the right notebook was strenuous for some, especially once you had a good handful of notebooks & sections. Even if you always saved emails in the same place, the previous experience required you to visually search for that notebook and section each time.

  2. Users with multiple accounts were struggling to switch between them.

I collaborated with another designer to incorporate a “Recent Sections” section, a familiar concept for OneNote users, and redesign the account switching experience.

1 - Picker.png
 

OneNote Start for Office.com

The start experience is the first thing users see when they open OneNote online. Office had redesigned their start experiences for Word, Excel, and PowerPoint to optimize for how people actually use the experience so I collaborated with the designer who had led the effort to apply the new design to OneNote.

You can access this experience by going to Office.com and then clicking on the OneNote tile. (You will need to sign in to Office with a work or school account.) Some visual elements have since been updated but the main concept has stayed the same.

Start-WAC-OneNote-Baseline-01-AllupMVP.jpg
 

Home  -  Microsoft - Pet Adoption  -  MSR  -  Kloset  -  Harmony  -  Drag Letter