top of page

Microsoft Mobile Site Redesign

3 Weeks

Improving the "Compare Tool" to supplement the laptop purchasing experience for users.

Impact

Completed two high-fidelity prototypes to tackle the mobile design challenge for the COGS 187A course at UC San Diego.

My Role

UX Design

UI Design

Prototyping

Tools

Figma

Digital Sketching

Teammates

Azzaya Munkhbat

Mariam Bachar

Esther Liu

Untitled design (2).png
Microsoft_logo_(2012).svg.png

Introduction

As of 2022, an estimated 1.4 billion people and businesses use Microsoft products and services. Part of the Big Five, Microsoft competes as one of the largest technology companies in the United States, next to Alphabet, Amazon, Apple, and Meta. Microsoft offers a vast range of products and services for its customers, including Microsoft Windows, Office Suite, Xbox 360, and much more. 

Despite their world-renown offerings, their website still has much more room to grow including, but not limited to, information layout, visual affordances, and branding. Thus, we chose to redesign Microsoft’s mobile website to propose solutions that would better serve customers and polish their esteemed company image online.

Design Process

Background

While the scope of the project required us to redesign a mobile site specifically, we first explored Microsoft's desktop site. We noted the general overload of information and clunkiness of the product displays. Knowing there were lots of avenues for improvement, we were excited to work on redesigning or extending the Microsoft mobile site.

Design Problem

To establish a design problem, we first conducted user testing interviews to understand which features or aspects of the Microsoft site experience were lacking.

How might we improve the Microsoft mobile site experience for technology users so that the laptop-purchasing process can be more streamlined and adapted to user needs?

From our user interviews, we learned that only 1 of 4 interviewees used the "Compare" tool to decide between different laptops to purchase as a part of one of our interview tasks, perhaps due to a lack of discoverability. We wanted to explore why this helpful feature was not being used for its intended purpose.

Microsoft_logo_(2012).svg.png

Usability Testing Analysis

These were the top three usability errors we discovered after consolidating our user testing data:

 

4 out of our 4 users expressed discontentment relating to a lack of aesthetic and minimalist design. 

  • The presence of excessive content in terms of text and product options were overwhelming, and the blurry images and obnoxious pop-ups contributed to their overall dissatisfying site experience.

3 out of our 4 users faced issues relating to the flexibility and efficiency of use.

  • Users all noted a lack of features, like filtering options, to make finding their preferred laptop or device easier.

2 out of our 4 users did not receive adequate help and documentation.

  • There were no immediately discoverable tools available to clarify customers’ potential questions or narrow their product searches.

Annotated Workflows

12Tc4cAzk0klp_8IFkUiN67tN35duIo13aPMjeRLyMlwxgYUCFTkTAfAwLSh3EoXNO3stW-0cl3odPts4ZSum-RhTZ

This is an annotated UX workflow I created. There were two possible pathways users could go through from the home page to access the Compare Tool. In scenario 1, users navigated from 1 → 2 → 3A(i) → 3A(ii) → 3A(iii) → 3A (iv) → 4 . In scenario 2, users navigated from 1 → 2 → 3B(i) → 4.

tTAvs120O1jmHdMmA-GMC8Up_f0o_PFobzyLac3fLSjr5aQfddRtzXP-6IxlPZnhgwg2mqt9s-zBsygZyosrK6cQMo

An annotated view of the actual Compare page. 

Sketching Ideation Session

Each team member created a set of sketches to tackle the redesign and reorganization of the Compare Tool, while also accounting for the usability errors we uncovered from our user tests.

Some of my ideas for our final prototype included:

  • Horizontal accordion for Surfaces, categorized by model to maximize page space

  • Jumping filter links at the top of the page to quickly search various Surface models

  • Dropdown to quickly switch between compared devices

  • Highlighted differences on compare page to help users quickly identify specific differences 

6yaQ2bGaGIY9Cc-jQxy48vNFcMcYzNC_V9OSw71lJNkmt_il3To8L5cZPUl-_FLh22ykACloMYAbSoRZthjF3r4C5s

Final Design Solutions

Keeping in mind from our user interviews that 4 out of 4 of users struggled to locate the Compare Tool, and only 1 successfully located it, and 2 out of 4 users complained that it was hard to find the information they cared about, we decided to create two prototypes to redesign the Compare page experience, starting from the Explore All page. 

High Fidelity Prototype #1 - Redesigned Compare Tool

Current Issues:

  • Feature needs to be more discoverable 

  • Needs more intuitive category names and figures to break up comparison text

  • Image of product should be bigger

  • Once comparing 2 devices, should be able to change between comparing the 14 devices more easily (Ex: you currently have to click “Start Over” to compare 2 new devices)

Our Approach:

  • Make the Compare Tool more discoverable to users.

  • Find a middle-ground approach for information hierarchy (not too much, not too little) and grant users control over what information they want to hide and display.

Click here to view Figma prototype.

High Fidelity Prototype #2 - Personalized Quiz

Current Issues:

  • Compare Tool makes assumptions for what users think are important when selecting a laptop to purchase

  • Highlighted features may not always be accurate to what each individual user is looking for. (Ex: there are only filters for screen size, form factor, and battery life, none for storage)

Our Approach:

  • Provide users with a personalized filtering tool to make finding a preferred laptop easier

  • Make the process of finding and purchasing a device time efficient and transparent to users by narrowing down to relevant features

Click here to view Figma prototype.

Final Results:

  • 4 out of 4 users thought prototype 1 helped them learn more about different laptop models

  • 4 out of 4 users believe that prototype 1 makes it easier to understand what features are available for each laptop

  • 3 out of 4 users would use prototype 2 in the future

Takeaways

  • Learned to use user testing data to inform design decisions

  • Learned to continually ask "Why?" and "How might we...?" to continually probe and gain a deeper understanding of the design problem

  • In the future, be cautious about making assumptions early on in the design process. Validate prototype with more usability tests!

bottom of page