Overview
At the start of 2015, my team and I kicked off a design project with the Modern Assistance and Support Experience team to redesign the Office Support site and in-app help experience. I was responsible for leading the design effort, art direction, and coordination with the Program Management team and Developers. The following is a brief overview of our design process.
Design problems with previous site
- No clear information architecture
- Minimal browse experience
- Inconsistent wayfinding models
- Inconsistent, clunky visual design language
- Minimal browse experience
- Inconsistent wayfinding models
- Inconsistent, clunky visual design language
A collage of the site before the redesign.
Competitive review
We looked at a wide variety of Help and Support sites.
Design Principles
- 100% Customer-centric
- Clear information hierarchy
- Modern, adaptive design
-Aligned with Office brand identity
Moodboards
We knew we needed to adhere to the Microsoft Design Language, but within that system, there is still room to push the language in different directions. We created three moodboards to hone in on specific aspects: color, iconography, photography.
Define and explore scenarios
Working with the content PMs we created scenarios around user needs as defined in our framing statement.
Framing statement
People want just the right amount of help, at just the right time.
They want a system that understands who they are and what they're trying to do so they can get back to work right away.
An experience that keeps them focused on the job at hand, but they also want the opportunity to lean more when they have the time.
They want to get answers they can trust, and they want to feel heard when they tell us something's wrong.
They want their problems fixed now, whether it's by an article, someone online, or someone they know.
All of this, no matter where they are or what they're trying to do.
Final design
Updated look and feel with clear core navigation, condensed content, and consistent sub-navigation.
