home

USER EXPERIENCE AND USER INTERFACE DESIGN

Modernizing the Windows Company Portal App

Challenges. Microsoft Intune Company Portal provides mobile device management, mobile application management, and PC management capabilities from the cloud. Using Intune, organizations can provide their employees with access to corporate applications and resources from anywhere on almost any device, while helping to keep corporate information secure.

The Intune Company Portal needed to be coherent with modern Microsoft products by aligning to Fluent Design Language. The search experience for apps failed to meet users expectations in terms of speed and efficiency and it was lacking the autosuggest mechanism. There was also a need to improve the App’s accessibility to allow users with different abilities to use the portal.

Why solving this problem matters? By modernizing the design and improving the search and accessibility, users will be able to seamlessly use the 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. Improve overall customer satisfaction. 

My Role. I was responsible for the ideation and execution of the user experience and 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 and Bing UX teams 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 Users 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 experience.

Pain Points

I reviewed the relevant data points with the help of UX Researchers and the Engineering Team and I discovered the main challenges to be poor visual appeal, lack of efficient self-service troubleshooting and a non standard search experience that didn't meet users expectations in terms of speed and efficiency. In this case search was also missing the autosuggest mechanism which caused low ratings in research studies. Additionally through my own heuristic analysis I discovered the app had accessibility issues with voice commands and usability issues for 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 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. 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. 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 other Microsoft Fluent apps such as Store and Outlook, as well as the Company Portal ecosystem, both the iOs and Android versions. Combining my research on the user and these ecosystems, I uncovered numerous opportunities to address in a short 2 month timeframe.

current_company_portal

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.

The Goal of Coherence: Ideation

A voyage of discovery for potential solutions. Things that needed to be done: explore the header, remove app categories from the left navigation to solve voice issues, improve the visual design of the home panel content, new standard for acrylic use.

ideation

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


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 for devs 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 to the user experience were not being introduced with this redesign.

UCP

Positive Results with User 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.

test_results
  • 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.

Access keys

Access keys, make the experience easier for keyboard only use. This can be helpful to users who make use of a screen reader to read the content out loud. Keyboard shortcuts can be useful to all computer users because they often allow interactions that are faster than allowed by mouse click. Among people with disabilities, people who are blind or who have motor disabilities also make frequent use of keyboard shortcuts.

UCP – access keys

Left Navigation and Use of Acrylic Pattern

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

UCP Collapsed nav
UCP acrylic nav

Dark Theme Initial Design

UCP – dark theme-2

The Goal of Self Service: Universal Search
Me + Bing UX: key customer insights that influenced the final experience


I met with members of the Bing Search Research Team to leverage their insights on search behaviors. I learn that:

1. Autocomplete is key and can be a powerful tool to make interaction with search fast and efficient.
2. Search is not a user goal.
3. Users know what they want and we need to minimize friction to get to results.
4. Easiest thing to do for users to get to their results is to type more words in the search box.
6. Query relevance built over time with machine learning is key to a good experience.

7. Spell correction is also key to a successful search user experience.
8. Structured suggestions help users navigate through complexity.
9. Even when users are familiar with the search feature, search requires them to recall information from their memory. 
10. Present less than 10 items without a scroll bar so the information doesn’t become overwhelming.

flowchart_search

The image above describes the patterns in user behavior of how users interact with search.

What do user need for their search problem to be solved?

1. Easily find an App to download.
2. Find support information so they do not have to call the support desk. This is a particularly important scenario where they have compliance issues surfacing through the Company Portal, driving up costs.
3. Find Intune enrolled devices and act on them. E.g. lock and remove a device from being enrolled when it is lost or stolen. This helps protect Company data.
4. Get relevant search results in a short amount of time.

"It takes so long for Search results to get back...frustrating!"

Autosuggest Research: Queries vs Nodes and Highlighting vs Lowlighting


With the insights from the Bing Research Team in mind, I went ahead and further investigated how other products like Amazon solve search.

Screen Shot 2019-10-26 at 11.28.38 AM
Screen Shot 2019-10-26 at 11.27.08 AM

Amazon search autocompletes for you but the results aren’t actually products (which would be the end result of what users want to find). These are simply more suggestions of what to search.  Amazon results recommend queries. I also noticed that Amazon bolds everything else except the search query, I call this lowlighting. 

Gmail bolds your search query in the autocomplete and I think its method is easier to understand at first glance. Highlighting the query (a) lets users glance directly at the portion that matches their search, helping them determine if this result is relevant, and (b) answers the question “wait, why I am seeing this?". I call this highlighting.

Universal Search Designs

Pros: easy to scan search results with the highlighted query and the divisions of results in the search dropdown into sections: apps, devices, settings and support articles. Autosuggest mechanism helps users find related search results. Cons: if the query is long the UI will look less appealing because of the usage of a bold font.

home
UCP – search

As the search box is selected, last 3 history search items are displayed in the autosuggest box.

UCP – suggested- highlited

Autosuggest results are grouped into “Apps”, “Devices”, “Settings”, and “Support articles".

UCP – suggested – all results

 Search Results Page

Hitting enter or the search icon will bring the user to a results display page. Dividing search results into a logical group based on information architecture makes the browsing experience more comfortable and consistent with the search box results.

UCP – suggested – all results page

No search results

If search query has no results, then “No results found” will be displayed in the autosuggest box.

UCP – no results

Communicating Design

 Microsoft upholds high standards for the design work it produces both externally for customers and internally for team members to consume. Our culture is a culture of sharing design from the early phases and all throughout the design process. We shared design during weekly critiques and those help us to refine our product.

During the critiques I also invited the developers and PMs, to earn trust through accountability, diving deep into the details and inviting them to scrutinize the work. In this way I was able to gain meaningful feedback and to create a culture of trust. 

Giving view access to my Figma files to the product team early on was an effective way to gain their trust, build consensus from stakeholders and get approval from the leadership team.

What would I do next time?

Test early and test often to validade my direction before investing so much time in redesign.
I would also love to add motion design (styling gets lost in a static page).