Frame 7-2.jpg

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.

Artboard – 2.png
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.

Web 1920 – 7.png
Web 1920 – 9.png
Web 1920 – 8.png
Web 1920 – 10.png

For this project, I followed an end-to-end design thinking approach.

Artboard – 3.png
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.

User research - Frame 3.jpg

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.

User Journey Map.png

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.

Artboard – 5.png
Ideate

Next, I started with ideating for the various features that my product will have. I majorly had 3 goals in mind:

 

  1. To help users easily compare products as per features they are concerned about.

  2. To provide users with an easy, smooth checkout as a guest.

  3. To give users a sense of trust when using the website.

A few of my sketches

New Doc 2021-07-24 18.53.48_4.jpg
New Doc 2021-07-24 18.53.48_1.jpg

User flows

Frame 6 (1).jpg

User flow for searching

Frame 7 (3).jpg

User flow for comparison

Frame 8.jpg

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.

wireframe1-2
wireframe1-2

Describe your image

press to zoom
wireframe2-2
wireframe2-2

Describe your image

press to zoom
wireframe1-2
wireframe1-2

Describe your image

press to zoom
1/2

I tested the low-fidelity prototype with 5 users to understand any major usability flaws. Through the testing, I wanted to find out:

 

  1. Are the users easily able to search for laptops?

  2. Are users easily able to compare the laptops?

  3. Is the checkout process easy?

  4. Do they prefer to check out as a guest?

  5. Is the product information presented to them in an easily understandable way?

Insights from User Testing

Artboard – 6-2.png

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.

Frame 2-2.png

The 2 types of compare list.

Frame 1-2.png

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:

 

  1. Are the users easily able to search for laptops?

  2. Are users easily able to compare the laptops?

  3. Is the checkout process easy?

  4. Do they prefer to check out as a guest?

  5. Is the product information presented to them in an easily understandable way?

Insights from User Testing

Frame 3-2.png

Other insights

  1. 50% of users didn’t see the payment method being selected on the payment method page.

  2. 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.

Frame 9-2.png
Frame 10-2.png
Frame 11-2.png
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.