Role and Responsibilities
Design Owner - I was responsible for driving design vision and strategy, conducting user research, and creating intuitive designs that aligned with business and technical requirements.

Timeline
3 months (Q2 2021) 

Background

Azure is Microsoft's cloud computing platform and infrastructure, and the Azure Billing extension is a tool that helps customers understand and manage their Azure billing information, including their usage and cost breakdowns, their billing and payment history, and their billing and cost management settings. 

The Problem 

Despite being one of the most used extensions in Azure with nearly 1.2 MAU, the billing extension was consistently receiving low satisfaction ratings (NPS = 21.45) and negative feedback from our customers. Myself and my stakeholders were determined to understand the root cause of these issues and design a solution that would significantly improve the user experience and increase customer satisfaction.

Process

My process was divided into six key phases: discovery, defining, developing, testing/refining, delivery, and tracking. During the discovery phase, I held a kickoff meeting with stakeholders to discuss the project timeline, scope, business goals, and customer pain points. The defining phase included user research and the creation of a site map, HMW statement, and design principles to guide the design direction and focus. In the developing phase, I iterated on mockups and worked within project constraints. The testing and refining phase featured an A/B test to gather user feedback and make changes to the mockups. In the delivery phase, I handed off the design deliverables to the development team and scheduled regular design quality assurance reviews to make their implementation had a high bar of craft. I also made sure to regularly attend accessibility reviews to identify and fix any issues that made the designs inaccessible. Finally, the tracking phase involved me monitoring success metrics after the design was implemented to understand the impact of my design work and identify areas for improvement.

Below I go into more specifics about the methods and techniques I used in each phase of my process to redesign the Azure Billing extension and improve the customer experience. 

Phase 1: Discovery

We set a timeline to deliver designs by the end of the next quarter and defined the scope and deliverables for the project. To track progress, I established success metrics such as increasing the Net Promoter Score (NPS) from 20 to 40, increasing the Customer Satisfaction Score (CSAT) from 4.25 to 4.70, and improving the abandonment rate and percentage of clicks on the "Pay Now" button. I used these metrics to guide my design decisions and measure the impact of my solutions on the user experience.

Creating a Site Map

To better understand the information architecture of the Azure Billing extension, I created a site map to visualize the various pages and sections of the billing extension, and to identify the actions that users typically take when using the extension.

I found many pain points when viewing transactions, paying bills, viewing invoices, and analyzing costs. The current information architecture of the extension also did not support an intuitive and efficient workflow. This helped me identify specific design opportunities to improve the user experience, and informed the development of my design concepts and prototypes.

In addition, the site map also served as a valuable communication tool. I used it to share my design ideas with the rest of the team and stakeholders and to get feedback and input on the overall structure and organization of the extension.

Defining the problem/HMW

To guide my design process, I created a HMW (How Might We) statement to focus my efforts on a specific design goal. This statement served as a reference point as I brainstormed ideas, created prototypes, and tested designs, helping me stay aligned with the needs and goals of the project. The HMW statement helped me stay focused on solving the identified problem and delivering value to customers through my design work.

Simplify the complex was based on my findings that many users found the billing extension to be overwhelming and confusing, due to a large amount of information and options presented to them. To address this issue, I focused on simplifying the user interface and reducing the number of options and settings that users needed to navigate. 

Built for all was based on the need to create a design that was inclusive and accessible to users of all technical levels, from students to Azure specialists. I also incorporated accessibility guidelines and principles into my design so my prototypes were easy to use and understand.

Cost transparency came from the findings that many users struggled to understand and manage their costs when using the billing extension. To address this issue, I focused on making the cost information more transparent and easier to understand, and on providing users with more tools and resources to manage their spending.

Another constraint was that some of the data on the page loaded slowly, which could be frustrating for users when they first came to the extension. To address this issue, I had to think carefully about the way that data was organized and displayed and try to minimize the impact of the slow loading times on the user experience.

Due to budget constraints, I was unable to do traditional usability testing with external users. Instead, I relied on other forms of user feedback, such as interviews, surveys, and heuristic evaluations, as well as conducting internal reviews and testing sessions with the development team. In particular, I used A/B testing as my main form of user feedback, which allowed me to compare the performance of different design options and make informed decisions about which ones were most effective.

Finally, the timeline for delivering this work was a time constraint that I had to manage throughout the project. I had to balance the need for thorough research and design work with the need to deliver a final solution within a set timeframe. This required me to be efficient and focused in my work, and to prioritize tasks and features based on their impact on the user experience.

Overall, these constraints required me to be strategic and flexible in my design approach and to think creatively about how to create a successful user experience within the limitations of the project.

Phase 3: Develop

Creating Mockups 

Using my design principles as a guide, I created a series of mockups and prototypes to share my design concepts with stakeholders. I iterated on my prototypes based on feedback during design critiques and reviews.

My design solutions consisted of a card-based layout, new cards that show you when your next invoices are and how much your invoices cost over time, monthly charges, credits remaining, and an amount due breakdown.

Here's a side by side of the Azure Billing Overview next to my proposed design changes .

During the design process, I worked closely with Matt, our content designer, to review and improve the strings for alerts on the Billing overview. These alerts notified customers of different billing-related events, such as no payment needed, AutoPay completed, past due payments, and budgeting alerts. Our collaboration ensured that the strings were clear and easy for customers to understand and that the language used was consistent with the overall tone and style of the extension.

The results of the A/B test were mostly positive, but there was one metric that performed negatively. In particular, we saw a 50% decrease in clicks on the "Upgrade" banner for users who had a billing account that was eligible for an upgrade. This was unexpected, as we had not made any changes to the banner itself. However, these results helped me understand that we needed to find other ways to prompt users to upgrade. 

In response to this issue, I proposed a new design solution: a dedicated "Alerts" card on the Overview page, with the "Upgrade" alert pinned to the top of the card—a clear call to action for users to upgrade their accounts. I believed that this design would be beneficial because it would provide users with another opportunity to upgrade, and make it more clear and convenient for them to do so.

While the team was not able to implement this design in the first quarter due to time constraints, the Product Manager and engineering team committed to building this feature in the next quarter. This was a great example of how the results of the A/B test helped me to identify areas for improvement in the design and propose changes that would ultimately lead to a better user experience in the long term.  

In addition to providing clear documentation, I also made sure to schedule regular check-ins with the engineering team to ensure that the implementation of my designs met a high bar of craftsmanship. To facilitate ongoing communication and feedback, I also created a dedicated Teams chat for the engineering team to use as an asynchronous communication channel. I also made sure to attend all accessibility reviews to ensure that the extension was fully compliant with accessibility standards and that users with disabilities would be able to use the extension with ease.

Overall, my focus during the delivery phase was on ensuring that the engineering team had everything they needed to turn my designs into a high-quality, user-friendly extension for Azure customers.