UX design, UI Design, Branding
Figma, Photoshop, Notion, Maze
4 Days
3 UX Designers
Problem
All Soap Soop sales have been through flea markets, B2B, and social media channels. But this approach was quickly becoming time-consuming as well as an obstacle for scaling production and product diversification.
Goals
Redesign Soap Soop's current website and add an online shop that aligns with the brand's values and goals of sales automation.
This solution will successfully simplify the sales process and create more revenue.
We scheduled a ZOOM meeting with Hanna to know more about Soap Soop and her requirements.
We found out that her customers seem mainly drawn towards her soaps because of their design and exquisite color palette selections.
Hanna enjoys talking to her customers and has gotten to know them really well, she realized that they want soaps of higher quality, so she decided to invest in better ingredients, and this led to having to raise her prices.
She sells two sizes of soap for 7€ and 9€ each.
Production costs have increased since the implementation of better ingredients
Product pipeline:
- Pet soaps
- Customized color soaps
- Gift boxes for special occasions
Stakeholder possesses a professional handmade soap certificate
Stakeholder plans on offering international shipping
Stakeholder wishes to build a mailing list to be more connected to her customers
Stakeholder sells only at flea markets, B2B, and social media channels
It was also important for us to know what the handmade soap industry was doing, and for that I conducted a competitor analysis.
I searched for direct competitors in Germany, focusing in Berlin and for international brands that are already successful.
I discovered that all brands have a wide price range going from 4 EUR to 200 EUR, leading us to explore the "Gift Sets" feature in our survey.
"Binu Binu" was the competitor that seemed the most direct one in terms of visually appealing products, brand vision and origin, with both founders being Korean. This finding made me realize that an extra secondary research about Korean aesthetic culture was necessary, which I will share in the next steps.
While the rest of the competitors have a few interaction and accessibility issues, two of them have been featured in magazines like Vogue, Elle, and Glamour. It was then decided to add a "Press" page, to drive traffic and generate trust among users.
Having gathered our stakeholder’s and competitor’s data, it was time to create a survey to understand our customers and their relationship with the products Soap Soop offers.
The survey consisted of 11 questions both quantitative and qualitative and gave us some great insights from 23 participants.
The survey threw a new problem to our process:
Users wouldn't invest more than 5 EUR on handmade soaps.
Even though Soap Soop's prices fall into this price point, its competitors have earnings that are 150% higher per soap.
78% of the participants said that aroma and ingredients are some of the aspects they consider important when buying handmade soaps, and it was clear to me that our design should communicate that, while simultaneously evoking feelings of relaxation with the help of visual aids.
I am a big advocate of considering research papers into my UX process. And as I previously found out in our Competitor's Analysis, learning about the Korean Aesthetic Culture was imperative.
The paper, published by Yoo Jin Kwon and Yhe Young Lee, talks about Naturalism and how it influences Korean culture.
In the left picture is the framework that identifies four aesthetic categories of naturalism found in Korean art. The four characteristics represent different ways in which Koreans have interpreted naturalism.
I will later use this diagram to position our UI approach.
The horizontal axis represents the attitude toward the use of formal elements (e.g. color, line, form, and pattern): from an expressive to reserved manner. Artifacts created in an expressive style are distinguished by their intricate and abundant use of design elements, but those created in a reserved manner are simpler in appearance.
The vertical axis represents the attitude toward the use of stylistic rules: from an orderly to free presentation of symbolism and rules. Artifacts created in an orderly way obey elaborate systems of symbolism and rules of the culture, but those created in a free style are more spontaneous in terms of their design and there is a lot of room for improvisation.
Naturalistic beauty values pleasant simplicity without much intention to look perfect.
Koreans have favored white clothes and ceramics for centuries and generally liked low chroma colors. Low chroma colors are used in various types of artifacts. For example, Goryeo celadon of the Goryeo period (918–1392), is named after its translucent pale green color.
Naturalism in Korean design is translated into gentle and organic curves, natural fibers, and depiction of natural objects such as colorful flowers.
Research paper:
https://doi.org/10.1080/17569370.2015.1045348
-poster-00001.jpg)
A persona was built based on the data collected to help drive decision making and keep the product focused on solving users pain points, frustrations, and goals.
Since all competitors have prices that go as up as 180 EUR, we focused on Gift Sets in order to increase revenue. Because our stakeholder also does B2B, we saw the possibility of a "Partnerships" section as a low-hanging fruit and made our persona a "Wedding Planner".
Problem Statement
The independent Berlin brand Soap Soop currently does not have the integration of an online store within its website which could potentially mean a loss of customers.
Moreover, the upgrade to higher quality ingredients meant that a price increase was necessary, but users are hesitant of investing more than 5 EUR on artisan handmade soaps.
Hypothesis Statement
We believe that redesigning Soap Soop's current website and adding an online shop that aligns with the brand's values and goals of sales automation will result in an increase of online sales.
We believe that a more elegant and luxurious design will persuade users to invest in Soap Soop's products.
We will know we are right after the first quarter of the shop's launch, when there's enough record of sales, new partnerships, and newsletter subscriptions.
At this point, we have now a clear view of what the initial features for our MVP should be.
The list below gathers main features, design insights and possible add-ons. These were gathered through our research and brainstorming.
A simple information structure makes it easy to navigate and move through tasks.
I was in charge of both the sitemap and user flow. In the user flow, I considered different possible actions for our user behavior and marked them with numbers.
Since the due date for our project was getting closer and I can design fast, I jumped right into the Homepage Hi-fi, while my teammates sketched the "Product" page and brainstormed some great interactions. Once their sketch was done, we adapted it to the Homepage design.
For the Hifi, I created a mood board considering design insights from the research.
It shows a microscopic closeup of oils, forest view, body parts. I intentionally cropped the pictures and focused solely on skin, to direct focus purely on the products.
63% of users said they wouldn't pay more than 5€ for handmade soaps, so in order to persuade buyers, we focused on a website that evokes feelings like:
This is the final MVP design made by our team.
Scroll inside the laptop screen to see how it would look like.
User testing was conducted to determine what improvements should be made and identify new ideas to satisfy user expectations, needs, and desires. Here are the insights we got:
Working on this project was fun, since all the team liked Soap Soop's products.
I particularly enjoyed diving into the Korean culture and see how that data influenced the final MVP.
There are still some things that will have to be worked on before the development phase, such as creating more user personas and flows, as well as more testing, it would be ideal to have a 50/50 gender group (female/males).
It would also be interesting testing the LGBT+ community as their wants and needs may vary.
The next steps would be:
• Iterate on test findings
• Create more user personas and flows
• Add a input field for discount codes
• Create a "Partnerships" and "Profile" page
• Add a "From" and "To" input field for further customization
• Add a heat map to track user activity
• Gather more test insights from males
It only takes a few minutes to kick off a project.
Fill in the details below and we’ll be in touch.
%402x.svg)