June 2022 - August 2022

Milklady Soap Co.

Tool: Figma

Roles: Graphic Designer, UX/UI, Illustrator, Content Writer

svg image

Overview

As a team in Interaction Design Methods course, We have engaged in a major interaction design project with an external partner/client.

MilkLady Soap is a one woman business that produces handcraft soap. The company creates all-natural soaps that are safe for those with skin conditions by using carefully selected eco-friendly ingredients and natural colourants. Milklady also ensures that all of the ingredients are ethically sourced, by supporting local businesses and suppliers who do not extract materials via child labour or palm tree deforestation.

I have examined the concepts of design practice, implemented user experience related design methods for the Milklady Soap Company to learn and understand the needs of the people for whom we design. These methods include design ethnography, personas, storyboarding, scenarios, journey frameworks, participatory workshops, and concept generation.

milklady mockup opening images

Goals

The goal was to create a simple user interactive website which allows online shoppers to easily purchase Milklady's products, explore their product, and company's mission.

My goal for this project was to eliminate the burden of online shopping for new customers by creating a more simple, informative, and interactive experience. This would allow customers to be more confident in their online purchases.

Churros illustration

The Process

Skills: UX + UI, Graphic & illustration design, content-writing.

Posters

Introducing MilkLady Soap Company and Collecting Data through design ethnography method.

I was in charge of content writing, organizing poster layout by visualizing with different typographics, colour palettes and illustration created by myself on Figma.

Introducing Milklady though posters
Ethnography Poster for Milklady

Personas

Examining and exploring user goals and needs by creating personas.

persona1
persona2
persona3

User Journey Mapping

Visualizing the process and experience of Milklady's customers when purchasing Milklady's products.

user journey map 1
user journey map 2

Storyboarding

Storyboarding as a tool to visually predict and explore Milklady's customers experience with the products.

StoryBoarding user process

Final Concept & Storyboarding

As a group, we have decided to improve on Milklady's website by creating a soap quiz and a product description page as new features for users to easily explore and learn about Milklady's products.

StoryBoarding user process

Final Prototype

Screenshot of Milklady's home, soap quiz feature and product description pages. High fidelity mockup prototype with brand guideline, illustrations and images are implemented.

Final Prototype of two concepts

Additional Graphic Design & illustrations

To ensure all elements of the designs follow the same design language, I developed a branding guideline by considering icons, shape design and colour palette.

Additional Graphic and illustrations Created by myself

Reflection

Interaction and user experience design requires design decisions to be responsive to and inclusive of the stakeholders in the design process. This course allowed me to explore and learn various range of relevant techniques and methods that will help me in the future. Overall, learning reflective practice as mode of understanding the design process allowed myself to broaden my knowledge in UX/UI and Graphic Design.

This was a large-scale project in a short time frame. Helping a small business improve allowed me to adapt quickly to interface changes, develop my design process and Graphic skills. It allowed me think more deeply in both company and customers' experience with strong branding.

Prototype & Graphics

Click here to see in detail!

Visit Milklady
bubble illustrations