onenote 2013 . microsoft office
Office 2013 was a pivotal release for the Microsoft. We made the transition from software in a box to service in the cloud and we translated our products across a variety of mobile operating systems. Additionally we were tasked with adapting our software to the new Metro design language. I drove personality design for OneNote product offerings throughout the product cycle which included visual and motion design across slate, desktop and mobile platforms. Of particular interest was our new radial menu UI and the opportunity to manage expectations across several development teams.
navigation redefined
The Windows 8 version of OneNote (MX) is where this project started and I had the opportunity to help reshape the products powerful navigation UI. Our top priorities were to simplify the navigation hierarchy, optimize for thumb control, and create an efficient authoring experience for touch. In the past, OneNote navigation had been spread around all sides of the interface. Our first order of business was to consolidate things along the left side of the screen which made things easier to scan and use. Additionally we used motion to enhance the sense of connection between different levels of hierarchy.
OneNote Nav Animation
the radial menu
Probably the most inovative UI to come out of Office 2013 was the new Radial Menu. Designed excusively for OneNote MX the Radial Menu is a marking menu that it allows users to perform selections by either tapping on it's pie shaped segments, or by making straight swipes in the direction of the desired control without actually popping the menu open. Motion played a key role in helping users understand this new UI convention. Quick snappy expand and contract animations were used to add a sense of playfulness and accentuate where controls came from. We created and tested dozens of prototypes with customers that resulted in a solution that is at once empowering, novel, and tastefully restrained.
cross platform alignment
Desktop: Development of OneNote was spread across 4 different product teams, and the desktop team really sets the stage for the others. So I spent a lot of time collaborating with folks from this team to ensure colors, typography, and iconography were aligned across the board. Mobile: In addition to partnering with the Slate and Desktop teams I also got to know our mobile deisgn team quite well throughout this project. Despite major differences in form factor and development platform we managed to ensure consistancey across core visual metaphors and UI conventions.
colorful organization
Navigating a vast collection of content is where OneNote really shines. It's robust hierarcy of sections and pages is leveraged across all platorms and color is used as a means to enhance content recognition. Therefore creating a palette that was beautiful yet accessible across 16 page types was a key focus.
OneNote Colors