EX LIBRIS
Ⅰ. Overview
My Role : UX Designer
I single handedly developed the entire UX/UI design.
(Research, Survey, Personas, User flow, Sketches, Wireframe, UI design, Design system, Mid-High fidelity Prototype, Test)
Tool : XD, Figma, Photoshop
Duration : 02.2021~04.2021
- About the Brand
EX LIBRIS : from the library of, is a perfume brand. The brand philosophy is cataloging the beautiful story of each perfume likewise a book in a library.
- The Objective
Since we are facing a once-in-a-century pandemic circumstances, the client is planning to build an online perfume business.
- The Challenges
There are two challenges in this project.
The first one is to figure out How to create an alternative experience for successfully selling perfumes in a website instead of the actual experience in brick-and-mortar stores.
The other one is to showcase brand identity through designs on the website.
Ⅱ. Design Process
While processing this project, I communicated with my client as much as I can to meet her business goals. That’s the reason why I went back and forth in Prototype & Ideate process in order to meet between client’s request and users’ needs. client’s request is not always 100% matched with users’ needs but I suggested alternative design solutions to make balance between client’s request and users’ needs.
Empathize
Empathized with users' frustrations and tried to understand what they need through persona, surveys and journey maps. I identified the unique feature that sets perfumes apart from other products.
Survey
First of all, I conducted a survey & interviews with 10people to understand customer behavior and the pain point of purchasing perfumes online. My survey results revealed that Fragrance test is a main factor when deciding to buy a perfume. I centered my approach for defining the pain point and solution on this finding.
Personas
Creative representative personas for potential main customers from the perfume e-commerce website.
Journey map
Generate a journey map at a e-commerce website to figure out the actions and emotions of the customers, as well as our design opportunities at each step. One important feature of online channels is the time gap between purchase & actual product use. I believe that this can be a deterrent for trying new perfumes for customers.
2. Define
How might we make more intuitive and helpful design for e-commerce customers to overcome the pain points?
3. Ideate
Created information architecture, user flow and drew sketches to input solutions at the right steps based on user research.
Information Architecture
Organized the Sitemap to navigate page to page easily for users. Before creating sitemap, I discussed with the client and reflected her opinion in the sitemap ; she wanted to categorize products by theme because EXLIBRIS is unisex perfume brand.
User flow
I developed a user flow and input how each step might figure into the problems’ solutions.
Sketches
Sketched a rough draft and checked where in the solution it should be included to reflect user flow.
Design proposal
Designed the overall website in the magazine style to bring up the image of a library as the brand identity.
01. Quiz & Sample Subscription
The main page is the most important for determining the customer's next move. I wanted to solve two main concerns as soon as customers enter this website.
I put the Quiz button on the main page to address the fragrance test issue. The Quiz has an important function here to capture the customer's attention first and to suggest a perfume compatible with their preferences in the results section.
The other concern is saving time in exploring perfumes. I put the subscription button in the bottom right, below the quiz button, to make it easily accessible for customers who are revisiting this website and are interested in trying different perfumes.
In the result page, I input two options for customers. “Recommended Perfume” naturally links to the related product page. Below that, I input the subscription page to enable recurring purchases.
02. Intuitive design
The product page design is composed of three parts : Perfume story, Perfumer's comment, Fragrance note.
This is intended to appeal to the customers’ visual and emotional aspects so as to overcome the limitations of the sense of smell.
Depicting a scene and story related to the perfume sparks the customer's curiosity for the perfume. Building on that, the perfumer's story then gives a sense of the product’s reliability to the customers. Finally, I expressed each fragrance note with a unique color for a sensational description.
03. Discount
I created the discount coupon for repurchasing customers for loyalty benefits. I added the discount mark right after the order is completed so that customers can recognize it easily.
4. Prototype
Created Design system and Mid-High fidelity based on the above steps as communicating with the client.
Design system
Main color : Black, white, grey (to focus on each perfume's unique color more)
Typography : Roboto, Cardo(only for brand name at the client 's request)
Digital Wireframe & Low fidelity
While processing wireframe, there were some concerns.
The Client wanted to put brand identity and image on the main page. However, in this case, the Quiz and Subscription options were located in the bottom. Additionally, the product page needed to include options for size within Subscription.
In Low fidelity, I wireframed from page to page to see the connections.
High fidelity
Reflecting on those points, in High fidelity, I put the Start Quiz and Subscription button in the main page, together with the monthly perfume magazine style design in order to showcase the brand identity instead of the brand name and letters.
I added the About Us page separately for those curious of this brand, thus fulfilling the client’s request.
I put the size selection button on the product page to enable choosing a size immediately without further clicks.
High fidelity includes all reactions as actual usage and is fully wireframed motion to motion.
Client’s Testimonial
“Since it was also my first time to design my own perfume brand and website as well, It was like building a castle together with Ms. Jeong. We were partners and she has been always cooperative and open to my opinion. She was also kind to give me feedbacks about what's good or what's needed to be improved, which is why I could totally trust her sense, ability and herself. I would definitely recommend her to any project.”
Ⅲ. What I learned…
I worked on this project from A to Z and learned how to establish UX design and communicate with stakeholders. I spent most of the time considering how to create an aesthetically-pleasing and logical design.
1. Each product and business has its own features and a UX designer should analyze and reflect that to ensure a satisfactory experience
2. Every design has a logical reason. A UX designer should be fully intentional about deciding where and why to put something
3. Next plan: Coding will be the next step I take to better cooperate with developers at work