UX : Optimizing Review card using Atomic Principle
What do we facing
Let’s start with a story. In 2018, I’d been asked to revamp Female Daily’s review card. The request is plain and simple, I just asked to change the card behaviour. The existing review card behaviour is popped up when the load more button clicked. This created pain point because the page re-load to show pop up; which means double loading (the first loading being the one when the user entered the page, and second loading when they clicked load more button).
But, since the main product of Female Daily is its beauty review, so the review card is scattered everywhere. There are a lot of pages contain review card with different type and different information; and to make it worst, there is no mapping of the existing type of review card, nor the page or information required for each review card in different pages.
So the journey began.
Understand the problem
To give us a better understanding of the problem, I discussed with the developer to understand the review card component, and how they create it.
After that, we search every page in Female Daily website and create a review card mapping. Which page contain review card, how it looks like, and what information contained in the review card. From that, we found the pain points and problems to attack, which are:
1. No review card mapping
This is the biggest monster who creates blocking from problem to result. Since there is no review card mapping, there is no information on which page contains review cards and which page is not. And to make it worst, we have no idea what information needs to be shown on each page. For example, in general, a review card contains review, user card and product card. But, in the user profile page, the review card only contains a review and product card (because the review card shown in user’s profile card is their own review, so, no need to show them their own user’s information).
2. Too many review card type
From the problem above, we found another problem. Too many review card type. Different pages contain different review card that contains different information.
3. Not all data submitted by users is shown.
The last but definitely not least, not all data submitted by users is shown. The review form contains several questions. But, the data submitted is not shown in the review card. So, users usually re-type their answer in the text box. Not only redundant, but this is also a pain point that supposed to be removed.
Process
After we define our problems, we start untangled the problems starting from;
1. Understanding elements using atomic design method.
In this phase, we are using the atomic design method to understand each element contained in a review card.
Atomic design isn’t about designing a single instance or a page, it’s about designing with the big picture in mind — it’s about designing the core of the system.
Joe Toscano
In the review card, there are three main molecules in a single organism, which is:
a. Product card
b. User card
c. Review card
d. Card elements
Now, let’s take a deeper look at each molecule.
a. Product card
Product card builds of several atoms, such as product image, product rating, brand, product name and product shade (if any).
b. User card
User card builds of several atoms, such as user profile picture, username, and user id (skin type, skin colour, etc)
c. Review card
Review card builds of several atoms, such as reviewer’s rating, review and read more button (if any)
d. Card elements
Card elements build of several atoms, such as like, comment, share and exit button
2. Mapping Review card
After we understand the elements, we move to list pages that contain review card and create a map that contains a review card’s requirement, pages and behaviour for each page.
Result
As the results, we are not only able to redesign review card with less empty space and added information, but, we also create a design system for review card.
The design
we found several improvements that could be made from the existing design, which are:
1. Narrower review width
Narrower width gives the user better readability. Having the right amount of characters on each line is key to the readability of text. Since the line of text is too long the reader’s eyes will have a hard time focusing on the text. This is because the line length makes it difficult to gauge where the line starts and ends. Furthermore, it can be difficult to continue onto the correct line in large blocks of text.
2. Adding an action button to increase engagement
To create a narrower review width, the user card is repositioned to the side of the review card. To increase engagement, we added follow button below user detail. So, if a user finds another person with the same skin problem/concern, they can follow them easier.
3. Showing submitted data
Review card design system
The design system consists of review card mapping, page requirements, and elements. By creating a design system, we are not only creating a new design, but also consistency and better communication with the developer.
Reflection
It is important to think bigger than the problem, to understand what the actual problem is. We are given a simple problem to solve. But, as we dig deeper, we found more severe problems. Creating a design system not only solve the current problem but also bring consistency across platforms.
