Crafting seamless & friction-free shopping experiences for MASAMI haircare.

Masami ✽ Project Design Lead ✽ Summer 2023

Decorative picture showing final designs for MASAMI
Role
Project Lead
Product Designer
Team
4 Designers
Tools
Figma
Notion
Shopify
Client
Context
Design for Passion is a design jam that challenges students with clients and their real world problems.
Design for Passion is a 9-week long design jam hosted by University of Washington’s Human Centered Design & Engineering Graduate Student Association. It is an opportunity for students to collaborate on a team while working on a sponsored or self-directed project with mentorship from an industry professional. I teamed up with 4 other designers to tackle a sponsored project with MASAMI.
Problem
How might we redesign MASAMI’s website to increase conversion rates and customer satisfaction?
MASAMI is a clean, premium haircare brand that strives to develop hair products that are hydrating for every hair type. Their secret hydrating ingredient is Mekabu seaweed that is sourced from the waters of northeast Japan.
Even with 3,000+ sessions a month, the conversion rate of the current Shopify e-commerce site has been significantly low (<1.00%), leading to decreased business growth.
Solution & Outcomes
We redesigned MASAMI's landing, product, and check-out pages with customers in mind using user research insights.
After delivering the final designs to the clients, they have since implemented 5+ changes that remain live on their website. While we are no longer in contact with the client, if we were, I would have monitored the following in order to track success and impact:

➺ Increased conversion rates, meaning that customers are landing on the MASAMI website and more end up making a purchase.
➺ Increased time spent on the website, meaning that customers are staying engaged on the website and not dropping off quickly.
➺ Increased positive feedback, indicating that customers value the new redesigns.
Screenshots of final designs for MASAMI landing page and product page
Scroll to learn about the process
Process
In order to decide what to redesign, we must discover where problems and frustrations are arising.
Data analytics to see where customers started to drop off during the customer journey so that we can know which sections to focus efforts on.
User surveys to learn about how customers viewed MASAMI and if they had any feedback.
Website Audit to get designers acquainted with the website and discover any potential problems.
Competitive analysis to see how our competition uses design to drive sales and customer satisfication.
User Surveys
We collected a total of 18 surveys from loyal and potential customers. Here are the key insights we learned:
Survey results. 80% of people did not fully understand MASAMI haircare benefits. 3.38 score of participants that were likely to purchase a product or recommend MASAMI to friend or family.
Qualitative insights from Surveys:

➺ Due to a disorganized landing page, users often left the website prematurely and were discouraged to buy products.
➺ Users faced difficulty identifying what made MASAMI unique and what distinguished their products from competitors.
Competitive Analysis
Exploring how our competition crafts their digital customer experiences
Our team conducted competitive analyses on these websites: OSea, Olaplex, Oribe, rahua, Briogeo, R+Co, Innersense. Here are some inspirations we found:
annotations for competitive analysis
Insights from Competitor Analysis:

➺ Well organized and meaningful landing page, so that customers can learn more about the brand & go quickly into shopping products
➺ Intentional & Impactful Information Layout on Product Page, so that key product information is displayed front and center.
➺ Pop-up Cart Page, the time that it takes to load a new cart page is the time that could be used to continue exploring and adding more products
➺ Additional outlets to discover products through recommended products on product page and in cart pop-up
Wireframing
After learning what customers were having troubles with, the team looked for different solutions through design, content, and layout.
My task was redesigning the product page with one other partner. I specifically worked on optimizing the hierarchy of product information on the page using typography and layout, as well as including a size selector feature per the stakeholders' request. I also suggested a recommended products for you section on the product page.
our low-fi design considerations through annotations
We presented our low-fis to the stakeholders, and with minimal feedback they were happy with our design suggestions and ideas and gave us the ok to proceed into high-fis.
Final Designs
Our design recommendations
Landing Page - Shoppable Products
We decided to have a section of shoppable products high up on the landing page so users can see products right away.
Design of shoppable, clickable products
Landing Page - Informative sections about MASAMI and their unique ingredient
By having these types of sections on the landing page, users can quickly learn Masami’s unique selling point and how they differ from competitor products.
Design of landing page with brief sections of About Masami and their secret ingredient
Product Page - New Information Layout
Users want to quickly grab information that they need to compare our products to competitors. By placing star ratings, clickable reviews, and a concise description of the product immediately, customers stay engaged and make informed shopping decisions.
Design of product page
Product Page - Collapsible Description Menu
Collapsible menus are a great way to keep web pages looking clean and organized, while giving users all the information that they need to make an informed product purchase.
Design of collapsible menu
Cart Page - Popup
We found that loading into a cart page was disruptive and broke the shopping momentum. Instead, we opted for a cart page that pop-ups and that also gives product recommendations.
Design with popup cart
Documentation
Documenting designs for engineers
To wrap up the project, we created documentation for the designs so that the clients could hire engineers to implement our designs.
Documentation we did for MASAMI
Our Impact
Customers are interacting with our design recommendations live!
Our design recommendations have been built and shipped, and are now live! It's exciting to see our work out in the real world, and being interacted on by real customers.
Graphic showing proposed changes side by side to live changes and annotations what was changed
Reflections
Things I learned as a project lead on a client project
Effective communication and a strong understanding of the project are crucial! I served as the liaison between the client and the designers. By ensuring I fully understood the client's expectations, it allowed me to translate those expectations into actionable weekly tasks for the design team.

Finding a balance between everyone’s strengths and weaknesses is essential. As the project lead, I took the time to understand each team member’s individual strengths, weaknesses, and their expectations for this project cycle. While creating weekly tasks, I occasionally allowed designers to assign themselves, giving them the flexibility to choose projects they felt comfortable with or wanted to gain more experience in. At other times, I assigned tasks directly, taking into account their past work and aspirations to ensure I was also challenging them to explore new areas.

Ensure everything worked on the project is visible, organized, and accessible. Given the project's nature, my team often worked asynchronously due to varying commitments and team members living in different countries. From the beginning I established a Notion workspace and a Figma file for both the designers and the client, providing easy access to all documentation and project work in one centralized location.
Next Steps
How we would measure our impact
When wrapping up with the project, the team discussed with the client that we would like to send out a post-survey, to the customers who filled out the initial survey, once the client finishes implementing our design changes. The team hopes to learn if there is an increased rating (scale of 1-5, 1 being poor, 5 being excellent) for the new overall visual design and layout, compared to its prior rating of 3.88.

We could also measure our impact by taking a look at the new conversion rates and seeing if there is business growth.