Project Brief
First luxury skin care brand launching at Handsome (well-known in Korean fashion industry company), which they have requested for a new website with the brand launch.
Role
* Design the contents with strong UX storytelling.
* Created IA, wireframes, prototypes based on research.
* Collaborated with the visual and engineering team.As a UI/UX Designer (main),
* Take overall communication of the project.
* Manage end-to-end process to meet the opening date.As a Project Manager (sub),
Timeline
May 2021 - Oct 2021 (6 month)
Website
The overall process started from research, proposal, design, user test, and QA to finalize the website.
Process
01 Research
Focused on the problem of current cosmetic and skincare websites
Analyze how to solve the problem and make solution in Oera website
Proposed the UX strategy and concept to client
Present and share IA, wireframes to other teams to get critiques for better design
02 Proposal
Worked on design and make prototypes to prepare for user test
Based on user testing, iterated design to make improvement in usability
03 Design & User Testing
All of the team proceed with QA before finalizing the website
Oera official website went live on October 8th, 2021
04 QA & Final
“What is the problem of current premium skincare brands?”
Most skincare websites only focus on product-based information like price, ingredients, and volume to motivate consumers to buy products. Due to this, the brand's own identity was lost to consumers.
Problem
“How can we make the product stand out while delivering brand identity to consumers?”
Research
Brand-focused Websites
Fashion websites mainly focus on selling their brand value along with the products
Brand-focused Websites Analysis
UX Strategy
I have set goal to cover all of the branding to product by delivering brand centered design in Oera website.
Solution
To highlight the two collection in Oera, which is prestige and product category, I have separated each collection in 1st level to deliver a clear difference in each skincare line.
Information Architecture
Organizing the level
IA of Oera Website
Wireframes
Designed the navigation in a way for consumers to recognize each collection intuitively. Attract consumers to each collection landing page for more product information after they have experienced the brand story on the main page.
01. Navigation (GNB)
Create consistency in the product list menu layout on both the main page and product landing page on the left side to minimize confusion when users move between pages.
02. Product list menu
Focused on delivering the overall brand & product story to imprint the brand identity to consumers.
03. Main page
Designed a skincare (Product/Prestige) line landing page separately to deliver and highlight each collection’s characteristics.
04. Landing page
04-1. Product landing page
04-2. Prestige landing page
05. My Point page
Designed a seamless step-by-step flow to minimize the steps in the order of selecting reward product > check item details > delivery method.
* User test was conducted on 10 people from the company who did not participate in the project.
User Test
User Test 01
Item Category
8/10 felt the numbers of the product for each category is unnecessary and it bothered focusing on the product list.
10/10 people had a hard time finding the logout button. Only half of 5/10 people found the logout CTA on my page.
Logout Button
User Test 02
7/10 felt the product and option information on the list were scattered.
Reward list
In checking the item, their eyes are usually drawn to the image first, but being on the right side causes inconvenience to the flow.
Also, the text has been left-aligned which gave them another confusion.
User Test 03
6/10 people wanted to check the specific place on the map by tabbing the address shown on the screen.
Reward list
Simply giving text information about the address was hard for them to choose which store is best for them.
Design System
Final Design
Navigation
All menus except for the skin care (Prestige /Product) line in the navigation section are hidden in the hamburger bar so that customer can first clearly recognize the product line and guide it to the each product line detail pages.Landing page
Designed skincare (Product/Prestige) line landing page seperately to highlight each feature characteristics.
(1) Product line
: Lower the barrier for consumers to easily access to the Oera product at first.
: Focused on delivering product category and list, showing a total of 8 categories of 24 products in a page.
(2) Prestige line
: Prioritize the technology and cosmetical part of the product to highlight premium luxury concept.
Reward request
Considering the main age target group of 3545, each step needed to be designed in accurate and simply way. Designed in seamless step-by-step flow to minimize the steps in the order of selecting reward product > application details > delivery method.
what I have learned from this project, which will lay the foundation for my future.
Takeaways
Never forget or get lost from the UX concept you set
In designing, I happen to get lost in what I have set previously when I proceed with the project and I thought I should always keep in mind what I have set for design to draw a big picture of the project.Let go of the fear of iterating design & communicate clearly
this project I get to overcome the fear of iterating design recognizing it as a step of improving perfection of the project. In processing the overall project, I learned that asking and communicating is very important when collaborating with different teams to make the best outcome.taking a UIUX designer and PM at the same time gave me a working habit of taking note of all the times and setting priorities for work, deciding the importance of the task to be done in the first place. This will lead me to perform well in any circumstance and role in future.Set priorities for your work
As a Project Manager, I also participated in product & package shooting for the whole day. We started at 9 a.m and ended at 3 a.m the next morning.😱 But, it was a great experience how the product images could be taken different from the lights and perspectives.🤓
After sharing the final photos of the product and package, the client's satisfaction was quite high, they requested additional photographs of product texture as well.✌️
Behind the scenes
Zigbang
Real Estate Service Brand Official & Career Website
Fast-food Kiosk Redesign
User-friendly Kiosk UI for fast-food restaurants