OneNote First Run Experience

While working on Microsoft OneNote, I designed the motion of a first run experience for new users on the web. Many of our new users were coming to OneNote online with no knowledge of what the product is, and upon being presented with a blank canvas, they typically walked away from the product. The goal of the FRE was to demonstrate the value of OneNote’s productivity capabilities with templated examples and high level messaging. We worked through a series of iterations, which you can see below, that began as a simple card style intro where the user can choose what kind of template content they would like their first notebook to contain.

In our early test flights we were seeing significant drop-off rates through the cards, and we were looking for a way to keep user’s attention in app. We learned from the OneNote visual redesign FRE that animation has a significant effect on keeping users focus on the experience (84% of Mac users stayed to completion for that experience), so we applied those learnings with higher level messaging to this FRE. I created a rich animation version using Bodymovin, reducing load times to near zero and file size under 500kb for the entire duration. Working with the developers to integrate the animation, we had to align a few moving parts from Bodymovin and CSS animation properties to create a seamless experience for the user as they start their first use with OneNote.

ClientMicrosoft OneNoteServicesMotion, Experience

Version one

In the early phases of the experience I wanted to provide motion to what would have otherwise been a totally static click through. I knew that we could use motion to guide and delight our users if we started the design process with motion and UX in mind, so as we progressed through iterations I pushed for a more richly animated experience which you can see below.

Strengthening the metaphor

One of the goals of this FRE was to demonstrate the value of OneNote to new users, so we started the experience with metaphorical imagery; all your stuff in one place.

A change in style

As we moved away from the single-stroke mono-color aesthetic, I took that as an opportunity to think of different applications for motion in the experience. I designed a more interactive experience on the 'pick a notebook' screen with some delightful rollover states.

Starting over

Eventually we started over; I wanted to use motion to help demonstrate the value of OneNote in a way that leaned more towards the advertising end of the motion design spectrum. Using our illustrator's simple storyboard sketches, I refined a tight animatic while he drafted illustration styles before I committed to animating the full color motion piece.

Locking it in

An early draft of the final animation style. During early user testing I found that there was way too much action in the animation, and the message was getting lost while users were watching the secondary and tertiary motion details. I was reminded of a great quote by Blaise Pascal, "If I had more time, I would have written a shorter letter." In this case less was more, and by removing the minor details and placing the text strings at the top, I was able to create a guiding animation to help users understand the messaging.