THE PROBLEM
Asian Beauty X is a beauty, cosmetic & personal care E-commerce site, but shopping online for beauty products is daunting at times with missing information or ingredients list.


THE SOLUTION
We ran about a week of research through the following research methods to get a clearer understanding: survey questions, gathering insight, empathise, ideate, prototype and test. We eventually redesign the website and created an informative product page where people can better understand the products.


THE ROLE
I led the project and worked on all aspects of the new redesign site, including its research, visual and UX. I also revamped the UI/UX of key pages while my developer colleagues helped to implement my designs.

 

ROLES
UI/UX Designer

RESPONSIBILITIES
Research
Information Architecture
Sketches
Wireframes
Interface Design

PLATFORM
Web/Ecommerce

Initial kickoff meeting and brainstorming session

We kickstarted with a meeting with the agenda of obtaining alignment with the team on the project brief and goals, getting as much information from Andrew Lim and JJ Tan, and for us to scope out the project. We treat this meeting as part of the research where we bounce off ideas and strategise what can be done for the project.

Research method and interview questions

Secondary Research
I have never bought makeup products online, therefore the entire process was new to me. I questioned everything that I don’t know and followed-up with the answers during the later stage of the research.

Some of the questions that I asked myself included:

  • What is the user flow like?

  • What do users look out for?

  • What are some pain-points of the users face?

  • What are the most important factors?

  • Is the shopping experience different depending on the types of products?

Primary Research
For my primary research, I wanted to know directly from people who have experienced the process of buying makeup online. By the end of my research period, I ended up interviewing 4 people.

User Personas

Once we understood user behaviours, we defined the project scope based on needs and research results.

Gathering Insights

Lack of product information
Insufficient information provided for users on the products they are purchasing.

Not guaranteed
There are no guarantees during the shopping experience due to factors like being unfamiliar with using the product or how it will turn out when they are using it.

Empathising

Users want the site to be as informative as possible. They don’t want to spend time researching the product on other sites.

Users want to get tips and tricks on how to use the product.

Information Architecture

We wanted to deliver a better user experience to the users by letting them find what they are looking for within the website. To do this, we started by planning the information architecture first. 

Sketches

We brainstorm the ideas using sketches to visualise the user experience throughout the page. Creating this allowed us to move on to see what functionalities and content would best serve the users.

Wireframing

The wireframes have gone through various changes to ensure that the overall navigation and user experience of the website are simple. The website will be designed base on the brand guidelines set by them. Therefore, we made sure to follow the guidelines of the brand identity to ensure that the visual language synthesises classic principles of good design.

Visual Design (Style Guide)

Using the established brand guide from them, we applied it to the UI design which was used throughout the final round of design.

Final Design

The final design was polished and reflected the Asian Beauty X brand identity. Users can easily navigate through the website with detailed information and enjoy makeup tips to help them find the right product.

Credits

 

CLIENT
Asian Beauty X

CLIENT CO-FOUNDER
Justin Lee

DESIGN AGENCY
360 & 5

DESIGN DIRECTOR
Andrew Lim

SENIOR DESIGNER
Beiwen Wong

DESIGNER
Andy Ng

LEAD DEVELOPER
JJ Tan

DEVELOPER
Rochale

BACKEND DEVELOPER
Syabil

Previous
Previous

Wanderlust + Co

Next
Next

-