Project Overview

Create and refine the UX for the network space in the Windows Core OS, accounting for complex design challenges because of legacy, technical and Enterprise aspects. I partnered with 5 feature PM’s to create solutions for a range of networking feature areas for Windows 8.1.

What I did

Cross-group collaboration  //  Platform design  //  Interaction design  //  Prototyping  //  Visual design  //  Icon design  //  Touch integration  //  User Research


Provided consistent Networking UX everywhere (OOBE, Modern Settings, Charm). Improved interaction and status in the Network Charms flyout (VAN = View All Networks). Made it easier for users to get connected to the right network regardless of location. Easier to do Connection sharing. Easier to fix Connection issues. Easier to access Airplane Mode. Provided intuitive UX so users can manage data consumption on metered network plans. Provided intuitive UX for Enterprise Network scenarios (VPN, Proxy, DirectAccess). Relocated advanced settings from the Desktop Control Panel into PC Settings.

Windows 8 Network Connection Experience (before)

In Windows 8, user feedback for the Network Connection UI described it as a “circuit board for electricity flow”. Each Network connection name along with network status were displayed on one line. This led to frequent truncation issues for network names and a very condensed list layout.

Windows 8.1 view Network Connection Experience (after)

For Windows 8.1, I wanted to improve the UI to make it easier for users to connect for the first time or easily switch between networks. I also wanted to improve the overall Touch experience and improve the layout so it could be easily scanned and consumed. Partnership consistency with the Window 8.1 Phone network experience was also an important consideration.

I utilized a two line list view layout with the network name on the first line and the network status on the second line. This greatly reduce network name truncation issues that Win 8 users had to deal with and made it easier for users to select the network they wanted. As is the nature of designing for the Windows Core Shell, the Network Connection UI had to be designed so it could also be used in the Windows 8.1 setup (OOBE) Get Connected experience. I also included the toggle switches (Airplane mode, Wi-Fi, Mobile Broadband) in this surface to make sure the user always had “under the thumb” access to all of their primary connection elements.

Windows Out of Box Experience (OOBE)

Windows 8 – Network Out Of Box Experience (before)

The Network OOBE experience in Windows 8 was fraught with challenges for the end-user. The connection architecture frequently left the user in a bail out mindset. Because of connection issues at this point in the OOBE, users would opt to connect later and end up at a static Windows 8 Start screen. The Start tiles had no activity and left an unwelcomed impression on the user and Microsoft lost out on that key First UX moment.

Windows 8.1 – Network Out Of Box Experience (after)

For Windows 8.1, we set out to refine the OOBE UX to encourage users to connect to a network to enhance their post-OOBE Windows experience and to arrive at an alive with activity Start screen. The feature team focused on redoing the network connection architecture and working with PM, Research and my other OOBE partners, (Personalize, Settings and MSA Sign-in flows), I redesigned the Connect (Get Online) layout to align with the network connection flow in the Charms experience. I also removed unnecessary confirmation UI. User study feedback confirmed that the new experience was fast and fluid.

Network Based Advanced Settings in Windows 8.1 PC Settings

Although the Win 8.1 product cycle had already begun, we added another P1 goal centered around relocating advanced settings for a number of features. These advanced settings lived in the legacy Desktop Control Panel and the challenge was to design the best way to relocate the most important settings into Modern PC Settings to minimize the amount of transitions the user has to experience going from Modern to desktop and back. 

Since I was a designer on the PC Settings experience for Windows 8 and in Windows, few features have more advanced settings then the Network feature, I partnered with the new PC Settings designer for 8.1 to create the template for processing large amounts of advanced settings in a simple and seamless way. This work also established the best practices for other PC Settings feature owners who would need guidance in settings relocation to PC Settings.

Based on the scoping of this work, it was necessary to redesign PC Settings for 8.1 and change PC Settings from 1 level to a 3 level design.

Windows 8 – PC Settings

In Windows 8, all settings are on one level.  

Windows 8.1 – PC Settings Redesign

The first of three levels.

Windows 8.1 – PC Settings Network Hub 

I designed the new PC Settings Network Hub for managing network connections. This is the second level of Win 8.1 PC Settings redesign. 

Windows 8.1 – PC Settings – Network Settings

Third level view if you selected the “Managed known networks” link in the Network Hub. This surface provides a way for users to see all of their active wireless networks and to “forget” the networks you no longer want. Before this feature addition, the only way to see these networks in Windows was to use the Command Prompt or third party applications.  

Windows 8.1 – PC Settings – Network Settings

Third level view shows advanced settings for a selected wireless network.

Windows 8.1 – PC Settings – Network Settings Relocation

 Image shows the number of Windows 7 legacy settings dialogs that users need to use to access the same network settings now in the surface below. 

 All legacy settings are now in one surface in PC Settings. 

Networking Process – Brainstorm (click through)

Brainstorm warm-up exercise

Networking brainstorm session creative warm-up. Good Idea – Bad Idea is fun to use and is sure to get people laughing. Exercises like this one allows participants to get into a loose and engaging mindset.