windows_cp

USER INTERFACE DESIGN

Modernizing the Windows Company Portal App

Goals. To augment the visual design and establish coherency with modern Microsoft products by aligning to Fluent Design Language. To ultimately enable self-service troubleshooting through common issues like enrolling a device or downloading an App and improve the App’s usability for keyboard only users and those using voice UI.

My Role. I was responsible for the ideation and execution of the visual interface. Throughout the process I worked alongside a user experience researcher to user test various design iterations and partnered cross-company with the core Fluent Design team to leverage existing patterns. It was of utmost importance to ensure our design solutions aligned with the Business Values and Design Goals. 

workersbadges

Target User. Based on my research, I established the Target User to be a highly mobile information worker using multiple devices to accomplish their daily work tasks. An important key insight was that this Target User would be likely to use multiple forms of the Company Portal from iOS, to Android, to Windows, which strongly suggested these experiences be cohesive for the best user experience.

Pain Points
With the help of UX Researchers and the Engineering Team, I identified the primary challenges to be low rated visual appeal, self-service troubleshooting, accessibility issues with voice UI and usability of keyboard only users.

Design Goals

The identified pain points formed the foundation of the Design Goals to augment the visual design, gain coherency with modern Microsoft products by aligning to Microsoft Fluent Design Language, enable self-service troubleshooting through common issues like enrolling a device or downloading an App, and improve the App’s usability for Keyboard only users and those using voice UI. These goals go beyond solving user pain points, they also have business value.


coherence1


The Value of Coherence. The Value of Coherence. The value of coherence is in the user experience. Coherent brands feel familiar and intuitive. Because of this familiarity, users feel empowered even when using products for the first time. This cohesiveness can add strength and power to the brand.

inclusive_icons

The Value of Accessibility. The Value of Accessibility. There is proven business value in accessibility. Our mission statement is to empower every person to be productive, and the best design consciously attempts to include everyone.

self_service

The Value of Self-Service. The Value of Self-Service. Customer service representatives are the most expensive way of providing user help. Giving users the tools to achieve more on their own and bypass the help desk equates to an impressive cost avoidance strategy.

Microsoft Design Ecosystem

With the Goals in mind, it was essential to look at the ecosystems where the App was living.

microsoft_ecosystem2

I met with members of the Fluent team to better understand the core principles and patterns of the Microsoft Design ecosystem. I looked at ecosystems fluently aligned to Microsoft products such as Store and Outlook App, as well as the Company Portal ecosystem, both the iOs and Android versions, as well as the competitor Airwatch. Combining my research on the user and these ecosystems, I uncovered numerous opportunities to address in a short 3-month timeframe.

New Mockup 2

Setting Priorities. I worked with the engineering team in Cambridge MA to set priorities, working from my identified issues as well as their backlog.

current_design_

Current Design. The plan to address the concerns from a visual design and an accessibility standpoint Included: develop a new standard for acrylic use, improve the visual design of the home panel content, remove the Apps categories from the left navigation to solve voice ui issues discovered with Research and explore the header UI to align it with Fluent patterns.

Ideation

A voyage of discovery for potential solutions.

Screen Shot 2019-01-02 at 12.16.01 PM

Design Concepts

A presentation to the Engineering Team and my design cohort included three concepts for different navigations. In each of them I chose to move devices and the help desk to their own pages with navigation items to align with Android and iOS Company Portal Apps. I brought the app categories out into widgets on the home page to remove the voice UI issues and to align with patterns in the Microsoft store.

Design Concepts

Concept 1

First solution, precedent from Fluent Design patterns.
Pros: small change to UI, easy to implement. Company brand is prominent. Navigation items align with Android & iOS Company Portal Apps. Cons: depending on the logo, it won’t look as great, but can suggest requirements for size, orientation, color, and transparency.

UCP


Concept 2

Pros: universal search is prominent on the page, drawing the user attention. The brand logo is visible also in collapsed state. Cons: the brand element is not very prominent with the use of a web pattern that may be difficult to implement.

design-1

Concept 3

Pros: this Design aligns with Microsoft store patterns. The top navigation is great for dynamic rich content and 3-5 nav items. The brand element is prominent. Cons: it requires a big change that might be too costly to implement. Some navigation items are hidden in the overflow menu.

Screen Shot 2019-01-02 at 4.37.20 PM

The Chosen One

Following a presentation to the Design and Product team, we decided to move forward with Concept 1 because it met the coherence requirements, and best of all it was easy to implement. We also tested it, did a design evaluation with 4 information workers which provided validation that new challenges were not being introduced with this redesign.

UCP
UCP – context menu – with icons
UCP – search

Different Breakpoints and Use of Acrylic Pattern

I used acrylic only over the content pane which aligns with Fluent patterns.

UCP Collapsed nav
UCP acrylic nav
UCP collapsed small
collapsed small acrylic

App Details Page

App details page

Dark Theme

UCP – dark theme

Testing

Successful Skype design evaluations were conducted with 4 IWs. The evaluations confirmed that the recommended design changes would not introduce new challenges to users.

Screen Shot 2019-01-02 at 4.03.49 PM
  • 4/4 Participants recognized their place in the App with the left navigation indicator, despite the page removal of the header.
  • 4/4 Participants successfully found the devices using the left navigation, despite them being removed from the homepage content.
  • 4/4 Participants found the new placement of the notifications appropriate and easy to find.
  • 4/4 Participants recognized the homepage widgets as App categories.