Microsoft case study | Joel Wisneski

Summary

The cart and checkout were the highest-risk area to experiment on.

Microsoft's checkout serves customers in dozens of markets, each with different currencies, regulations, and product configurations. When I joined, the checkout team had screen templates that were wildly out of date. These screens didn't cover international scenarios, show real product information or display basic error states. The core design system was well organized but focused on marketing pages, not the transactional experience.

At the same time, design leadership was in constant flux. I worked under six different design leads in sixteen months. There was no established process to negotiate timelines for discovery, exploration, or usability testing. All of that needed to happen within pre-defined sprint schedules. Breaking a marketing page is frustrating. Breaking the payment flow leads to a direct loss in sales.

An international shopping experience has dozens of use cases.

The Shopping Cart structure.

The Microsoft.com Shopping Cart looks like any other shopping cart. There's a list of items in your cart, an order summary, some recommendations and any items that you've saved for later.

What makes microsoft special is a wide variety in a narrow product set. There are bundle and configuration options. Some products are only available when purchasing a laptop. Some products can be configured more than a t-shirt size. Some products are digital only. Some products are only available in particular markets. Some products are a subscription with an opt-in.

The Checkout structure.

The checkout differs drastically from the rest of the site. The page is made up of forms and customer information. It's far less visually rich than the rest of the site.

We had a core design system but no source of truth

Like most companies, we had a pretty expansive design system. It was well organized but focused more on the marketing side of the site.

The checkout team had a file with screen templates but these were wildly out of date. These templates were also pretty basic. They didn't include the majority of scenarios for international customers, real product information or even basic error states.

Example of the Microsoft checkout components before the design system was built

I built a layer between the core design system and our screens

Use cases for every component

These components didn't exist in a vacuum. They were part of the source of truth. I knew what the system needed to display and I build in variants to show and document those use cases for future projects.

Building use cases into the design system helped us tell the story of different shopping experiences for different customers

Real products and prices

No grey boxes, no pixelated out of date photos. These were high-quality, up to date images and real product prices that helped us explain the scenario. I created typical carts so we could talk about one of personas or see quickly show how products look.

International currency

Microsoft sells products all over the world. The United States, Austrailia, Canada, Europe, Japan, New Zealand and South Korea all have their own currency. More importantly, they have their own regulations for software and hardware purchases. Something as simple as showing the right currency can help tell the story about how that customer is shopping.

Making the design system responsive helped us tell the story of different shopping experiences on different devices

Responsive components

Screen sizes are all over the place. Foldable phones are becoming more common and that means even more combinations of width and height. Using features like Autolayout, Min-Max, Fill and Hug meant we could stress test components and create a better representation of the live site.

Copywriting and logic built in

We're in a unique position that design systems don't account for. Every form in our Checkout has the same "Save" copy. We have instances of product names, sections or legal text that might be repeated on the same page or for different products. Building copywriting into the system meant we could make changes to legal text, button copy or headlines that cascade across the use cases and update immediately.

Building copywriting and logic into the design system helped us tell the story of different shopping experiences for different customers and made it easier to update legal text across the system

We could test faster and push the boundaries

When you understand a system this well you can move fast and take big swings.

I pitched a version of the shopping cart and checkout that's powered by AI. This wasn't just a chatbot, it was a leveraging new technology to rethink an everyday experience from the ground up.

This was a lifestyle shopping cart made for high-value products.

And an AI powered checkout without forms.

Results and next steps

14 usability tests and a new experimentation cadence

The design system let us move from concept to testable prototype in days instead of weeks. When the company pushed teams toward shorter hackathon-style experiments, we were ready. The system gave us the building blocks to spin up realistic prototypes for usability testing and A/B experiments without starting from scratch each time.

Simplification alone doesn't drive conversion

Our Cognitive Load experiment reorganized the cart's information architecture to reduce clutter and tested two treatments. Neither lifted checkout starts or orders. But we found something more interesting: "Keep Shopping" clicks increased by 40% in both treatments. The cleaner layout made it easier to continue browsing but didn't give customers a stronger reason to buy.

That finding shifted our strategy. On a decisive page like cart, structural clarity without added motivation isn't enough. We started exploring personalization, tailoring messaging by product category, emphasizing financing for high-AOV Surface purchases, and using urgency cues for lower-priced items.

Pitching discovery work for bigger swings

Building this system let me dive deep into the structure of an international checkout experience. I used that knowledge to frame new initiatives like the AI checkout vision, personalization by product category, and a proposed "Usable, Useful, Exciting" roadmap framework that reframes success metrics from direct conversion optimization to customer satisfaction and engagement.

Building a domain-specific design system for faster experimentation