UX Case Study: Designing a Mobile App for Beautician Platform
Beaupedia Mobile App — Final Project UX Design Purwadhika Startup School
Project Overview
Nowadays the trend of makeup is very growing and this makes people are interested in exploring deeper into the world of makeup. However, there are some people that not confident in their ability to do self-makeup. Luckily now MUA -or we know as a makeup artist- is easy to found.
But did this solve the problem? Not exactly
Is not completely end. Turns out there some problems, how can these people find MUA according to their needs?
by Beaupedia Mobile App, I tried to solve this problem. Beaupedia is a mobile application for beauty enthusiasts and beauty experts (Beautician), which provides beauty services, starting from the makeup artist service, hair styling, hijab-do, and many more.
Project Goals
In this case study, people be able to book beauty service such as makeup artists easily and quickly.
Design Thinking Process
Stage 1: Empathise — Research User Needs
Hypothesis
A hypothesis is an idea or explanation that you then test through study and experimentation. I have been thinking 3 hypotheses before creating this mobile app, these things came up from foundational research — ethnographic (personal experience), they are:
- Do users need applications for a beauty search platform? (e.g. knowing how to know face conditions, skincare that matches the skin, MUA information)
- Do users have problems when looking for beauty information?
- What do users need when searching for MUA?
I validated the above questions with the research process as follows:
I’m using online questionnaire (Google Form) to spread the question list. With more than 100 respondents filled the questionnaire, most of the respondents were within the range 18–24 years old (74%). Survey questions were divided into three criteria that I have mentioned it before in the hypothesis part. You can see the questionnaire here.
Survey Result
The survey stated that only 10% of the respondents have no idea how to know face condition. Other respondents know well their face condition. But I found out new perspective as follows:
To shorten and grouping all questionnaire results, I’m using the affinity diagram. Affinity diagrams are a great way to make sense of qualitative user research or customer feedback. It’s made me easier to define all insight and grouping similar information to the same category.
The conclusion of the survey results are:
- The respondent has no problem to get know their face condition
- Most of the people found difficult to find makeup artist as they expected
- Review & rating, price list, chat feature, portfolio are the things that user consider before when searching MUA
The solution that already exists
Three application offers the solution to this problem but still don’t completely solve the problem. For example, feature direct chat only provide by Hello Beauty app whereas this feature is quite important so that there is interaction between the user and the beauty service provider.
Stage 2: Problem Define — State Users’ Needs and Problems
Now we gather all insight. From the results of the previous affinity mapping, the conclusions that I got is:
Most people need a beauty service search platform rather than a beauty information platform. People took a long time to find beauty service and find difficulties finding beauty services that match their needs.
From this result, I decided to design an application as a beautician platform that makes it easy for users to book beauty services quickly and per their needs.
User Persona & User Journey
To find out which the right user to use this application, I describe in the user persona below. A user persona is a representative user that includes info such as demographics, characteristics, experience, goals, pain points, to reflect the user’s environmental conditions and the user’s actual needs.
After creating a user persona, I continued to create a user journey map. The aim is to describe the steps taken by the user to achieve their goals. Here is the picture:
Storyboard
To illustrate the difficulties that Brenda regularly happenings, then I describe in this view storyboard. In Brenda’s case, Brenda had difficulty finding makeup artists until Brenda’s friend recommended the Beaupedia application. Finally, Brenda found a makeup artist as she needed.
Priority Features
Before I start to the prototype, so what should I input in this Beaupedia application? I grouped these features into a 2x2 matrix to determine priorities in the producers of the Beaupedia application.
Stage 3: Ideate — Challenge Assumptions and Create Ideas
After all the problems have been collected, it’s time for me to think of what’s the solution? To achieve the goals as expected by Brenda -users of this application- I create user flow as described below:
Next, I proceed to the stage of making wire flow as a visualization of this application in Lo-fi sketch form. Wireflow has emerged as a solution to these issues, used to show designs in the context of common user tasks.
Stage 4: Prototype — Start to Create Solutions
To achieve the previous wire flow into a more interactive visual, then I use the Adobe XD as a design tool. To find a consistent and neat design, here is the design system that I used during the making of Beaupedia mobile application:
Design System
How did the results of the prototype that I managed to make? Check this out!
Stage 5: Test — Try Your Solutions Out
User Testing
To measure how successful the solution I offered for the Brenda case, then I did a user testing. I did user testing to 5 users, where 3 of them are UX designers who can give me input in terms of heuristic design and 2 people are users who often use makeup artist’s services.
Comments from these users will be a consideration I compile to do a better iteration design.
Notwithstanding the above, I also assess how the user’s success in completing their work. I divided the task into 4 parts, starting from their completion in discovering services, filling booking details, reviewing profiles of beauticians, and book services. It turned out that the design I made in the book screen service still needed special improvement.
Design Reiteration
All feedback from users makes me get new insight to make designs that are simpler and cleaner. The following are the results of improvements to the prototype:
What has changed compared to the prototype? I focus on how to provide this platform that is more simple, not much text, more icons. Here are the changes that I made:
What’s next?
- User testing for this design reiteration.
- Continue to design other processes such as login and payment methods.
Lesson Learned
There are so many lessons that I got during the making of this project, among others are:
- Never stop to read, read, and read. My weakness when designing UI (user interface) Beaupedia is lack of looking for references to modern UI design trends. As you can see that the appearance of this design tends to be old fashioned. For the next project, I have to do more in-depth design research.
- Appreciate your time, use it wisely. This project must be done in only 2 weeks. I took too long to research and ideate so that the time I used for the prototype was short. The result is my UI design is not optimal as I expected.
- Don’t stop learning. In the future, I will continue to develop my skills with other challenging projects!
Thank you for reading my final project! I enjoyed the whole process while creating this final project, I hope you all feel the same as me. I am very grateful having my mentor during the making of this project, thank you ka Kenneth Mahakim (UX Instructors Purwadhika) and Handoko Dyan Aditya (UX Researcher as Final Project Examiner).
I’m looking forward to your feedback, please reach me out at sarahalfiani204@gmail.com or my LinkedIn.
Thank you :D
