UI Design: Daria Day, designing an e-commerce jewelry website.
An overview of my design process while creating an e-commerce website optimized for desktop, for my client Daria Day.
The Opportunity
For a client project, I rebranded and designed an e-commerce website that can support the user experience and digital marketing strategy.
My responsibilities as the UI designer for this project was to understand our main customers, and create a design language to reflect a mood that entices them to buy our products. This includes colour, movement, shape and space. I also was responsible for creating a UI library for the website. I designed a landing page to promote hype for this new product launch. For this 3 week design sprint, I worked alongside Ali Angco who was the UX designer. She was responsible for understanding our main customers, conducting research, developing personas, designing the mid-fidelity screens, and testing if the website layout is appropriate for our target audience.
The Website
Daria Day is an online gemstone jewelry business who sells beautiful, powerful, and handcrafted yoga inspired, boho chic jewelry. Their gemstones are sourced from the K2 mountains of Northern Pakistan and they are made by the local women. Daria Day offers powerful energy to its customers while giving the artisans in Pakistan a livelihood. The people who shop on Daria Day are mostly crystal geeks or those who wear crystals for their healing properties. Others simply buy the jewelry for fashion, or to support the livelihood of the artisans in the K2 mountains, though they are not the main consumers of Daria Day.
The Tools
Sketch, Adobe Illustrator, Invision.
Research
Surveys, Interviews, Contextual Inquiry
To better understand who our customers are, we needed to conduct some research.
One of the ways to do this was to send out surveys. We send out these surveys to online witch, new age and metaphysical groups on reddit, facebook and instagram and also on my personal facebook timeline, as I have many friends who are crystal geeks. Some of the questions we asked our research participants were:
- How did you first hear about crystals?
- Why do you use them?
- Do you like to wear them as jewelry? If yes, why?
- What are your thoughts on ethical sourced jewelry?
We had a great turnout of 39 survey responses. Ali also conducted 4 interviews with four research participants who either use healing crystals as jewelry or who has bought products from Daria Day’s parent company. Through our research we got a better understanding of who a Daria Day customer is and their potential needs.
Personas & User Stories
We summarized our findings through our research and created two customer personas. We will then base our future UI and UX designs for the primary needs of these two customers. We named them Clare and Tanya.
Planning
After I discovered which kind of customer I will be designing for, I moved onward to the beginning stages of UI design while my partner Ali, started creating low fidelity and mid fidelity screens for the website.
Inception Sheet
A design inception sheet is one of the first steps in the design process. It helps direct me towards a look and a feel of a design by first figuring outer main WHY. Then moving outward of the circle, we then discover the mood we want our customer to feel, then onward creating a design language to visual imply that mood. This includes movement, shape, colour and space.
To understand kind of mood we want our customers to feel while navigating our website, we first need to define the primary need of our customers. The WHY in this instance would be: Effectively sell ethically made, high quality gemstone jewelry through e-commerce to enhance purchasers overall mood and wellness while wearing our products.
People want to feel calm, peaceful, spiritual, grounding etc. when they buy our product. They also want to know where their gemstones are coming from, therefore we need to create a sense of trust. We then want to use calming colours such as blue, and greens that promote nature, wellness, trust and prosperity. Since the stones sold are ethically sourced and high quality, the jewelry has a higher price tag so we wanted to also portray that high end, editorial feel. White negative space will give a serine, open feel to the overall website, also making the site look high fashion and editorial.
Mood boards
The next stage in this design process was to create a mood board. A mood board is an arrangement of images, materials, pieces of text, etc. intended to evoke or project a particular style or concept. I created 3 to show my client.
For the first mood board, Mystic Woodlands, I went with a mysterious and witchy vibe. The use of dark tones such as black, greys and purples amplify the mysteriousness shown in these images. I really wanted this one to connect to the dark Wicca aesthetic, which has been becoming popular on instagram and witch fashion such as Killstar.com. Images of crystals, fruit, plants and forest establishes that the products are natural and connected with nature. However, this look was very simular to Daria Day’s parent company with the dark images and deep colours. They wanted a fresh look that promoted wellness more than dark and edgy.
For the second mood board, that I named Urban Avocado, I wanted to stray away from dark colours and wanted lots of white space so the customer can really focus their eyes on the quality of the product. I wanted to incorporate some blues to promote calmness and also some green to promote wellness, trust and prosperity but also want to have some fun with pops of pink here and there. Natural light beaming through the window and images of green plants and avocados, give off that mood of being connected to nature. I incorporated both geometric, for structure and grounding, and rounded shapes, to promote calmness, within this mood board. we were very close on the sense of mood and feel we wanted for our targeted audience, however the client did not choose this mood board because they wanted less of the bright pops of colour and wanted to stick to natural tones.
The third and winning mood board, we named Modern Rustic. This mood board had all of the same characteristics as mood board one but without bright pops of colour. When you look at the images on this board, you feel at peace, calm, one with the earth. You feel a sense of trust with the hints of green. Images of the ocean waves, negative white space, and spiral shapes give off tranquil vibes. Adding accents of neutral browns complements the green and blue and contrasts with the white space. The brown also gives off a modern boho look.
The Logo
One of my biggest challenges designing for Daria Day was the logo. I was really fixed on wanting to design a sacred geometric shape, something that is used in crystal energy. I also wanted to design a shape that was simple but most sacred geometric shapes are pretty complicated.
Here are the first iterations of the logo design:
We felt that these logos, though they were fun to create, did not match the brand. They were either too kitschy for what the brand was going for, or too complicated for a logo design.
Since Daria Day’s jewelry is hand crafted, someone brought the idea to me of having a hand crafted signature with a hand drawn sun to reflect the word day in “Daria Day”. I borrowed an Ipad with a stylist and spent half a day trying to hand draw a logo but then realized my skills apply only to vector pen based drawings. I had to go back to the drawing board once again, this time back on Illustrator, using the pen tool.
My clients wanted something simular to the flower from their parent company, zendagi. I found the flower, though beautiful, was a bit too complicated as a logo, so I used this flower as an inspiration and created a simplified version for Daria Day. I made a few different iterations.
Our clients from previous experience, did not want a script font because it was hard to read. So we decided on narrowing it down to the 3 on the bottom row. We picked a serif font, for a sophisticated and high end look, while the flower represents wellness and nature.
The flower in the logo also draws inspiration from anise, which is grown in South Asia. This symbolism pays a homage to where the jewelry is mined and made, in the K2 mountains. I cleaned up the logo and finished the final logo design.
Style Tile
The next step in my process was to design a style tile. A style tile is used when a mood board is too vague but a final design is too detailed. They are a design deliverable consisting of fonts, colours and interface elements that communicate the essence of a visual brand for the web. For my style tile I used possible logos, symbols, buttons, fonts and images that may be used for my final design.
The UI Library
To keep consistency throughout the website, the use of circles were used for icons. Only blue and green were used for iconography, again to stick with consistency. Avenir, a clean, sans-serif, popularly used with editorial publications, were used as the main typeface. Filled rectangles are used for the default state of the buttons used on the website. Lastly, the use of thin strokes were used in the iconography for a delicate, feminine look.
Screenshots
One cool filter we designed for the Daria Day website was Find Your Gemstone. It’s a fun and personalized filter that helps the user find a gemstone product based on a kind of energy they were looking for. The filter then pushes left onto a product page with all the products that help you with that type of energy. In our prototype, the example we used was “looking for bracelets that can help with calmness.”
Summary and setbacks
This is the very first e-commerce website that I had to design and it was my first client project at RED Academy so I had to run decisions not only on my own but also through other people. There were hard deadlines and I wish we were able to test the hi fidelity screens within the sprint so I can better understand how users reacted to the design language on the website. The website was not ready to go live, however we were able to solve some user problems within the UX design and created a solid website foundation. I believe we were able to successfully create beautiful brand visuals for a company that previously had none. The clients were very happy with our finished product.
Prototype
Our prototype is optimized for desktop. To view the prototype on Invision click Here.
