Tradedoubler 3241805

Candle Dream

UX-UI design case study

Role

UX-UI designer

Project goal

The project goal is to provide the users a seamless experience when they visit the website and make it easy for users to buy candles for their own needs or as a gift.

Target user

The target user of this website is mainly women and few men that are interested in making gifts for their wives. We see a huge increase in demand by men as well for some special fragrance like whisky-cognac.

Project overview

Challenges

The challenges for this project is that it adresses a specific user type, a big majority of the user are women, it could be men that want to offer the product as a gift but not for them. The target user for this kind of product is not men in this case but they can buy the product.

The time line was very short that was another challenge to deal with.

Understand

Research

We conducted user research and received feedback from our users that we included in our personas. For example Luther an architect wants to buy candles for him or his customers because he loves to set up a cosy place in all his work and for his home. The research revealed that when you buy candles from the net you can’t smell it so we have to include a strong description of the product in the homepage or in the product description. Luther would like to see a good description that describes best the product he sees on the webpage.

Problem statement

Currently we don’t have a website. We are building the website from scratch. We will test and iterate as much as we can to end up with the best user experience for our website.

Insights learned

We learned from our users that when they search, it is difficult to find the product easily so we decided to add filters at the beginning of the product page to filter the products as the range is not wide and we can simply filter the products by choosing the best options.

They also found that sometimes the product doesn’t have the right description so they end up buying a fragrance that was not the one expected. So we decided on the product page to add more description when you choose the product. 

User personas

user persona
user persona
problem statement
problem statement

Ideation and initial design ideas

Crazy 8

This crazy 8 is showing the design thinking process in which I had to think in different kind of layout for our homepage and product pages for the website.

I had to think of a layout adapted to desktop screens and mobile screens.

wireframes

Wireframes

Low fidelity

In this section I added the homepage wireframe for the desktop and mobile version.

For the full prototype you will have the link in another section below.

Desktop version

wireframe desktop

Mobile version

wireframe mobile

High fidelity

In this section this is the high fidelity mockup of the homepage for the desktop and mobile version.

For the full prototype with the other pages you will have the link in another section below.

Desktop version

wireframe hifi

Mobile version

homepage mobile hifi

User testing

The biggest takeaway form the usability study is that we had to improve the navigation and the user flow some links were missing. It was updated in the second iteration.

I came to these conclusions based on the the KPI’s I used here in this case it was the completion rate for this specific user flow. The order page, confirmation and checkout page.

  • Study type: unmoderated usability study for the website.
  • Location: remote usability study
  • Participants: 5 participants each completing the usability study
  • Length: each session duration is 5-10 minutes based on a list of prompts
  • Results: users had issues with the user flow, some users wanted to go back to the homepage directly from the header and the navigation bar, I had to link home with the homepage in the header. The user liked the navigation and the use of the website, the users liked the color palette. 

UI design

Abril Fatface

Aa

Logo 44 px

 

Lato

Aa

Heading 1 50px

Heading 2 40px

Heading 3 27px

Text 25px

Text 15px

color palette

Prototype

To view the final prototype with the main userflow the link is here

Mockup design

design mockup

Conclusion

This project was interesting because the user is well defined but can vary depending on the product needs it could be for a personal use or for a gift, meaning that the usage is not the same depending on who is the end user.

In this challenging period we have to be flexible in termes of tools because testing was made in distance we have to be clear on the instructions for the usability study.

This version is only the first version until the next iteration and the next user feedback. This user flow was tested and works well. It has to be refined to be improved. The next step is to design another user flow and iterate on the product. It could be also to refine the existing user flow to improve it.