Ragnar Candles is a young candle brand from Germany that wants to change how men look at candles. The idea is to show a lifestyle behind buying and enjoying scented candles.
The brand representatives reached out as they wished to change how candles are sold and have their eCommerce website designed by me.
I like candles, especially scented ones. They can give such a fantastic setting to a room and make it relaxing. This shop aims to make it easy for people to find sustainable and quality handmade candles.
The Candle industry has been steadily growing in the past few years, especially with people searching for organic and eco-friendly candles.
The market is now estimated at $7.1B globally. Projected to grow to $10.1B by 2028.
Due to the shift in customers' desires for more eco-friendly goods, people are having a hard time finding candles that are more sustainable.
I analyzed 3 competitor e-commerce websites in the Candle selling industry - looking at how they presented the candles, and how their ordering and checkout experience to find patterns in design and flow.
Additionally, I also did research on what their customers have to say about their solutions and how was their experience going through the ordering and checkout process.
Diptyque
Jo Malone
Yankee Candle
All three apps use quality imagery. The Jo Malone website has excellent readability of the text and offers an add-to-wishlist feature.
All websites offer free shipping and additional payable options. All e-commerce stores also offer shopping as a guest, so you don’t have to create an account to buy candles. All e-commerce stores also allow users to search for a nearby physical store.
Diptyque has a friendly multistep checkout, which makes it easy for the user to continue.
Yankee Candle's e-commerce store makes a user go to a cart page which can be a detour for the user. It could use a dropdown, as does the Jo Malone e-commerce store, or a mini cart feature that slides in from the side.
The layout of all 3 e-commerce stores is cluttered, and sometimes, navigating them cannot be easy. As a result, the readability of the Diptyque is quite tricky, which comes down to the selected font family.
Yankee Candle's e-commerce store makes a user go to a cart page which can be a detour for the user. It could use a dropdown, as does the Jo Malone e-commerce store, or a mini cart feature that slides in from the side.
The layout of all 3 e-commerce stores is cluttered; sometimes, navigating them can be difficult. As a result, the readability of the Diptyque is quite tricky, which comes down to the selected font family.
Bruno
Mark
Tamara
I conducted a survey using Google Forms among people that would be interested in buying candles that are eco-sustainable.
43 participants
43 participants
43 participants
The users decide whether to buy a candle based on the scent. However, the survey also shows the growing need for candles to be sustainable and eco-friendly.
If we combine the comments and the survey, we can see that users want transparency about ingredients.
Based on the research and collected data I created a user persona for the type of users that would be interested in shopping for candles.
After the initial research and careful analysis of the data, it was time to create user flows, informational architecture, and low-fidelity wireframes for the eCommerce shop.
With the user survey and persona created, it was time to create a page categorization through IA.
Once I had a basic IA and which pages will be in the main structure it was time to prepare a user flow diagram.
Once the IA and main flow were created I started with the next step of the process, which was to create low-fidelity wireframes for the eCommerce shop.
Once I had the initial flow, IA, and wireframes created, I started creating the main screens.
Firstly, I started by defining the fonts and colors.
I experimented with some different layouts for the homepage and the hero section. So that in the later stages of the design process, it could be A/B tested on what captures the user's attention better.
I also tested the different styles of the navigation bar so that the logo would be on the left and navigation links on the right, but ultimately decided to go with the version of the logo being in the middle.
The dark mode website was selected because I wanted to go for a more premium feel of the brand. This was also discussed with the team that runs the candle business.
I picked an 8-point grid for the project and set the margins between groups at 16, 24 and 40, depending on the relations betweend sections.
As you saw above, I had the user flow created, so I also decided to create a clickable prototype. This prototype has allowed me to test the eCommerce shop on the first group of users.
You can find the live prototype here.
The prototype includes an entire buying process, from landing on a homepage to proceeding to a shop page and viewing a single product page. From the single product page, they can go to checkout and complete the process.
I validated my prototype by conducting a usablity test with 5 users. Each of the participants was given a link to a prototype and a subset of assignments. I wanted to be sure that the users now how to get to a shop page and open a detailed preview of the selected product.
Single product page was particulary important as I included a more detailed description about ingridients as per the user survey.
The second task was for the users to add the product to cart and finish the checkout process. This was to be sure the checkout process was understandable and easy to use, while complying to the law requirements.
The test was conducted on a Zoom call, where I could explain the what the website is about, the test goals and what their their tasks will be. I also asked them questions related to the visiblity of the shop buttons and the use of the navigation to find out whether the navigation is easy enough to navigate.
The test showed that 100% of users found it easy to navigate to the shop page and open a single product page.
Also, they didn’t have any problem with completing the buying process.
However, 40% of users (2 out of 5) did find it a bit confusing not being able to click on the quick filter tabs on the shop page. This is where I had to explain that this is still just a prototype and that not all functions are available.
Because of time and budget constraints I wasn’t able to do a larger testing. So we decided that it would be a good idea to push this prototype into development as an MVP and the conduct more tests and observations on a live product. This way we could get even more data and conduct A/B testing to further improve the product.
The website was eveluated for contrast to match the AAA standards of WCAG 2.0. I also check the buttons for use on mobile devices and found out that the buttons on mobile devices are not high enough to pass the minimum button height by NN Group recommendations.
I also check the buttons for use on mobile devices and found out that the buttons on mobile devices are not high enough to pass the minimum button height by NN Group recommendations. So I changed the height from 45px to 64px.
As I accepted the project and from the first meeting with the client I loved the idea of this eCommerce shop. Especially the way they wanted the whole visual representation of the shop have a modern and premium feel to it.
During the project I managed to eveluate the market, do a user research, perfom a quick on the budget usability study (Zoom), build user flow and IA, create low fidelity wireframes, connect the screens into a working prototype and build high-fidelity UI designs.
At the end of the project I also managed to check for basic accesibility and create some corrections for mobile screens.