Microsoft Office 365 Suite Header + Theming
2018 - Office 365 Suite Header
The Office 365 suite header allows users access to suite wide capabilities from any app while working contextually. Worked with numerous partner teams to design a cohesive system for the panes that drop down from the header, like notifications, settings, and help. Lead the introduction of our new Fluent design language, and built new additional shared capabilities.
2018 - Redesigned User Theming
The goal was to provide a method for students and teachers to customize their Office 365 experience to drive user delight, and retention. My role was to design the framework of what the new themes would look like in expanded versions on Office.com. I created templates to optimize theme designs on all screen sizes, which the Microsoft Education team then plugged illustrations into.
Where we started
The theming feature allowed users to customize the Office 365 web suite header. Themes were outdated and didn’t align to the Fluent design visual refresh, nor used accessible color combinations. Themes didn’t carry over into all of the web apps. Not all users knew that theming existed.
What we shipped
In January 2019, we shipped 3 new themes for our education users. When a student or teacher logged into Office.com, they saw a callout, advertising the new themes. It pointed at the Settings icon to train the users where to find themes in the future. Clicking the “See more” button on the callout opened the settings pane. A user could preview the new themes, which were anchored to the right corner to insure the theme is always visible. The theme carried across all of the other online apps.
