1 Designer, 1 PM, 10 Engineers
September 2020 - Jan 2021
Desktop & mobile web
Account.microsoft.com (AMC) is account management experience for Microsoft customers. Order history is part of AMC. Customers come to order history to view order information or manage orders. It contains both physical and digital orders placed on Microsoft storefronts (e.g. Windows Store, Microsoft store, Xbox store).
Lead designer through end to end process: discovery, research, requirements, design, user testing, support through launch. As part of the project created and contributed to the AMC design system. Led the effort to identify future areas of investment and opportunities for order history.
Our aim was to at least maintain the status quo across all metrics. Post the release we observed an overall improvement in all task completion rates, page's reliability score and CSAT score.
Refreshed UI, improved IA, clear communication & actionable order history.
Removing hierarchy and maintaining context by bringing order details to L1.
Task simplification, better focus & leaner flow for order management.
Upselling Microsoft products during cold states.
The original Order History was on an Angular Code base that had to be moved to React. The task was to meet compliance date, as the angular code would soon be deprecated across the company. The initial scope was to design a new experience without any major redesign mapping the old.
We decided to use the compliance requirement as an opportunity to expand and provide value to our customer by refreshing the UI, future proofing the product by aligning to AMC & improving the experience.
We kickstarted the project by doing a product teardown of other e-commerce order history. The aim was to understand market patterns and any opportunity areas for the future. We studied products like Amazon, Myntra, Apple, Flipkart etc.
We reached out to the customer support team to understand key issues for which customers require support. We learned order management is the top driver for customer support calls.
We ran a comprehensive experience review of our current experience across the triad & design team.
👀 Viewing order information
Customers come to order history to track order status or know details about their order.
🤹🏽 Managing orders
Key order management task were: cancellation, return , request refund, change payment method, request tax invoice.
Over years other pages had been updated however the entire order history was still legacy. New experiences and scaling AMC to other surfaces was being introduced leaving Order history difficult to update and scale.
Most web experiences across Microsoft used a fluent web design library as building blocks. Meanwhile, order history was custom code and components. It had sharp corners, strong shadows & a distracting type ramp.
Difficulty in scanning & taking actions. Scattered & visually similar treatment of link & actions on order cards. Too many font weights & sizes. Difficult to differentiate between bundles and multiple orders
Opening a separate page for providing additional details around address & amount breakdown. All order management flows were long page by page flows.
🤝 Align order history to rest of the AMC
🫶 Order history inspires trust & confidence
Multiple directions were explored, reviewed with triad & design. These iterations didn't make it due to usability issues uncovered from testing, scalability issues, technical feasibility or accessibility.
👍🏾 Things that work
👎🏾 Things that need work
👍🏾 Things that work
👎🏾 Things that need work
👍🏾 Things that work
👎🏾 Things that need work
Status tracker was explored & tested in tandem with order card layouts to align it with the overall structure.
Right aligned
Progress on top
Left aligned text
Right aligned
Progress on bottom
Right aligned text
Centre aligned
Progress at bottom
Left aligned text
Centre aligned
Progress on top
Left aligned text
👍🏾 Things that work
👎🏾 Things that need work
👍🏾 Things that work
👎🏾 Things that need work
Revised status tracker that is easier to read. Completed & delivered states are highlighted using colour.
Drawers are closed by default, saving real estates and making scanning order history easier. Bundle drawer provides you a sneak peak into your order without a need to keep them expanded.
Customers can expand and view details right there on Order history. It ensures the context is maintained and customers can manage their order too. The drawer also leveraged an existing user behaviour across AMC & windows.
Improved tabbing order for more accessibility friendly post purchase experience.
Each management task had multiple flows. We didn’t do a major overhaul of flows. Just fine tuning, simplification and aligning them to rest of the AMC. We mapped key task flow to understand the experience holistically.
Multiple approaches were experimented across different tasks. Each task’s key flow was tested. For the purpose of the case study I will illustrate one of our explorations with order return flow.
👍🏾 Things that work
👎🏾 Things that need work
👍🏾 Things that work
👎🏾 Things that need work
Improved and cleaned up the language to avoid confusion. Moving the flows to modal to provide better focus, scalability and impression of speed. Aligned with AMC design patterns.
Modal experience provided better focus, scalability and impression of speed. Cleaned up IA for review dialog, making it easier to read.
Customers can switch, add or update payment methods. Adding payment iconography increased trust. The new flow completed the task in context without customers redirecting to new page and breaking the flow.
Invoice scenarios that were unique to countries like China or Brazil were designed with constant feedback from the local teams to ensure me were meeting standard guidelines.
