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.
How might we simplify the layout to highlight the most useful product information in order to make shopping more seamless and attract more users?
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?
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.
References
20 of the Best Product Page Design Examples We've Ever Seen by Lindsay Kolowich Cox (Updated April 1, 2022)
Product Pages: 16 Best-in-Class Examples and Why They Work by Courtney Symons (Nov 20, 2020)
eCommerce Product Page Best Practices in 2022: Learn With Examples by Shanaz Khan (Updated Feb 4, 2022)
14 of the Best Product Page Design Examples by Erika Varagouli (Updated Sep 9, 2020)
The Beginner’s Guide to Usability Testing [+ Sample Questions] by Clifford Chi (Updated July 28, 2021)
The best usability testing questions (Updated Feb 2, 2022)