Office App silhouette redesign - Power and Simplicity

UI/UX Design - Microsoft Office
The spectrum of work and ideas that Microsoft Office supports is diverse beyond imagination. For Office Design, our biggest challenge and our biggest reward is that our audience is quite literally everyone.
An audience of this size brings into laser focus the universal need for simple, powerful tools that help people stay focused amid an increasingly crazy world. Office has always offered a powerful set of tools with a wide range of useful features. Through refreshed UX, we make that power even more accessible with simple designs.
The problem
Many people who subscribe to Office 365 find it to be complex and overwhelming. Even O365 fans find it difficult to take advantage of the breadth of the suite and the full capability. To effectively address these issues, we need to focus on designing for power and simplicity, hitting the sweet spot between the two in O365.
1
“The programs have become overly complex as time has gone on. They have much more capability than we need.”
“Sometimes it can become overwhelming, there can be too many buttons available”

- Quotation from O365 users

Office App silhouette - The core Office apps share this UI structure. Such as Word, PowerPoint, Excel, OneNote, Outlook, etc.
Office App silhouette overview - In the Silhouette, we have the suit header for Office suit level information, the Tab header and Command ribbon for per-app commands, the canvas area for content, and task pane for extra functions and plugins.
App silhouette cross platform - The silhouette is also unified across platforms, which is Office online, Office on Windows, and Office on Mac.
Solution part A - Simplified Ribbon
The commanding ribbon area is the core of Office products. There are 93 functions grouped within it for Office Word. The number is even more significant for PPT and EXL. But for light editing users, or who reply on small or medium monitors, the heavy ribbon is too burdensome to be powerful.
Goal
• Reduce the perceived complexity of user experience.
• Increase space available for editing and collaboration.
• Easier to find and use frequently used commands.
Ribbon data analyzation
We reordered the ribbon commands based on the telemetry data, which we have been tracking for years. But the data is not enough, so we supplemented the design process with rounds of user studies.
Ribbon overflow redesign - Office Word
We simplified the commands ribbon, but didn't take away it's numerous
functions. While updating the first level controls, we also redesigned the
overflow menu by clean up the control misplacement and moved some
lower usage controls down to the second level.
Simplified ribbons outcome - Office Word
There are ninety three default controls in Word online ribbon, grouped
under six regular tabs and two contextual tabs. After re-prioritizing
and re-grouping by studying the ribbon telemetry and talk to users,
we minimized the default first level controls to seventy four and
updated the multi-line ribbon into a single-line version.
Simplified ribbon scaling - Office Word
Office Word with simplified ribbon
Office PowerPoint with simplified ribbon
Office Excel with simplified ribbon
Before and After
93 buttons with 114 px height vs 74 buttons with 40 px height
Ribbon switcher
The early rounds of user feedback we got for the ribbon simplification are mostly positive. But there are still 13% of users who prefer the multiline or need it as an option. Those are the power users who require full functionality. So we brought in the ribbon switcher, so users can easily toggle between multi and simplified ribbon.
Solution part B - Task pane management
Problem - Taskpane is the supplemental commanding surface in core office products. Over 83% of users need at least one task pane open when they are editing. 46% of users will need more than one, but only users with bigger monitors will leave them all open, because of the limit screen real estate.
Model Iterations
Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.
Deliverables
User study: We did several rounds of user study for both models in Office
Word, PPT and EXL. The results are very different based on the App.
So reviewed again all the pros and cons for both model, also considering
tech constrains and edge cases. We decide to go with Model B.
Tabbed task pane in Office Word
Tabbed task pane in Office PowerPoint
Tabbed task pane in Office Excel
Task pane visual refresh
As part of the App silhouette visual refresh, we built up a visual tool kit for compact surfaces like task pane. We have more than hundreds of task panes within all office products owned by generations of designers.
It's a powerful system, but lack of clean and cohesive visual and experience, which is another factor that creates visual noise beside of limited real estate.
Before and After
With the new tab navigation bar and refreshed UI, Office now offering a better supplemental side commanding system with a more coherent and harmonious interface. Users will be able to focus more on they content.
Parters
Office Canvas Team     Office Calc Team
Office.com Team           Office Outlook Team
My role
UX Ideation
Art direction - UI refresh - Build up visual guideline and Toolkit
Participate and provide materials for research
Work close with partner teams for coherent UXUI