UI/UX Design Exercise

Choose a web page that you frequently visit and discuss what you like/dislike about it. How would you redesign the part that you dislike?

This is just a design exercise. I am not affiliated with the chosen brand in any way.

The Website

Shopee is one of Southeast Asia's top e-commerce platforms that provide a convenient and seamless way to buy and sell items online.

Users like me can choose from a wide range of products, from clothing and beauty items to technology and fitness equipment.


Redesigning Shopee's Desktop Product Page

to Enhance Buying Experience

This design exercise was challenging due to the time constraints (i.e. 3 days minus work hours), but it gave me a chance to learn a lot about web design.

Initially, I tried going directly to the drawing board but found it quite difficult to visualize. Hence, I decided to do my research first.

Since the main goal of this exercise is to redesign only one web page of a site, I followed a design process that would help me efficiently achieve it.

What is a product page?

According to HubSpot, a product page showcases inventory in a way that helps customers decide what they want to buy according to different specifications like price, features, reviews, and product comparison.

1. Discover

Heuristic Evaluation

Overall, what I like about the Shopee product page is that it's pretty straightforward in the sense that all the information needed is there (even if some are repetitive) and it's easy to add items to cart, which is good for me as a buyer but not good for my wallet.

The most useful part of the product page for me is the Reviews section since a lot of users provide actual photos and videos of the advertised product. Having references makes it a lot easier to decide whether to purchase an item or not.

That said, below are some parts of the product page that I think can be improved:

In order to evaluate Shopee's product page design from a novice visual designer perspective, I based my observations on research done by the Nielsen Norman Group, wherein they surmised that an ideal product page includes the following elements:

  • A descriptive product name

  • Recognizable product videos and image(s) that can be zoomed in/out

  • Transparent pricing, including any additional product-specific charges

  • Clear product options/variations and an easy way to choose between them

  • Product availability

  • A direct call-to-action

  • Concise and informative product description

  • Related product recommendations

  • Shipping information

  • Product reviews and social proof w/ media and advanced filtering

  • Live chat support

As you can see, I have a number of features that I dislike about the website, but I wanted to validate my opinion and design not just for myself but for others also, so I went ahead and did guerilla testing and user research.

Guerilla Testing

I interviewed a number of users to get an idea of how they interact with the Shopee product page and if they have the same sentiments. I sent the following questions to 9 friends in order to gain some insight from a total of 10 people, including myself.

As a Shopee customer:

  • What is the first thing you do when you visit a product page?

  • On a scale of 1 ~ 5 (i.e. 1 being the hardest), how easy is it to select the correct product specifications of a product?

  • Which part of the product page do you spend the most time on before deciding to purchase an item?

  • Which part of the product page do you spend the least time on before exiting the product page?

  • If you could change one thing about the product page, what would it be?

Key Findings

  • Users first look at product ratings to see if there are useful reviews; next they go through the product images/videos before finally checking the product description

  • Selecting the correct product variation is only difficult if the seller did not configure the options clearly and/or if there is no product/size guide for reference

  • Users spend the most time going through reviews in the Product Ratings section before deciding to purchase a product

  • Users spend the least time reading the product specifications and description because they usually just compare the product photos with the images/videos attached in reviews

  • Related/Recommended items might not get much attention because users are already in a product page of an item that they want/need

  • Product specifications and descriptions should be consistent across the site e.g. templated per category

User Research

Next, I gathered relevant user reviews from online forums and app stores in order to understand the general feeling of Shopee users and again validate my opinions. Below are some screenshots:

Key Findings

Upon compiling comments from guerilla testing and user reviews, I determined the following repeating comments regarding Shopee's product page:

  • Counterfeit/fake items are branded as authentic

  • No easy way to check legitimacy of sellers/shops

  • Product descriptions can be vague/incomplete

  • Reviews are the go-to deciding factor when buying a product

  • Product descriptions may change without notice which can affect refunds/returns

  • Sizing charts are inaccurate/nonexistent/hard to find

  • Reviews are not chronological and there's no way to filter them properly

  • Option to live chat with seller to discuss product is good

  • No option to show if product has been liked/viewed before

2. Define

How Might We?

To better help me with my redesign, I used the How Might We (HMW) framework to help me prioritize.

  1. How might we simplify the layout to highlight the most useful product information in order to make shopping more seamless and attract more users?

  2. How might we highlight the reliability of the seller more efficiently so that users can make judgment calls more easily and potentially turn more one-time buyers into loyal customers?

  3. How might we arrange customer reviews in order to present the latest and most relevant information for users to compare actual product photos with the advertised product?

2x2 Prioritization Metrics

3. Design

Before

After

Ideally, I would have liked to create an interactive design, but I did not have enough time to study how. Below are three images that show what it would look like when toggling between the Overview, Reviews, and Seller Info tabs.

This is my first time doing a redesign of an e-commerce platform using Figma as a tool. It was a fun and sometimes frustrating learning experience.

I now understand that when it comes to visual design, it would be best to set attainable goals, properly go through a more meticulous design process and collaborate with a UI/UX designer and other stakeholders, while studying user behavior and related literature — in order to create a more comprehensive design. My output for now can be improved a lot for sure, but for now, this is the best that I can do.