Microsoft OneNote

In late 2016 I worked with the OneNote team at Microsoft to roll out a complete overhaul of the application. The goal of the project was to provide a consistent experience for the user across the multiple devices our customers access their notes on.

Previously, OneNote had multiple layouts and designs depending on which version of Windows, Mac OS and mobile platform the user accessed the application from. With the new design, the navigation structure and overall application design was unified so that the end user experience was the same no matter the platform. My role on the project was to create consistent, dependable and guiding motion for the experience on all devices and platforms. One of the biggest contributions to navigation design that I created was a “deck of cards” motion language that is used on the pane navigation on desktops.

In addition to creating the motion for the overall application experience, I conceptualized, prototyped, and built other supplemental animations ranging from animated icons, first run experiences, and micro interactions.

ClientMicrosoftServicesMotion, Experience

Micro interactions

For the first time, OneNote has animated icons. On iOS and Android I drove the implementation of Bodymovin and Lottie, SVG animation frameworks, to integrate more detailed icon animations into the application. For the animated icons seen here in the macOS app, we used a traditional sprite sheet.

Designing the search functionality

The search functionality for OneNote's mobile experience is designed to live on a z-plane above the rest of the interface. When a user selects search, the interface drops away as the next level fades in, and vice versa upon exiting search.

Pull to refresh

The pull-to-refresh interaction on iOS is a delightful space to add a bit of personality to the OneNote experience.
I worked with the iOS development team to create a branded interaction using our custom spinner.

First-run animation

When the unified design for OneNote rolled out, I created this first run animation that plays upon launching the latest version of the application. This delightful animation turned out to be a customer favorite that was celebrated and shared by customers on social media.