Miscellaneous OneNote projects

Miscellaneous OneNote Projects & Features

Miscellaneous OneNote Projects
& Features

Miscellaneous OneNote Projects & Features

Company // Product
Microsoft // OneNote


Date
Feb 2015 – Aug 2016

Role
Visual designer

 

While contracting on the OneNote team, I had the opportunity to get my hands on a wide variety of projects. In my 18 months, I worked on everything from print material, native android, windows and iOS product, responsive web, motion demos, and more. Though, my primary focus areas were features on the iOS and Mac platforms.

All of this work was shipped either while I was on the team, or shortly after I left.

Windows Ink Tools

Working to support one of the senior designers on the team, I created copious amounts of iterations for the Ink Tools feature. Here, we were cycling through visual styles for the icons (from line drawings to skeuomorphic), their states, and the ink properties panel. This was one of the last projects I worked on before moving on from Microsoft, and it was handed back to the senior designer before shipment.

Ink tool icon iterations
Ink tools panel
Ink tools states

Evernote Importer for Mac

Evernote was/is one of the main competitors for OneNote, and the team saw a need and opportunity to take back market share. This feature was one of the most robust in the note-taking space – there were many competitors, all trying to make compatible importers – and it successfully imported notes and organizational queues from Evernote into your new OneNote notebook. I specifically worked on the UI treatment, content, and visuals for this stepped dialogue box.

Evernote to OneNote converter

iOS Icons

Selected "What's New" Icons

With every monthly release, the Apple team wanted to make sure to highlight all of the improvements. If you use OneNote on an iOS device, you will have likely seen some of these in the monthly release announcements when opening the app. I created these icons for dozens of new features throughout my time on the team.

OneNote iOS Whats New icons
onenote-sketches-11
iOS Product Icons

While working on the broader UX Redesign project, I also took the initiative to redesign all of the UI icons to make sure that they were a unified set. Many of them had come from different projects or platforms, so style, line weight, and execution varied. Now they're a pixel-perfect family.

OneNote iOS icons

In-App Teaching UI

Working directly with the Apple team's interaction designer, motion designer, and engineers, we implemented this brand new feature to help teach users how to use our app. My involvement with the project was focused on solving the visual design system. The lead interaction designer owned the project, and built the majority of the interaction model as well as put together the prototype that ended up being tested with users.

Default image

Ink Motion Demos

In the summer of 2016, OneNote launched quite a few new and exciting features, and one of the biggest releases was a major update to OneNote’s competitive differentiator – inking and ink effects. Working with the product manager and the marketing team, I created these motion demos to showcase the Mac platform ink tool (which was a net-new feature to Mac, and one of the highest-requested features), as well as the new ink effects for Windows. Both of these videos were shared broadly on the product blog and twitter account.

Today Widget

A small feature the iOS team added was the ability to add OneNote, and a small set of its functionality, to the Today screen. This allowed users to take notes right from their iPad or iOS home screen. I created the visuals for the modal prompt that advertised this feature.

iPhone today widget
iPad today widget

Social Images for #AMA Sessions

On a semi-regular basis, the marketing teams would host AMA (ask me anything) sessions on Reddit and Twitter. OneNote has a very passionate and engaged fan-base, and these sessions always proved to be valuable for both the team and the users. In order to announce the sessions, the marketing team came to the design team to create the banners. Here are a few I created in the last few weeks working on the team.

Ask me anything example 6
Ask me anything example 5
Ask me anything example 4
Ask me anything example 3
Ask me anything example 1
Ask me anything example 2

Persona Posters

In order to keep our entire team (UX, Design, Devs, Product Management, Marketing, Leadership, etc.) focused on our users, I collaborated with my Creative Director to create persona posters that were hung up around the office. The in-depth audience profiles were collected and compiled by the research team, and the researcher worked with me to pull out a high-level overview of each one. We made sure that the overview was still representative of the persona. The CD and I wanted to make sure these posters had the minimum amount of text possible while still reflecting our user’s intent, as well as our brand style through color, type, and photography.

OneNote persona posters

More projects

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

CONTACT

hello@LNcreativestudio.com
Seattle WA USA

© 2018 Lauren Nielsen