Sociolla: New ways to shop online beauty products(UI/UX Case Study).
Overview
Beauty is always a part of a woman world. Keeping their face healthy and looking good is really important. Skincare and Makeup is one of it. But sometimes, looking for the best Skincare and Makeup is not easy as looking for a clothes or shoes or bags. For girls looking for Skincare and Makeup is really complicated, since we need to match it with our skin condition, if not? than its just a waste of money.
SOCO is a beauty app that was provided by Sociolla to help user find their beauty product through online. As the number 1 beauty app that has been use in Indonesia, this research is appointed to improved SOCO App to increase user experience in using the app, while surfing the platform for choosing the best Makeup or Skincare product based on their preferences.
*disclaimer** this project is not part of the Sociolla, the purpose of this project were aim for completing Final Project Task as a UI/UX Design student in dibimbing.id.
Objectives
This case study is focused on:
- Understanding user behavior while using SOCO by Sociolla Apps.
- Define user goals, needs and pain point while using SOCO by Sociolla Apps.
- Understanding user experience while searching product on SOCO by Sociolla apps.
- Find ways to increase user experience while using SOCO by Sociolla Apps.
Design Process
I used Design Thinking Process to complete this Case Study. There are several steps in Design Thinking which are Empathize, Define, Ideate, Prototype and Testing.
I believe with Design Thinking, I can focus on user experience and create innovations in product design.
1 — Emphasize
In this step, first i took a mini research using Survey through Google Form to several respondent that are use SOCO App behavior. This process is needed to gather several information such as pain point, need or expectation from SOCO App user and the user demographic.
Second, i will do survey screening from the respondent that match my objective and validate the answer using In Depth Interview method. This process is needed to collect more explanation and reason that already been gathered.
2 — Define
From Empathize stage finally I can analize user goals, behavior and pain point from the user. The respondent that are has been gathered is 5 respondent.
- Goals
All of the respondent response that they use SOCO by Sociolla Apps to find beauty product (Skincare & Makeup) that can fulfill their beauty needs with the best product and price, based on their current face condition.
- Behavior
Based on the behavior it can be split into 4 activities that the user actually do in the app:
- Product Compare
4 out of 5 respondent said that they compare product based on brand, price, ingredient and review.
Aku tuh suka banget di aplikasi itu untuk ngebandingin setiap produk yang pingin aku cari dari harga, brand dan review.
2. New Product
5 out of 5 respondent likes to discover new products from the app or checking new products that been viral on the internet.
Suka ngeliat upcoming produk dari Sociolla apalagi kalau ada produk viral baru yang tersebar di Sosial Media, langsung aku check di App SOCO sih.
3. Promo
3 out of 5 respondent wants to find better promotion to get better price from the apps.
I Love Promo sih, di applikasi itu promo yang dikasih jauh lebih banyak dari pada di offline store.
4. Gave and Seeing Review
5 out of 5 respondent like to seeing and giving review after they buy any product or to buy some products.
Aku suka pake applikasi SOCO buat ngeliat review dari produk yang aku beli karena aku merasa reviewnya pasti jujur dan udah pernah dipake sama orang lain.
- Pain Points
In this step, i will defining some pain points from the user of SOCO App and use How Might We to created some idea.
- 4 out of 5 User mentioned that its really hard to notice the ingredient that have a several reaction towards their face.
- 4 out of 5 User mentioned that its really hard to compare any product side by side based on the brand, price, rating and review.
- 3 out 5 User, find that its really hard to find the best shade based on their skin tone when shopping online.
- 3 out 5 User shows that they aware of the skin preference feature, but they doesn’t know about the feature name and how to update it.
From this pain point i tried to create some solution in How Might We section.
Survey and In Depth Interview result click here.
Here is also the possible User Journey from the user while using the app.
3 — Ideation
After defining potential solution for user’s pain point, I have to describe more details about the potential solution that I chose. This phase called solution idea. I used Matrix Prioritazion to see which idea/solution that have more impact to user pain points.
From the Matrix, i can conclude that I have three main solution that can solve user pain points while using SOCO App by Sociolla.
- How might we… create compare product feature, so user can compare product side by side based on the brand, price, ingredients, etc.
- How might we… create filter feature that can help user match their Makeup shades on their faces using camera.
- How might we… adding reply feature on review section, so user can discuss/share more about their problem with other user that have same skin preferences (Beauty Profile).
Therefor, i created the user flow to explain how the user will used this new feature from the apps. I also provide Information Architecture to showed the list of Information that should be contained in each new feature.
Full User flow and Information Architecture click here.
4 — Prototyping
After brainstorming, created solution, prioritizing ideas and making user flow, the next step is prototyping. In this step, I created Wireframe, Mockup, Design System and Prototype.
Design System
Design System is a documentation of Assets, Pattern, Color, Typography and Components for a Design or Interface. Design System guides me to create a consistent Design.
Full Design System click here.
Wireframe
This visual guide represents the skeletal framework of the app. It helped me arrange the interface elements. I use High Fidelity wireframe to create the Interface Design.
Full Wireframe Design click here.
Mock Up and Prototype
Mock-up is a high-level representation of a product design. At this stage, I create a combination of styles, typography, colors, and others. After going through several stages of research and ideation, here is a mockup design and the prototype of the new features for SOCO App y Sociolla.
Full Mock Up and Prototype click here.
5 — Testing
Since the Mock Up and Prototype are finished, the ext step is for me to test my design using Usability Testing Methods. My respondent was the same person that I recruited from the research process, which are 5 respondent. There are 3 scenario that must be done by the respondent:
- You want to find a Liptint and want to tried the shades using new Filter feature from the app, how did you do it?
Kamu ingin mencari produk liptint dan ingin mencoba shade warna mereka, menggunakan fitur filter baru. Lalu pada akhirnya memutuskan untuk membeli. Bagaimana kamu melakukannya?
2. You want to reply other comment that has been post by another user named Pricilla Aileen. How did you do it?
Kamu ingin membalas sebuah komen dari komen yang sudah dibuat oleh sebuah akun bernama Pricilla Aileen. Bagaimana kamu melakukannya?
3. You want to search Sunscreen and want to compare with other similar product. Finally you want to buy one of the product from your comparison. How did you do it?
Kamu ingin mencari produk Sunscreen dan ingin membandingkan produk tersebut dengan produk lainnya yang serupa. Akhirnya kamu memutuskan untuk membeli salah satu produk tersebut.
Full Usability Testing Report click here.
Usability Testing Result
Task #1 — Try Lip Tint Shades from the new Filter Feature.
Missclick Rate: 36.7%
Average Success: 80%
Average Duration: 66.3s
Respons:
All of the respondent are agree that this new Filer Feature make their experience when trying the products shade more easier while shopping only. This is because, the user can tried the shades based on their face skin tone from the phone.
Conclusion:
Even though the Missclick rate are quite high, but most of the respondent succeed to finished the task. This means that this new feature have easy journey for the user. The high Missclick Rate is because in the prototype I let the user tried all of the Products shades, therefor they can explore more about the feature.
menurutku fitur filter mencoba shade sangat memudahkan
Task #2 — Reply other Comment Post
Misclick Rate: 65.5%
Average Success: 80%
Average Duration: 103.1s
Respons:
All of the respondent are agree that this reply session are necesery to be developed on the apps, since they can share their own thought and discuss on the same problem from the products with other user.
Conclusion:
Based on the respond and report, it can be seen that user quite struggle to operate this feature, this is because all of the user cannot find the reply button on the comment section. Therefor the Reply Button from this feature section needs to be improved.
keluh kesahnya bingung pas mau reply, karena tulisan reply like terlalu kecil mungkin karena diakses menggunakan laptop jadi ukurannya tidak sesuai.
Solution:
- Resizing the reply button.
- Change the color of the reply button so it can be easily noticed by the user.
Task #3 — Product Compare
Misclick Rate: 21%
Average Success: 80%
Average Duration: 52.3s
Respons:
All of the respondent have their own thoughts about this new compare products feature, but if I took a line from the respond, it can be said that the user expect that this feature can be notice easily without scrolling through the whole page, this is also apply in the page when the product started comparing, they want the button when they start choosing which product they want to buy no in the bottom of the page.
Conclusion:
Even though the Missclick Rate is quite normal, but this page are mostly need to be improved more and have more feedback from the user.
bagi user awam mungkin tidak bisa fokus langsung ke fitur compare product, karena peletakannya dibawah komentar produk. mungkin penempatan fitur tersebut bisa didekat gambar produk tersebut (?)
Solution:
- I tried to change the button of “compare page” to the most suitable place that the user can reach and notice it easily.
- I tried to change the add button to tick or choose button product, so the user might not confused when they see two add button.
My Learning
- I learned and experienced how user research should be done.
- Improve my abilities to conduct interviews and create surveys.
- I acquired knowledge on how to organize, analyze, and present data more effectively.
- Doing a design for app, is not just only making the app beautiful and aesthetic but I need to aware with many other things that are important for their experience, such as choosing the best font and font size.
- Being a Product Designer is not easy as it looks and it needs a lot of time to improve, discuss, brainstorm and developed the app.
This concludes the case study which required a lot of work and time for me to finish. Regardless of the hard work, I really had fun conducting and writing this.
Thats all, foolks!
Thank You for reading!