GOVERNING DESIGN SYSTEM
PROBLEM
Creating the component library is only a half of the road to the Design System.
Din is a popular choice on business and tech sites. It's also a good font for creating page titles with impact.
Soapgift project was born out of my childhood hobby of making soaps. The website allows users to build custom and personalized soaps in just a few clicks that can be gifted to friends, family or our loved ones.
The true magic of Soapgift comes from its unique ability to print your own picture on the soap’s top most layer!
01
San Jose, CA, USA
Research
02
User Flow
The first step was to make sure I can differentiate myself from other similar sites where one can buy personalized gifts. The largest Soapgift differentiator is the ability to print any picture on the top of the soap. After looking at many websites, it seemed clear that no one else offers similar products, which gave me a green light to continue my project.
Secondly, I wanted to validate the market place itself. I wanted to make sure people would actually buy premium, customizable soaps. Initially I gifted handmade soaps to my friends and family. I asked them questions about the product itself and how it made them feel. They were all ecstatic mostly due to the fact that the pictures were showing our common joyful moments from the past. They all said they would be interested in ordering similar project to gift to their friends. Of course friends are not the most objective people one can surround herself with so I also invited people from usertesting.com to write a review of my product. Even though many people had their own ideas on the colors of the layers or which fragrances should be used, they all liked the idea of building their own soap. After I have received all the feedback, I decided to design a prototype which gave me green light to continue my project.
Design requirements.
-
create website that will be attractive for users of any age
-
easy and instinctive navigation that allows people to easily build their own custom soap.
-
create distinguished brand for the product
I created a simple user flow that focuses on the most important aspect of the website, namely building the soap.
One can choose from many options of shapes, layers, colors and fragrances.
03
Product Name
I wanted to have logo that is easily memorable. After going through many permutations of different words, I settled for a simple yet lovely name Soapgift.
04
Iconography
Fragrance Icons
Choose your shape, picture, layer, fragrance icons
05
Wireframes
Below are high-fidelity wireframes I experimented with. Pictures 1-3 show different main page layouts whereas pictures 4-5 show the build process.
06
Main Screen
Build Soap
07
Color Palette
08
Given I wanted to convey a feeling of having fun while building soap, I chose a couple of saturated colors as the building blocks of my design.
The red color which carries so much emotion, boldness and love was perfect for the logo. The bright yellow color represents youthfulness and optimism, and the blue color symbolizes trust. Mixing all of them together creates a fun atmosphere where one wants to explore many permutations of building a soap!
Choose shape of the soap.
09
Typography
