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.
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.
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.
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.
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.
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.
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.
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.
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. 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.
A voyage of discovery for potential solutions.
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.
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.
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.
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.
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.
Different Breakpoints and Use of Acrylic Pattern
I used acrylic only over the content pane which aligns with Fluent patterns.
App Details Page
Successful Skype design evaluations were conducted with 4 IWs. The evaluations confirmed that the recommended design changes would not introduce new challenges to users.