responsive candle store (brief version)

• My role & content

I was responsible for all phases of this project:

- Understand the user & opportunities
- Generating ideas
- Testing the designs
- Refining the designs

• Primary research

I conducted interviews with individuals who declared that they enjoy scented candles and own several such products at home, which they purchased themselves.

I MOST FREQUENTLY BUY SCENTED CANDLES:

Most people usually buy candles in physical stores.

I BUY SCENTED CANDLES:

Half of the respondents declared that they enjoy buying candles both for themselves and as a gift for someone.

3 MOST IMPORTANT ASPECTS OF THE CANDLE SHOP:

The most significant factors are: affordable prices and the possibility to test the fragrance before purchase. Frequently chosen preferences also included the importance of the personalization options.

I MOST FREQUENTLY BUY SCENTED CANDLES:
Most people usually buy candles in physical stores.
I BUY SCENTED CANDLES:
Half of the respondents declared that they enjoy buying candles both for themselves and as a gift for someone.
3 MOST IMPORTANT ASPECTS OF THE CANDLE SHOP:
The most significant factors are: affordable prices and the possibility to test the fragrance before purchase. Frequently chosen preferences also included the importance of the personalization options.

I MOST FREQUENTLY BUY SCENTED CANDLES:
Most people usually buy candles in physical stores.
I BUY SCENTED CANDLES:
Half of the respondents declared that they enjoy buying candles both for themselves and as a gift for someone.
3 MOST IMPORTANT ASPECTS OF THE CANDLE SHOP:
The most significant factors are: affordable prices and the possibility to test the fragrance before purchase. Frequently chosen preferences also included the importance of the personalization options.

Additional questions I asked:

What prevents you from buying scented candles online?

Lack of the ability to personally smell the fragrance (type/intensity)
Incurring additional shipping charges
Waiting for the delivery
Lack of the ability to compare several scents

Why do you prefer to buy scented candles online?

Greater variety of products
Often, online products have more favorable prices
Better access to product novelties
Browsing products and making purchases anywhere and at any time

What annoys you about online shopping?

Inconvenient website navigation
Difficulties in searching for products
Displaying unavailable products
Lack/insufficiency of product information and the need to check on other websites
Missing payment/shipping methods

• Personas

After the conversations, I identified two customer groups represented by subsequently created personas:

PROBLEM STATEMENTS:

Klara is…

an individual leading a healthy and economical lifestyle, valuing the ability to personally check the features of the products she uses before making a purchase. She needs an online store with natural, scented candles containing detailed descriptions and photos of the assortment, which she can also somehow personally test. This way, she will feel more confident in searching online for interesting scents to create a cozy atmosphere in her home.

Przemek is…

someone who enjoys surrounding himself with unique scents while working on the computer. He needs a candle store where he can easily and quickly explore the assortment and make convenient purchases wherever and whenever he wants. This way, he will receive products that will make his work more enjoyable and save time for activities that bring him true joy.

• Pain points

1. The ability to personally test the fragrance before purchase is valid
2. Customers like to have the option to compare several scents
3. Having effortless access to all pertinent product details is appreciated
4. People enjoy giving scented candles to others as a gift

• User journey map

By outlining the path of a customer ordering scented candle online, I identified several opportunities for implementation during the design of a website.

OPPORTUNITIES FOR:

Searching for an online store with scented candles
- Creating an enticing homepage that evokes emotions and associations with the presented scents
- Designing a simple navigation on the website to facilitate browsing through the available assortment
Selecting a store and browsing the assortment
- Grouping products to facilitate easy searching
- Creating a convenient search and filtering system that considers multiple aspects of the product
- Providing detailed product descriptions and including photos showcasing their appearance
- Creating an option to support users in comparing several selected products
Choosing a product
- Creating opportunities to personally check the scent (completely free options/partially paid options) and providing information about them
- Providing information about return options
- Informing about promotions
Adding the product to the cart
- Providing multiple sizes of the product with varying prices
- Allowing customization of certain aspects of the product
Purchasing process
- Creating an intuitive and clear at every stage purchasing process
- Offering to include some scent samples with shipment to facilitate future choices
- Introducing a loyalty program to reward loyal customers

Searching for an online store with scented candles
- Creating an enticing homepage that evokes emotions and associations with the presented scents
- Designing a simple navigation on the website to facilitate browsing through the available assortment
Selecting a store and browsing the assortment
- Grouping products to facilitate easy searching
- Creating a convenient search and filtering system that considers multiple aspects of the product
- Providing detailed product descriptions and including photos showcasing their appearance
- Creating an option to support users in comparing several selected products
Choosing a product
- Creating opportunities to personally check the scent (completely free options/partially paid options) and providing information about them
- Providing information about return options
- Informing about promotions
Adding the product to the cart
- Providing multiple sizes of the product with varying prices
- Allowing customization of certain aspects of the product
Purchasing process
- Creating an intuitive and clear at every stage purchasing process
- Offering to include some scent samples with shipment to facilitate future choices
- Introducing a loyalty program to reward loyal customers

Searching for an online store with scented candles
- Creating an enticing homepage that evokes emotions and associations with the presented scents
- Designing a simple navigation on the website to facilitate browsing through the available assortment
Selecting a store and browsing the assortment
- Grouping products to facilitate easy searching
- Creating a convenient search and filtering system that considers multiple aspects of the product
- Providing detailed product descriptions and including photos showcasing their appearance
- Creating an option to support users in comparing several selected products
Choosing a product
- Creating opportunities to personally check the scent (completely free options/partially paid options) and providing information about them
- Providing information about return options
- Informing about promotions
Adding the product to the cart
- Providing multiple sizes of the product with varying prices
- Allowing customization of certain aspects of the product
Purchasing process
- Creating an intuitive and clear at every stage purchasing process
- Offering to include some scent samples with shipment to facilitate future choices
- Introducing a loyalty program to reward loyal customers

The complete map is available in the:
FULL VERSION OF THIS PROJECT →

• Competitive analysis

I examined 5 online stores to see what they're good at and where they need improvement. It resulted in finding a few significant gaps and opportunities.

DIRECT COMPETITORS:

Wax Buffalo

Brooklyn Candle Studio

Homesick

Twinkle Candle

INDIRECT COMPETITOR:

Aromatech

The complete comparison is available in the:
FULL VERSION OF THIS PROJECT →

• Goal statement & generating ideas

The website will allow users:

to fully enjoy the process of buying soy candles, affecting both: those who like to experiment and those who are hesitant to spend money without personally checking the product's properties.

This will be achieved:

by providing an easy way to browse a catalog of precisely described assortment elements and compare them, while simultaneously informing consumers about options to minimize the risk of purchasing a candle without prior scent testing. Additionally, users will have access to customization options for buying scented candles as gifts.

The effectiveness will be evaluated:

by the number of successful transactions and the brief surveys asked to be filled out after the completion of the purchasing process.

Generating ideas began with the "how might we?" exercise and creating quick ideas for solutions:

1. How can I ensure easy browsing of the assortment and comparison of products that interest the customer?
2. How can I precisely describe assortment elements?
3. How can I minimize the risk of purchasing a candle without prior scent testing + inform customers about it?
4. What could be useful for people buying a scented candle as a gift?

1. How can I ensure easy browsing of the assortment and comparison of products that interest the customer?
2. How can I precisely describe assortment elements?
3. How can I minimize the risk of purchasing a candle without prior scent testing + inform customers about it?
4. What could be useful for people buying a scented candle as a gift?

3. How can I minimize the risk of purchasing a candle without prior scent testing + inform customers about it?

4. What could be useful for people buying a scented candle as a gift?

2. How can I precisely describe assortment elements?

1. How can I ensure easy browsing of the assortment and comparison of products that interest the customer?

I created an initial content plan (sitemap) for an online store.

Products:
- Product catalog
- Gift ideas (gift cards / personalization options)
- Sales
About us:
- About the store
- Risk minimalisation info: Find near store and try the scent / Exchanges and returns / Order the sample information / Choose the cheapest size
- Blog
- Contact
Search:
- Filtering
- Sorting
Profile:
- Account
- Orders
- Collections
- Loyalty program
- Settings
Cart:
- Products
- Checkout process
Footer:
- Social media links
- Sign up to the newsletter
- Help
- Services
- Legal

A more detailed sitemap is available in the:
FULL VERSION OF THIS PROJECT →

• Wireframes & solutions

I began designing screens with wireframes for both large and small devices. This approach helped me better understand responsiveness, which was a crucial aspect of the project.

MAIN PAGES

On the homepage, I wanted to showcase all the important features available in the online store.

How can I minimize the risk of purchasing a candle without prior scent testing and inform customers about it?
Important store information:
- about discounts and promotions,
- about the exchange and return policy,
- about the possibility of ordering free fragrance samples.
Introducing the user to the option of visiting physical stores and checking the scent in person.
Presentation showcasing positive user reviews.
How can I precisely describe assortment elements?
Including descriptions to product thumbnails/photos (name, fragrance type, intensity, number of reviews, and price).
Section about properties that characterize all products in the store (e.g., non-toxicity).
How can I ensure easy browsing of the assortment and comparison of products that interest the customer?
Introduction to the function of saving products in collections (e.g., "favorites") and informing about the option to create a custom candle set.
What could be useful for people buying a candle as a gift?
Carousel with photos of personalized items (such as products in different sizes, gift packaging with space for a note, personalized label on a candle, gift card).
"For the majority, the most significant factors were: affordable product prices (...)"
A brief description of the loyalty program's functionality:
- access to personalized promotions (with an option to choose product categories),
- exchanging points for discounts,
- increasing benefits with each subsequent purchase.

MAIN PAGES

On the homepage, I wanted to showcase all the important features available in the designed online store.

How can I minimize the risk of purchasing a candle without prior scent testing and inform customers about it?

Important store information:
- about discounts and promotions,
- about the exchange and return policy,
- about the possibility of ordering free fragrance samples.
Introducing the user to the option of visiting physical stores and checking the scent in person.
Presentation showcasing positive user reviews.

How can I precisely describe assortment elements?

Including descriptions to product thumbnails/photos (name, fragrance type, intensity, number of reviews, and price).
Section about properties that characterize all products in the store (e.g., non-toxicity).

How can I ensure easy browsing of the assortment and comparison of products that interest the customer?

Introduction to the function of saving products in collections (e.g., "favorites") and informing about the option to create a custom candle set.

What could be useful for people buying a candle as a gift?

Carousel with photos of personalized items (such as products in different sizes, gift packaging with space for a note, personalized label on a candle, gift card).

Research: For the majority, the most significant factors were: affordable product prices (...)

A brief description of the loyalty program's functionality:
- access to personalized promotions (with an option to choose product categories),
- exchanging points for discounts,
- increasing benefits with each subsequent purchase.

In the product catalog, I:

- ensured multi-faceted filtering and sorting options for the product assortment,
- added a feature for saving products to collections (e.g., favorites) to allow for easier access later.

On the specific product page, I:

- included a range of essential information about the product's properties, organized into tabs (general, scent type, sizes, personalization options, candle care, and safety),
- enabled users to read and post reviews,
- added a feature to locate the nearest physical store where customers can experience the fragrance in person,
- designed a personalization feature for elements like size, packaging type, and a label/gift note with custom text.

In the profile the following tabs are available:

Account, Orders, Collections, Loyalty program, Settings.

MULTI-STEP PROCESSES ON THE WEBSITE:

The Purchase Process consists of four stages:

1. It begins with selecting products.
2. Next, users can add free product samples (from a pre-saved collection or the full catalog) in the form of scented cards to their orders.
3. A summary screen then appears, showing:
- selected products and optional personalized elements,
- chosen samples,
- applied discounts (from the loyalty club),
- contact, delivery and payment details.
4. After payment, users are invited to complete a feedback survey on the shopping experience in exchange for loyalty program points.

Custom Mini-Candle Set Creation Process:

I also designed a process for creating a custom mini-candle set, which can be useful:
- for individuals who want to test several candles without paying a lot for the standard size of each product;
- for those looking for an interesting gift idea.
This feature works similarly to the selection of free fragrance samples during the order process.

More information about the described functionalities can be found in the:
FULL VERSION OF THIS PROJECT →

• Usability study

I planned and conducted two-stage usability tests. The first stage took place after designing wireframes and creating low-fidelity prototypes (both in the desktop and mobile versions).

I started by formulating research questions for my project's key user goals.

1. Browsing available products in the store:
- Do users encounter any issues while browsing and filtering products in the store?
2. Checking information about a selected product:
- Do users face any problems while searching for information about a selected product?
- Do the informational blocks provide all the essential elements, or is there anything that needs to be added?
3. Comparing products / Browsing products without the intention to buy immediately:
- Do users understand the function of adding products to a collection?
- Do users encounter any issues while using the feature to add products to a collection?
4. Customizing certain aspects of a specific product:
- Do users encounter any issues while personalizing a product (choosing packaging, labels, and gift cards)?
5. Purchase process:
- Is the purchase process easy for users, and what can be improved?
- Do users encounter any issues when choosing three free scent samples during the order placement?
6. Creating a set of mini-scented candles:
- Do users understand the option to order personalized set of mini-scented candles?
- How do users access the option to order a set of mini-scented candles?
- Do users encounter any issues while adding a set to the cart?

The research was moderated. It was conducted through a video platform. Tasks/questions from 5 categories were read out and provided in textual form:

1. Filtering products / Exploring the information:

• Choose a fall-scented candle of medium intensity from the store's assortment.
• Find more detailed information about this product.
• Is the amount of provided information sufficient? (What would you add?)

2. Understanding and using collections:

• You already know what kind of store we are testing. What do you think the option of adding products to the collection could be used for?
• Select one of the candles shown on the Homepage (in “Our top products” section) and add it to the "Favorites" collection.

3. Using product personalization options:

• Choose a candle from the store's assortment and personalize it in the following way:
- standard size,
- standard packaging,
- custom label,
- gift note.
• Add the product to the cart.

4. Shopping process / Ordering free samples:

• There is one product in the cart. Go through the purchase process, selecting three free scent samples along the way.

5. Using an option to order a custom set of mini candles:

• Find an option allowing you to order your own, personalized set of mini candles consisting of 6 products,
- then select the items
- and add this set to the cart.

Tests: round 1/2

Filtering products:
- I added price filtering (predefined ranges as well as the option to enter a custom range)
- I made the "create custom set" button more prominent.
Understanding and using collections:
Two people were hovering over the "save in collection" icon before clicking it, so I decided to add a label that appears when such action is taken.
Product personalization:
A. In connection with several additional paid customization options, half of the testers (3/6) expressed the need to review the pricing summary before adding the product to the cart, so I have added this element.
Product personalization:
B. One of the testers, after selecting the option of an additional paid feature (gift note), skipped the step of adding text. This inspired me to create additional reminders prompting users to fill in the blank fields and prevent adding the product to the cart before doing so by graying out the "All set(...)" button.
Product personalization:
C. People were surprised by the lack of an "Add to cart" button next to the product photo. Initially, I placed it only at the very bottom, after the options to choose size/quantity/personalization. I added the "Personalize and add to cart" element to make the experience more akin to what users are accustomed to in most online stores. It redirects the user to the order details edition.

More information about this testing round is available in the:
FULL VERSION OF THIS PROJECT →

Filtering products:
- I added price filtering (predefined ranges as well as the option to enter a custom range)
- I made the "create custom set" button more prominent.
Understanding and using collections:
Two people were hovering over the "save in collection" icon before clicking it, so I decided to add a label that appears when such action is taken.
Product personalization:
A. In connection with several additional paid customization options, half of the testers (3/6) expressed the need to review the pricing summary before adding the product to the cart, so I have added this element.
Product personalization:
B. One of the testers, after selecting the option of an additional paid feature (gift note), skipped the step of adding text. This inspired me to create additional reminders prompting users to fill in the blank fields and prevent adding the product to the cart before doing so by graying out the "All set(...)" button.
Product personalization:
C. People were surprised by the lack of an "Add to cart" button next to the product photo. Initially, I placed it only at the very bottom, after the options to choose size/quantity/personalization. I added the "Personalize and add to cart" element to make the experience more akin to what users are accustomed to in most online stores. It redirects the user to the order details edition.

• Design system & mockups

After the changes made to the wireframes, I proceeded to the high-fidelity screen design stage. I began by establishing certain aspects of the Design System, such as the overall character of images, the typography used, and the colors.

I opted for a minimalist, calm website appearance: lots of white and grays with touches of pastel colors. The priority was to maintain good contrast and readability.

Tests: round 2/2

After implementing the design system into the previously revised wireframes, I conducted usability tests again, and then made a few adjustments to the mockups.

For instance, in two similar processes:
- ordering free samples
- ordering a custom set of mini candles
I changed the selected items tab to a sticky element, remaining at the top of the screen while scrolling.

More information about this testing round is available in the:
FULL VERSION OF THIS PROJECT →

• Prototypes

Below, you can review the final prototypes in both desktop and mobile versions:

• Project development

The next steps involve: launching the site, continuous monitoring   of KPIs, analyzing user feedback, conducting regular usability tests,   and responding to changing customer needs through various iterations.

Examples of valid KPI's

Effectiveness of product filtering
Number of purchases generated from filtered results compared to purchases not preceded by filtering
Conversion of purchases from collection products
Percentage of purchases generated by users from products saved in their collections
Customer retention rate with the loyalty program
Percentage of customers using the loyalty program and making subsequent purchases
Utilization rate of discounts in the loyalty program
Percentage of customers utilizing offered personalized discounts
Product personalization selection rate
Percentage of orders containing personalized elements, e.g., gift packaging or a custom message on glass
Popularity level of custom mini-candle sets
Number of orders containing mini-candle sets compared to orders of regular products
Utilization rate of choosing three free samples when placing an order
Percentage of orders where users opted to include free samples
Purchases initiated by ordering a free samples
Percentage of orders containing full-size products after prior ordering of free samples
Purchase process satisfaction index
Collection and analysis of customer opinions regarding the process from adding a product to the cart to completing the order

Thank you

for your time :)

A longer, full project presentation is available:

OPEN →