milkLady website redesign
Re-creating an improved online commerce experience for MilkLady Soap's customers.
project overview
MilkLady Soap Co. is a small local business based in Vancouver that produces handmade soaps. Using carefully selected eco-friendly ingredients and natural colourants, Milklady Soap makes natural soaps that are safe for the skin. As part of the 'Interaction Design Method‘ course, our team developed a design proposal to enhance the user experience for Milklady Soap Co.
ROLE
UX Researcher / Designer
TEAM
2 UX Researchers
2 UX Copywriters
1 Graphic Designer
TOOLS
Figma, Google Form
TIMELINE
May - August 22
OUTCOME
Design Proposal, Video
empathize: understanding stakeholders
The team initially interviewed our client to gain insights into her business, challenges, and goals, which helped define the project direction. Next, I collaborated with another UX researcher to conduct five customer interviews, gathering positive feedback but limited understanding of the products' environmental and societal benefits.
01 INTERVIEW WITH OUR CLIENT
- ▶︎ Conducted a client interview to understand her business, challenges, and goals
- ▶︎ Gained valuable insights into her struggles to define the project direction
02 UNDERSTANDING EXISTING CUSTOMERS
- ▶︎ Conducted an online survey, uncovering 5 valuable insights
- ▶︎ Discovered positive feedback from most participants
- ▶︎ Identified a gap in understanding the nature-friendly aspects and their benefits to the environment, society, and customers
03 UNDERSTANDING POTENTIAL CUSTOMERS
- ▶︎ Interviewed three online commerce users to explore their experience as new customers
- ▶︎ Collected insights on usability challenges and design gaps in the existing website
- ▶︎ Identified missing product details and key information gaps on social media
empathize: persona development
Our team developed three user personas to help the owner better understand customer needs and goals, highlighting key design opportunities based on the client and ethnography posters we previously created. Together with two other team members, I identified the hypothetical user's actions, feelings, frustrations, and design opportunities.
01 A CLIENT PERSONA
- ▶︎ Highlights the client's primary focus on packaging design at the time
02 EXISTING CUSTOMER PERSONA
- ▶︎ Highlights the need for clearer communication of product and ingredient information
03 POTENTIAL CUSTOMER PERSONA
- ▶︎ Highlights feedback from potential customers on their online commerce experience with MilkLady Soap website
define: user journeys of customer
After I conducting two additional interviews, we identified issues with the Milklady Soap website, including an overwhelming product list and the absence of review sections. Using the developed personas, we then created user journey maps that highlighted actions, feelings, and frustrations. I contributed to the descriptions, visuals, and content, ensuring alignment with the brand’s identity and project goals.
01 PURCHASING A PRODUCT ONLINE
- ▶︎ The information provided is limited and insufficient, even though customers are eager to learn about the business, its mission, and the products and the reviews from other customers
02 VISITING A IN-PERSON STORE
- ▶︎ The packaging only features minimal information, including the logo, product name, and basic contact details
define: design opportunity identification
IDENTIFIED CHALLENGES
- ▶︎ client's lack of confidence in design and technology hinders marketing efforts
- ▶︎ Customers are unaware of the business's mission and the ethical, natural ingredients used
- ▶︎ Insufficient information causes hesitation in customer purchases
DESIGN OPPORTUNITIES
- ▶︎ Provide guidance and support in design and technology to build the client's confidence
- ▶︎ Communicate the brand's mission and values to emphasize its ethical, nature-friendly practices
- ▶︎ Enhance information for improved customer understanding and decision-making
ideate: storyboarding design concepts
Our team proposed three design concepts based on the identified opportunities and created storyboards to visualize each concept. I contributed illustrations for the packaging and mission concepts, while also refining the website design content to enhance clarity.
01 PACKAGING REDESIGN
- ▶︎ Enhance product information by improving existing designs to present essential details in a more accessible and perceptible way
02 CLEARER COMMUNICATION ON BRAND'S MISSION & VALUES
- ▶︎ Promote Milklady Soap's commitment to nature-friendliness and its suitability for all skin types, reflecting the brand's mission and values
03 IMPROVING ONLINE COMMERCE EXPERIENCE
- ▶︎ Enhance existing designs to present necessary information in a more easily perceivable manner, integrating design and tech support
ideate: participatory workshop with client
We worked closely with our client through a participatory workshop to refine design concepts and align them with her business values. I co-facilitated the session, while also participating as a note-taker (board-person) and photographer.
- ▶︎ Facilitated activities such as brainstorming, idea ranking, and sketching solutions
- ▶︎ Suggested Ice-breaker, Keywords, Matrix, and Crazy 8s to guide the workshop during preparation
- ▶︎ Gained a clearer understanding of the target audience’s age range and peak sales periods
After the workshop, our team reframed our design focus to enhance the online experience, particularly through the redesign of the Milklady Soap website.
how might we ...
"enhance customers' online experience where the senses are limited while physical senses (scent and skin reaction) matter“?
ideate: refining design concepts
01 PRODUCT DESCRIPTION PAGE REDESIGN
- ▶︎ Simplified layout with clearer product information and enhanced user flow to improve customer understanding and purchasing decisions
02 SOAP QUIZ FOR IMPROVED USER ENGAGEMENT
- ▶︎ Interactive tool guiding new customers to select products based on their preferences and skin type, encouraging engagement and easing decision-making
design: milklady soap website redesign
Our team decided to combine two final design concepts by redesigning the website's core pages and adding a soap quiz. We then created a design proposal that included mockups, a prototype, a detailed report, and a video showcasing the user journey as the final deliverables. I played an active role in designing the mockups and prototype for Milklady Soap's website and contributed to the slides for the final project presentation.
how did our client incorporate our feedback?
Our client incorporated some of our feedback by adding a customer review section to each product description page, which was part of our design proposal. While the limitations of her website builder prevented full implementation of the design solution, this addition allows new customers to access authentic reviews from real users, enhancing the online shopping experience for both customers and the business.
reflection
DESIGNING FOR A REAL CLIENT
The MilkLady Soap project provided me with valuable hands-on experience in creating user personas, mapping user journeys, and conducting a participatory workshop. Understanding the benefits of these methods deepened my growing passion for UX/UI design.
One of the most rewarding aspects of this project was delivering a design proposal and an interactive prototype to our client, which helped visualize improvements to her website. Through this process, we identified key pain points, including the lack of a customer review section. Our proposed solution inspired the client to implement this feature, enhancing transparency and trust for potential buyers.
The project also emphasized the importance of teamwork, and I am grateful to have worked with a dedicated team, each contributing unique skills. This experience reinforced the realization that while great teams are ideal, they are not always easy to form. Moving forward, I aim to be an active, responsible asset in fostering a supportive and collaborative environment.
achievements
- ▶︎ Conducted an interview with client, a survey with 5 participants, and a workshop with the client to gather insights
- ▶︎ Developed 3 personas , 2 user journeys , and 5 storyboards to guide design iterations
- ▶︎ Proposed a website design solution based on client and customer needs
- ▶︎ Created mockups and a prototype using Figma
- ▶︎ Delivered a user-centered design aligning with both business goals and customer needs
