Account.Microsoft.Com case study

( TIMELINE )

October 2021 -
March 2022

( TEAM )

Out of 100+ UMSI students, my 3 teammates and I were picked for Microsoft's Capstone project. We collaborated closely with Microsoft product and engineering stakeholders.

( STORY )

I worked with the Account.Microsoft.Com product team to optimize how users discover benefits and engage with their accounts. We successfully designed a data-driven experience that rethinks how we sell subscriptions to users and streamlines the process for finding benefits.
‍
My role as UX Designer focused on design strategy and high-fidelity prototyping. This case study emphasizes the parts of the project I led.

BAckground

Over 1.2 billion users have a Microsoft account.

The all-powerful product connecting users to their accounts is Account.Microsoft.Com (AMC). All types of users, from new accounts with no information to power users with multiple subscriptions, visit AMC.

[fig 1] Existing Account.Microsoft.Com capabilities

THE PROBLEM

Many Microsoft users struggle to fully discover benefits and do not always feel enticed to upgrade.

[fig 2] Existing M365 upsell card on AMC home page

THE CHALLENGE

Promote account benefits and subscriptions in a unique, compelling way.

THE SOLUTION

A data-driven, personalized Account home page

By incrementally reimagining the AMC home page, we enhanced users' understanding of their account while still promoting ways to engage further.

[fig 3] Account home page with new M365 card at the top

This new design uses existing account data to nudge users towards a plan that we think is best for them.

[fig 4] M365 Before and After

THE SOLUTION (Part two)

Streamlined way to find benefits

We designed a new benefits page that was (you guessed it) data-driven to help users understand their account specifics.

[fig 5] Navigating to new benefits page

[fig 6] Benefit discovery into subscription opportunity

Interactive Benefit Cards

By pulling existing data to show how users are currently using features, we also can indicate that there’s an opportunity to engage further. Tasteful upsells!

[fig 7] Benefit card interaction

MEASURING Success

Our designs resulted in 98.4% increase in account understanding, 100% task completion rate, and improved user sentiment.

Although user research validated our solution, here are the metrics I would have tracked long term in production:

↑ INcrease
M365 Personal & Family subscriptions

↑ INcrease
Benefits page engagement (Click-Through Rate)

━ DO NO HARM
Subscription plan downgrades or cancellations

Our work was spotlighted out of 60+ projects.

[fig 8] My 15 minutes of fame in the spotlight 🔗

PROJECT Kickoff

Our first question was: why are users unaware of benefits and subscriptions?

PRELIMINARY RESEARCH

What do competitors do?

Observing Google and Apple felt like a no-brainer but I also suggested a third, indirect competitor (Adobe) to assess how other companies manage freemium to premium upsells.

[fig 9] Competitive analysis between Adobe, Apple, Google, and Microsoft

USABILITY TESTING

User research revealed we were partially wrong.

Digging deeper, we chatted with 8 existing Microsoft users, ranging from cold to engaged. We already had behavioral data that showed us users do not discover or engage with benefits, so we chose 45-minute interviews in order to gain rich, qualitative answers.

Tip: Use left and right arrows to view research insights.

[fig 10] Main research findings and evidence.

Managing Requirements

I influenced our Product/UX teams to use design principles to stay rooted in our business AND user goals.

🤩 Playful yet informative

Make discovery delightful, but don’t take away critical information.

🔮 Show reality, look forward

Users should be able to say “I know what I currently have, and I know ways to make it even better.

Design brainstorm

How might we: promote benefits in an enticing way (that doesn’t feel like an advertisement)

Our team got our coffee, reserved a room, and got to thinking. Keeping in mind our user pain points, we brainstormed how we can achieve our product goals.

After getting feedback from our Product Manager on these initial ideas, he suggested that a benefits page and updating the subscription card would have the most impact. We prioritized these.

[fig 11] HMW brainstorm exercise and top 5 ideas

Information Hierarchy Decision

First, we rearranged existing content based on research findings.

1. Prioritize safety features that users value
2. Condense most cards on default, drawing attention to M365 & Xbox

[fig 12] New account page hierarchy

Granular design decisions

Zoning in on the M365 card.

[fig 13] Existing M365 card and problems

A lightbulb went off for me.

Apple doesn’t upsell iCloud storage at any point in the experience. Instead, they do it when they know you need it most.

I shared my new hypothesis with the team: if we show users how they're using their account, then we can nudge them to upgrade when it's best for them.

Working with product and engineering, we conceptualized a data-driven upsell.

From research, we knew that storage was crucial. Our final iteration landed on a progress bar showing how close users are to using up their OneDrive storage.

[fig 14] Breakdown of final M365 card

Granular design decisions

New Benefits Page

Moving into our second chunk of work, I helped our visual designer wireframe two directions for a benefits page.

[fig 14] Two wireframe options for new benefits page

Design Decision: The accordion functionality of Option A does not add to the user’s experience with discovering benefits. The hierarchy also makes it more difficult to scan.

We decided to go with Option B (static cards). This way, we can rely more on visuals to help users passively scan features.

An intuitive entry point

From our research, a majority of users looked for benefits in this side navigation. Our team suggested an A/B experiment with adding a Benefits page entry point here to learn how often users engage with this page.

[fig 15] New side navigation with Benefit page entry point

Granular design decisions

Looking at each card, how can we be intentional?

Keeping in mind our data-driven approach, I suggested to our visual designer that we iterate further on the content and make it personalized for each user type. By pulling in different data points, users get an understanding of how they're making use of the benefit.

Collaborating with our product manager and engineering, we identified a list of critical data pieces that currently exist with each feature.

[fig 16] Iterations of benefit card

Granular design decisions

Now how can we encourage further engagement?

I felt this existing design showed reality, but it did not look forward to what was possible. For features that are enhanced with a M365 subscription, I influenced our team to add a premium indicator.

This way, users could delightfully discover how to enhance their account without it feeling like an advertisement. This also roots us back in our business goal of encouraging more users to convert to M365.

[fig 17] Final benefit card iteration

[fig 18] Final benefits page

VALIDATING DESIGN DECISIONS

This checks the boxes on our end, but how do users feel about this?

We conducted another set of usability tests. This time, focusing on how discoverable the new benefits page is and if the new account page felt like advertise-y.

↑ INcrease
+98.4 % increase in account understanding

↑ INcrease
100% task completion rate (finding benefits)

↑ INcrease
Positive demeanor and tone around M365 upsells

FINAL HANDOFF

At the end, our work was positively received by Microsoft leaders, and we handed off our design for future development.

What a journey!

Lessons LEARNED

3 things I would do differently next time

This was an amazing experience overall, and I'm so fortunate for the Microsoft folks for all their help along the way. If we had to redo this project, here's what I'd try differently.

Think abstractly about what makes an advertisement feel like an advertisement

Are there common design patterns that users react negatively to? What are examples of successful advertisements in product design?

Focus more on UX writing

Our team lacked a dedicated UX Writer. I would have loved to spend more time thinking about the copy, and perhaps doing content research testing specifically.

Explore and define M365 customer journeys

Looking back, adding the benefits page entry point to the side navigation felt too obvious. I would love to breakdown more AMC user journeys and see where are other ideal instances to promote benefits.