Microsoft OneNote

OneNote is a cloud-based note taking app reaching 10's of millions of users. Since coming onto the design team I've worked on projects supporting UI design across Apple, Android and Windows, email marketing, web content and structure redesign, sharing and collaboration, executive level presentations, icon design, and a corporate brand style guide.

Shown here are a selected range of works from posters to UI designs that vary between consumer and internal work.

mac-heromac-hero

UX Framework Redesign

The OneNote Experience team has spent the better part of a year rethinking the structure of our app. The fruits of that thinking are now manifesting in hundreds of visual interartions. Shown here are one version of recent interations I created for the iOS and Mac platforms. The intention of this project is to create a more cohesive and unified app, so whatever our team lands on for the final design will be adapted across all platforms, from phones to whiteboards. 

[unex_ce_button id="content_hu4c0gczb,column_content_ossywci43" button_text_color="#ffffff" button_font="regular" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="1px" button_bg_color="transparent" button_padding="10px 60px 10px 60px" button_border_width="2px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="#8f4db7" button_text_spacing_hover="1px" button_bg_hover_color="#ffffff" button_border_hover_color="#ffffff" button_link="http://share.framerjs.com/500ox3emt999/" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]Mac Prototype[/ce_button]
[unex_ce_button id="content_hu4c0gczb,column_content_ds9xo89as" button_text_color="#ffffff" button_font="regular" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="1px" button_bg_color="transparent" button_padding="10px 60px 10px 60px" button_border_width="2px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="#8f4db7" button_text_spacing_hover="1px" button_bg_hover_color="#ffffff" button_border_hover_color="#ffffff" button_link="http://share.framerjs.com/atc4n1etdh8y/" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]iPad Prototype[/ce_button]
[unex_ce_button id="content_hu4c0gczb,column_content_ky5l3b3av" button_text_color="#ffffff" button_font="regular" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="1px" button_bg_color="transparent" button_padding="10px 60px 10px 60px" button_border_width="2px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="#8f4db7" button_text_spacing_hover="1px" button_bg_hover_color="#ffffff" button_border_hover_color="#ffffff" button_link="http://share.framerjs.com/dpkuwxavaf5p/" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]iPhone Prototype[/ce_button]
ON_screensON_screens
iphone-screensiphone-screens

Redesigned iOS Icons

While working on iPhone to make it the best it could be, I decided 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.

Updated Color Palette

One of my major contributions to this project was creating a new color palette with which to more forward. The colors of the old app were muddy, varied across platforms, and weren't a beautiful, harmoneous palette. I spent about 6-8 weeks working closely with my creative director going through digital color studies and building new colors using mathematical reasoning. The results, whose final HEX values were approved and selected by my CD, are vibrant and unified, brining our redesigned app to life.

In-app Teaching UI

Working directly with the Apple team's interaction designer, motion designer and engineers, we implemented this all new feature to help teach users how to use our app. 

[unex_ce_button id="content_dxj8w07zj" button_text_color="#7321a6" button_font="regular" button_font_size="15px" button_width="auto" button_alignment="left" button_text_spacing="1px" button_bg_color="#ffffff" button_padding="10px 60px 10px 60px" button_border_width="2px" button_border_color="#7321a6" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="1px" button_bg_hover_color="#7321a6" button_border_hover_color="#7321a6" button_link="http://share.framerjs.com/ok60p6yfbnjy/" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]Teaching UI Prototype[/ce_button]
teachingUI-allteachingUI-all

Persona Posters

In order to keep our entire team (UX, Design, Devs, PMs, Marketing, Leadership, etc.) on track and thinking about why we are designing our app, I created persona posters that were hung up around the office. The in-depth audience profiles were created and compiled by the research team, and I pulled out the high-level overview of each one to fit on a poster. My creative director and I wanted to make sure these posters had the minimum amount of text possible while reflecting our brand style through color, type, and photography.

persona_posterspersona_posters

Selected "What's New" Icons

Every month the Apple team releases updates and depending on which platform you're running, you'll see these icons next to a blurb that describes the new improvement. These icons were created before the launch of the new color palette.

hella-iconshella-icons

Marketing Motion Demos

This summer (2016) OneNote has launched quite a few new and exciting features, and one of the biggest is a major update to our competitve differenciator, inking and ink effects. These videos are a demo of the Mac platform ink (totally new feature to Mac, and one of the highest requested featrues), and the new ink effects for Windows.