TIME FRAME—
August 2019 to present

MY ROLE—
UX Design
UI Design

COLLABORATORS—
Paul Andrew (PM)

TOOLS—
Figma

The problem. What's wrong?
When Microsoft 365 customers have poor network performance, the quality of the end-user's experience and productivity suffers. 

The solution. What are we proposing?
The Network Performance Score evaluates the impact of the customer's network architecture design on their user's O365 performance and provides actionable tasks to improve their network and user productivity.

The purpose. What's the point?
The hope is to influence customers to take action to 1) want to know the health of their network and 2) take steps to improve a poor performing network architecture.  

Customer-oriented goal. User benefits?
The Network Performance Score will provide customers a benchmark of how well their network is performing, by location, at a global and local level, how their network is comparing to other organizations, and will provide insights and actionable recommendations to improve their network performance. 

Microsoft goal. Microsoft's benefits?
For Microsoft, we want to optimize the user experience for better performance to empower the customer to understand a, rather complex, problem and have an avenue to troubleshoot their network issues on their own. Leading to high customer satisfaction and in turn, license renewal.

Entering into a month-old feature. 
This project was handed off to me in its infancy stage by two other UX designers. I became the sole designer for this feature. Before diving into the project, I met and spoke to each of them to catch me up to speed. I've been working on this feature for the last 9 months, and my role has been one of a user experience designer, working closely with the feature PM and development team to implement designs and strategies that promote our overall goal. 

THE PROCESS

The beginning. 
Before I jumped into the design process, my first step was to research and understand what I was designing for: network performance. My second step was to understand the ecosystem that this feature would live in: the Microsoft 365 admin center space. I worked closely with and asked a ton of questions to my PM, partner researchers and designers working on other features across the admin center ecosystem to get a better understanding of everything. I'm almost certain, I barely scratched the surface.

Design goals. 
1. Network Performance to have visual coherence with other features with scores in spaces across the Microsoft 365 admin center
2. Provide clear data visualizations and insights that inform IT admins and network engineers about their network architecture 

Before

After

Understanding the user and space. 
To drive towards the first goal of visual coherence across the Microsoft 365 admin center space, I worked closely with four other designers. We each represented our own feature, mine being the Network Performance score piece of the puzzle (Image on left). Initial efforts were to drive home clear principles and definitions of design guidelines we all would adhere to. In tandem to understanding the broader space, I needed to understand the architecture of how Network Performance was going to be built and created a map for it (right).

Image credit: Brandon McRae, UX Designer for User Experience Score

Information architechture of Network performance

—

The fun begins: the playground.

—

Sketches. 
After research and defining design guidelines, I started explorations on how to visually solve the goals of visual coherence and providing clear data and insights for the user. I worked with Microsoft's Fluent design system and UI Fabric kit to build most designs.

Continuing to define visuals (map styles). 
On the landing page of this feature, the goal is to provide an overview of the 'health' of the customer's network. One component on the page is a map that's meant to show the network performance quality of the customer's office locations. The challenge for this particular data visualization was not having official guidance on how to design for maps. I started (and still in progress) defining potential styles for the map control. First, I played with the Bing Maps developer control to see what was possible / the constraints. Then, I explored different possibilities for zoom controls, defining colors, type, icons, and interactive states.

Research. 
I had a chance to participate in an in-depth user research test where I got to, essentially, "speed date" 6 users. Each session was 20 minutes long. It was such a rich opportunity to ask usability questions and see how users reacted to what was in front of them. Before flash feedback, I led a meeting with designers and researchers to brainstorm the best way to tackle this testing session and created a list of questions and a general layout of how to structure the testing session – 1. Understanding the user, 2. The Walkthrough, and 3. Concluding sentiments. 

My main takeaways from this user testing
– Useful information for enterprise, but not relevant for smaller companies
– One participant didn't feel like network score should be a "score" (score indicates a lot of dimensions, but just wants to understand if it's good, okay, bad)
– Histogram (global customer comparison) speaks well to giving customer a snapshot at how they're doing compared to others
– Generally "happy" when seeing that their network performance was above average; easy to understand this verbiage

What I learned. 
Through user feedback, as well as feedback from crits and feature team brainstorms, there were key things I learned to update the overall design of this overview page for Network Performance.   
– Score coherence effort needs to be visual on an L1 node across all spaces 
– A combination of data viz + supplementary text is necessary for comprehension 
– Even networking IT admins were confused with some technical words/phrases so when designing / considering content strategy, there's no concern to be "too" friendly
– A reporting feature is heavily sought after so added a "History" pivot 

Continuing the chronicles of Network Performance.
As this feature develops, I am continuing to sit in on customer interviews to hear their needs and how we can improve flushing out the details of the UI. Two large user needs have been understanding how to onboard into this feature and being able to view historical data in a digestible manner  – which are user flows I am currently working on and more. Other than designing, I definitely understand networking a little better.