Microsoft Azure is a cloud platform consisting of over 200 products and services that allow companies and organizations to build, configure, and run cloud solutions to operate and scale their business goals.

From June to August 2022, I served as the product designer on Azure’s Commerce and Ecosystems team, which manages all payments and billing experiences.

Microsoft Azure

Role

Product Designer

Timeline

3 month duration from June to August 2022

Team

1 user researcher and 1 product manager

Problem Scope

Users are unsatisfied with the current experience of managing payment methods.

Currently, the user experience of managing payments on Microsoft Azure has been negatively impacting the overall user-satisfaction score of the platform as a whole. I was tasked with analyzing research to identify main user pain points with the current experience, and providing design solutions to alleviate those pain points.

final experience


View/manage payments of all billing profiles.

Update/delete payments with ease.

research


I began the design process by working closely with the user researchers on the project to gather relevant user research. I analyzed both quantitative research that assessed which components of the current workflow receive the most amount of support tickets, as well as qualitative research in the form of customer comments.

Methodology

Telemetry Research

Analyzed quantitiative research to identify workflow issues.

User Feedback

Examined over 2000 customer feedback support tickets.

Affinity Mapping

Synthesized research findings into main trends and themes.

Research Insight 1

Users prefer when all payments information is aggregated.

An account can possess several profiles, each with distinct payment methods for different product subscriptions. Also, within each profile, payment methods information and payment history information is not located together.

This means that to manage all payments of an account, one would need to click into each profile, and then into each profile’s respective payment methods and payment history tabs. This makes managing all payments very tedious and inefficient.

Accounts with a single profile have, on average, significantly higher customer satisfaction scores than accounts with several profiles.

Users have trouble updating and managing payments.

A payment method cannot be deleted if it is linked to an active subscription. Currently, when users try to delete an attached payment method and cannot, there is a lack of clarity over why they cannot complete the action.

Moreover, users are unable to view which subscriptions are attached to the payment method, and must navigate to the subscriptions page in order to switch the payment methods of the subscriptions in order to delete the payment method. These factors make deleting a payment method an overly complicated and confusing task.

Research Insight 2

synthesis


Design Goal

HMW aggregate payments and create a more intuitive process to manage payments?

Upon synthesizing user research and identifying key user pain points, I constructed a how-might-we statement to help identify my main design goal in restructuring Azure’s payments center.

iteration


Aggregating Payments

Initial Design

My first design at aggregating all payments information together was a payments landing page that provides a card for each billing profile. The card provides some overview information regarding each profile, such as the default payment method and number of payments made in the last 30 days.

Clicking into each card navigates to a payments page for the profile, which aggregates payment methods and payment history information for that blade.

Final Design

The final payments aggregation design addresses the user feedback by combining payments information about every single billing profile into a single interface. Users can toggle between 2 tabs, Payment Methods and Payment History, to view and manage payments. Information is delineated by billing profile, and can be filtered by specific metrics.

Managing Payments

Initial Design

My initial design of the managing payments experience is a card that opens when users clicks into “Edit” of a payment. The card displays general information about the payment method and allows the users to edit or delete the payment. It also displays information about the attached subscriptions, so that users know which subscriptions to manage in order to be able to delete this payment method. Clicking into “Manage” navigates the user to the Subscriptions page.

Final Design

My initial design of the managing payments experience is a card that opens when users clicks into “Edit” of a payment. The card displays general information about the payment method and allows the users to edit or delete the payment. It also displays information about the attached subscriptions, so that users know which subscriptions to manage in order to be able to delete this payment method. Clicking into “Manage” navigates the user to the Subscriptions page.