Designing review & rating feature on Ruparupa

Role

UX / UI Designer

Platform

Desktop, Mobile

Duration

Aug 2020 - Dec 2020

Project Summary

We had a high drop-off rate on the product detail page, our hypothesis was users need product review and rating from others to help them decide to buy the products. So I design the feature from scratch following the design process. Resulting in our drop-off rate reduce and conversion rate growth to 2.33%.

Design Process

Product Definition

Before starting building the feature, it is fundamental to understand the context for product existence, in this phase, I do stakeholder interviews to deeply understand what product we are going to build? who will use this product? why did we build this product? and how to measure the success of this product?

Research

The background of this project initiation is because we had a high drop-off rate on the product detail page, and our hypothesis was users need product reviews and ratings from others to help them before deciding to buy the products. So to strengthen our hypothesis, I start by using secondary research from Baymard, UX Articles on Medium and NNgroup to learn more about review & rating impact and best practices. After reading all the articles I found research from Baymard saying that "95% of users relied on reviews to learn more about products".

So I start to validate that data by conducting interviews with three people who have experience shopping on Ruparupa and other e-commerce. The interview goal is :
I want to understand the impact of the rating & review on users when deciding to purchase a product.

I prepared some interview questions :
1. How often do you shop on e-commerce in 1 month? Have you ever shopped at Ruparupa.com?
2. What items do you buy at ruparupa.com?
3. Have you ever felt unsure when buying a product because it doesn't have any reviews or ratings? Please describe why
4. What kind of review do you feel is helpful? Please describe

From the interview, I learned the users pain points are: 
When deciding on buying products, especially if they are expensive, users need honest reviews with real photos from others besides product specifications and details.

Analysis

From those three people I interviewed before, I created a persona and also a user story to simplify user needs and pain points in one sentence that is easy to remember for everyone:
"As a person who often buys online, I want to read a complete review of every product I want to buy, so I can avoid buying a fake or bad quality product".

I also did competitive research to understand the industry standards. So I choose three
e-commerce from persona preferences: Tokopedia, Shopee, and Blibli. And here are the insights:

From the insights above, I also add a store services rating after discussing with PM since we monitor every store's performance.

Design

After I gathered some inspiration from competitive research, I created a user flow using a simple shape and sketching some paper wireframes to discuss with PM. After some iterations, I finally translated the paper wireframe into digital wireframe and did a quick presentation with PM and devs before designing the high fidelity UI.

To validate the design, I created a prototype using Figma to test with users later. Meanwhile I also handoff the design to devs and adding new component to our design system.

Validation

Using the prototype I created before, I ran a usability test on users I interviewed earlier to identify usability issues and pain points. The goal is, I want to observe:
- Can users easily insert a review & rating?
- Can users find a product review and know how to use review filter?

Before starting the usability test, I prepared some tasks and scenarios for users to perform:
1. Insert a rating and a complete review with photos.
2. Find the rating & review of the product on the detail page and use the filter to show only the reviews with photo.

An example scenario was the following:
"Imagine you buy a coffee presser on Ruparupa and feel satisfied with the product quality. You want to give a five star rating and a complete review, including photos of the product."

And here are some user comments I gathered:

To make sure what they say, do and think during usability test sessions, I asked them a follow-up question and here are some insights I get:

- Users don't want to give a complete review if they don't really like the product.
- User don't know what they should write and how to write a review.
- There are some visibility issue on input review screen.
- User expecting the rating on product detail page is clickable.
- User expecting they can use more than 1 filter tool, e.g: show review with 4 & 5 star only.

From the insights I gathered from users, I discussed with PM and devs for the design solutions and decided which one we should prioritize for fixing first.

After creating the prioritization matrix, we decide to fix the important and easy ones first. And here are the design change:

Results

Three months after launching the feature, I asked the product manager about the feature's performance, and it turned out that our drop off rate reducing and conversion rate growth to 2.33%

Back to top