The Silicon Store
Mobile web experience for an ecommerce site that sells laptops
Users are often confused when buying online. Is the website trustworthy? Is the product good enough? All these questions pop up in a user’s mind, especially when they are buying something as costly as a laptop.
Scenario
The Silicon Store is a company that sells laptops on their mobile-web experience. They need to enhance their browsing and checkout experience to greatly improve their product’s usability. As per the product manager, below is the current scenario of website visitors.
Business Goal
Improve the conversion rate from browse to completion of checkout on their mobile-web experience.
About Users & Audiences
-
24 - 38 years old
-
User base is equally distributed between men & women
-
Middle class & High class
-
They are very concerned about what features they are buying as they are spending a lot on the laptop.
My role
For this project, I worked as:
-
User Researcher
-
UX Designer
-
UX Writer
-
UI Designer
My process
Before getting into the details of my particular problem statement, I started with looking into the various industry leaders, to understand how they are providing the solutions to their users.
For this project, I followed an end-to-end design thinking approach.
Empathize
Empathizing is one of the most important parts in my process, because it helped me understand the pain points and delights of my users. I did competitor’s usability testing to understand the same.
Competitors’ Usability testing
As part of my user research, I did competitors’ usability testing for 3 websites, amazon.in, reliancedigital.in and croma.com.
This helped me in understanding the way the users compare features when doing online shopping. Also, I found out about what they like or don’t like, and why.
Next, I arranged all my findings from user interviews in an affinity diagram.
Insights from the competitor’s usability testing
-
Every user selects a price range in filters before viewing products.
-
All the users compare products, by remembering the features of the products they see.
-
80% of users do not prefer signing up on a new website.
-
Users select a product to view based on the specifications in the name.
-
Users often compare ratings of products before they buy them.
-
20% users also saw the Q & A action at amazon.
-
40% users also preferred renowned brand/model names.
-
Every user saves the product they like in the wish list or cart.
-
40% of users didn’t pay attention to the compare feature on the croma website, but found it useful when using it.
-
60% of users didn’t see the ‘compare with similar products’ table at amazon.
-
40% of users also felt confused about new technical terms.
-
20% of users prefer signing up so that she can later find the products she adds to cart or wishlist.
-
20% of users feel insecure about guest checkout, saying “I had such an experience from one website, I couldn’t track my package after placing an order.”
Define
Next, based on my findings, I came up with a User Journey map, showing what users are currently doing, when browsing and buying laptops. This helped me in understanding their pain points, and finding the design opportunities.
Understanding Business and User goals
After creating the user journey, I got a clear idea of the various Business and User goals. This helped me in creating and prioritizing my features list.
Ideate
Next, I started with ideating for the various features that my product will have. I majorly had 3 goals in mind:
-
To help users easily compare products as per features they are concerned about.
-
To provide users with an easy, smooth checkout as a guest.
-
To give users a sense of trust when using the website.
A few of my sketches
User flows
.jpg)
User flow for searching
.jpg)
User flow for comparison
User flow for checkout
Prototype & Quick test
In this step, I started with creating low-fidelity wireframes for my website, and tested them with users to find out any major flaws.
Describe your image
Describe your image
Describe your image
I tested the low-fidelity prototype with 5 users to understand any major usability flaws. Through the testing, I wanted to find out:
-
Are the users easily able to search for laptops?
-
Are users easily able to compare the laptops?
-
Is the checkout process easy?
-
Do they prefer to check out as a guest?
-
Is the product information presented to them in an easily understandable way?
Insights from User Testing
Next, taking into account the issues that I found from my first round of testing, I created high-fidelity prototypes. Since my testing showed that the comparison page is difficult for users to understand, I created 2 types of comparison pages and did A/B testing.
The 2 types of compare list.
Other screens
I tested the low-fidelity prototype with 5 users to understand any major usability flaws. Through the testing, I wanted to find out:
-
Are the users easily able to search for laptops?
-
Are users easily able to compare the laptops?
-
Is the checkout process easy?
-
Do they prefer to check out as a guest?
-
Is the product information presented to them in an easily understandable way?
Insights from User Testing
Other insights
-
50% of users didn’t see the payment method being selected on the payment method page.
-
75% of users didn’t realise that the item had been added in the cart. No visual cue/animation when item is added.
Final Mockups
My testing showed that the learning curve for the like feature is much more than it’s utility. Also, users prefer to have a normal, vertical table when comparing things. So, I decided to include the usual tabular format for comparison of products.
Learning outcomes
Working on this project helped me understand:
-
The various UX Design methodologies.
-
Got a glimpse of how to work under constraints and in a real situation.
-
Quick validation of new concepts by user testing.
-
Understanding not only users goals, but also business goals and aligning them to create better products.