As productivity continues to grow in the browser and work continues to grow in the cloud, keeping organizations' users, networks and data all in one place is top priority for Azure. The mission for the Azure Mobile App Team is to maintain the same desktop experience while in the app. This means that all capabilities and settings should carry over as well. Dark Theme has become standard in most Android apps as it is helpful for low vision users. We set out to make sure the Dark Theme experience was as streamlined and usable as Light Theme.

Role: UX/UI Designer, Visual Designer

Client: Microsoft | Azure

Timeline: 2 months

Taking Inventory

Understanding the landscape and developing a skeletal system for the core components that make up Dark Theme was the first step in being able to create a cohesive design pattern. I took some time to explore how Dark Theme was used in other apps. I gathered components from Material and Fluent to stay consistent with Microsoft Branding. Drawing from these two design systems helped lay a ground to build from. I also took note of Material’s design structure. They have explained how elements should interact with one another to create dimension and help with accessibility.

Accessibility 

The Azure Mobile App has a Grade B in accessibility and as a designer, it was my job to maintain that level of excellence. We adhere to the WSG guidelines which determined our contrast ratios, as well as text and icon sizes. Because the app was fully designed for Light Mode, this meant we were able to take more screens and covert to Dark Mode, while maintaining the same element sizes. Our main focus was then on color contrast.  

When designing for low vision or eye strained users, every element on the screen needed to be checked to make sure they hit accessibility ratios. The Material design structure came into play here as there could be three or four layers on a screen and we needed to address which layers were accessible and which were not. When looking at the pass/fail of accessibility you have to look at what elements need to contrast versus those that do not. The text and small icons should pass, while the card tiles do not need to because they are not essential to the message. 

Gathering Screens

We started by taking inventory of all the screens currently in Light Theme. Bringing them all together we could see what patterns we had throughout the app. If we know where list views or search bars live, we can later use the same component to ensure consistency. This process also showed us which screens would have more color contrast issues. For instance, the filter view (below) was problematic because the ‘checked’ box needed to meet contrast against the background. This took a lot of tweaking to get all the dark theme colors to make sense across the board.

Accessibility

Once we solved the bigger contrast issues, we could move on to creating components to design with. For the most part, it was a direct translation from one color to another, which allowed us to make some guidelines for our engineers. I worked with the designer for the iOS version and it was decided that we wanted to match these two platforms as much as possible. All of the text and icon colors stayed consistent and aligned with Fluent Dark Theme guidelines.

Task 1: Accessing a service health alert through the service on Home page

Task 2: Looking at Belmont Virtual Machine properties

Iteration 

Taking all the patterns, colors and information and turning them into design flows was a painstakingly detail oriented project. I collaborated extensively with PM's and engineers to ensure I continued to put our users and features at the forefront. The engineers would use our Figma mockups to translate the light mode to dark mode, and as questions came up, it was important to keep the dialogue open. If there was a screen that I was missing, I was quick to run it through the process, so they could continue their work seamlessly.

Fit & Finish  

Once all screens were reviewed, the team (PM’s, designers, & engineers) sat down for fit and finish. Previously, we could stand around the engineers' computer and help them make slight tweaks as we walked through the app. However, because this project landed while we are all working remotely, we opted for a virtual walkthrough instead. This meant that communication was key; notes were taken and then translated to tasks assigned out. This process worked out well and we were able to ship.