CRES
e-Commerce site for a Luxurious Hair care product line born from a Japanese hair salon.
I led the redesign of this eCommerce site in order to help promote products more broadly.
SKILLS
UX Design
UI Design
TEAM
Myself
TOOL
Figjam
Figma
Shopify
How might we establish Trust on e-Commerce site?
CRES Hair care products have been sold in person at salons first and opened on the eCommerce site after. Customers prefer to purchase products from salons rather than online because they can feel the quality of the products, and it is easier to choose with recommendations from trusted stylists.
For the redesign solution, I was able to improve the website to be more personalized and reflect the company's identity to engage users, as well as provide a new layout for the product pages for users to easily browse, resulting in a 30% increase in page views.
PROCESS
CHALLENGES
I came across two main challenges:
How to Convince CEO: I work as a solo designer for D&R corporate, which owns the CRES hair care line, and because I was the first designer and worked closely with the CEO, I had a great opportunity to persuade her of the significant impact that a website redesign can bring.
First, I did a competitive analysis and pointed out several things that may cause the users not to proceed product purchase process. She agreed, so I made sure we were on the same page.
Second, based on her feedback, I brainstormed several ideas and invited her to choose some that piqued her interest and clarified project directions that met the business's goal.Quick Research Methods: With the short delivery timeline, I couldn’t do traditional user research methods such as interviews and user testing, so I used quick research methods as workarounds. I found two methods extremely helpful in gathering insights:
Competitive analysis
User Feedback
RESEARCH
Competitive analysis:
User Feedback:
Since the products have been sold in person at the hair salons (4 locations), I asked hair stylists around to collect insights from users.
Here are the key insights that I found:
SOLUTIONS
Based on the findings of the study, I focused on the following areas:
01 Make a good first impression
Create a new landing page that engages new visitors and provides a positive first impression of the businesses.
02 Product Page Optimization
Eliminating information and emphasizing key information to provide users with the appropriate amount of information.
SKETCHES
Because the original website was built on the Shopify platform, the template's ability to make design changes is limited. I intend to create a new layout that requires only small changes and to provide new graphic assets that add impact.
Grayscale Wireframes:
DESIGN
Here are my design solutions reflect on the key findings.
Home
New landing page with new hero image, optimize product information and clear call to actions were added to increase the user engagement.
Product Page
Highlighted key product information for easy scanning and categorized other product details to organize the page layout.
Story Page
New layout to easy scan and new visual assets that align with brand concepts and about contents