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
.png)
_svg.png){kind=logo}
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.
_svg.png){kind=logo}
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
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.
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
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!