Introduction
Hello Nakama! In chapter 7 we got a challenge from Binar Academy to involved in a project with Product Managers to produce high-quality and beneficial product design based on thorough research.
My role as UX Designer and my responsibilities: identify problems, wireframing, design system, low and high-fidelity prototyping, and conducting usability testing.
Project overview
The product:
Ashley Beauty is an e-commerce beauty App. Target customers are those who want to take care of their face by right and original products, need recommendations based on their preferences.
Project duration:
April — June 2021
The problem:
User is hard to determine which product according to skin type and a problem in buying online products.
The goal:
Design an app for Ashley Beauty that allows users to buy beauty products based on their preferences.
Understanding the user
User research
In this stage, the Product Managers did Quantitative research. Based on the survey results, where 70.6% consider the ingredients of a product to be the reason for buying beauty products, 62.7% consider the skin type and 60.8% consider if the product has been tested by BPOM.
Issue
51% of customers find it difficult to determine what products are suitable for their skin type to be one of the biggest obstacles in buying a care product online. While 41.2% of them consider that there is no online consulting service to be the biggest obstacle number 2.
Qualitative Research Result
Then we as UI/UX team discuss with the PM team to share the understanding through Google meet. In this meet, we break down assumptions & Ideas.
Business Model Canvas
User Persona
Marissa 26 years old. Marissa is a busy working adult who needs the right skincare to treated her face.
Frustrations:
- Often buy beauty products that are not suitable for her skin type.
- Difficulty in finding the right product according to skin condition.
Goals:
- Want to have a presentable appearance.
- Successfully treated the face with original and right products for her skin type.
User Story
Customer Journey Map
Starting the design
User Flow
Paper wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized a quick and easy recommendation to help users save time.
Digital wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
Low-fidelity prototype
Using the completed set of digital wireframes, I created a low-fidelity prototype. After that, we conduct usability testing with the user to test our lo-fi prototype.
Design System
We create a design system to use reusable items.
High-fidelity prototype
And here is the High-fidelity prototype, you can interact/explore the design solution we made 😃.
You can interact with the prototype with the link below:
Validate
To validate the features we just made, then we will do usability testing. This process is done so that we can get the results of any feedback or input that we may need to make improvisations.
Usability testing plan
In this stage, we made the plan before conducting the usability testing. We set the research plan to validate, target user, behaviors, goals, plan, and interview process.
We create opening questions and UT questions.
Scenario and UT process
Usability Testing Wireframe
From this UT we got a lot of insight and suggestions.
Usability Testing Task 1
Task: we ask the user to create an account and log in.
Usability Testing Task 2
Task: we ask the user to use the recommendation feature.
Summary
After we conduct the usability testing. We got the result like the data below.
