Contemporary Building

Fragrance & Light

The responsive website is for a company that makes and sells candles online. Their products are targeted to people that want decorative or scented candles for their home or are looking for a personalized gift.

The final solution for the website showcases the different categories of candles and provides easy ways to match the users with the product they are looking for. Facilitates an easy and enjoyable candle customization flow, presents gift wrapping options. Offers an overall pleasant experience for users, so they want to come back.

Type of Project

Responsive
Online Store

Role

UX/UI Designer
wireframing, low and high-fidelity prototyping, design system, usability study

Date

Oct 2022 - Nov 2022

Home page design

Understanding Users Needs

In order to emphasize with the users I conducted interviews and created empathy maps to better understand target users and their needs.

The research has reveled that users usually spend a lot of time browsing the list of candles and feel overwhelmed by the large number of options and sometimes give up on purchasing any. Users want the products to be grouped by theme, event or holidays, and want easier ways to find candles that are suitable for them and an easier navigation of the website in general. Some users mentioned the need for more candle customization options and also wanted a gift wrapping option.

User Pain Points: Customization, Navigation, Scent Information, Product Size

Initial solutions based on user pain points

Based on the finding that users find it hard to pick a product and want filters and product categories based on event, occasion, season, theme, etc. it was decided to provide two options for navigation. First option is a traditional shop page that has the list of all products with filter option. The second one is a quiz that, after answering a quick round of questions, aims to match the users directly with the exact candles that they are looking for, and thus skipping the navigation and browsing all together.

Shop Page Wireframe Quiz Page Wireframe

Based on the insights that users want more customization options like scent, color, message and a gift wrapping option, a dedicated section was designed.

Based on the other findings from the user research, users want more information about the scented candles, the mood and the role of ingredients and also the exact size of the candle to make their choice. So, these were taken into consideration when designing the product details page and all the necessary information was included.

Candle Customization Modal Wireframe Product Details Page Wireframe

Iterating on designs

The findings from the usability study conducted on low-fidelity prototype helped guide the design process to the next stage, high-fidelity prototype, by refining the design and implementing necessary adjustments.

Based on the insight from the usability study that users couldn’t see the role of saved customizations and didn’t know how to add the product to the cart, I simplified the process of adding the candle to the cart, by adding it as the last step of customization. For that, I have also changed the customization flow from dropdowns that can be expanded in random order, to clear ordered steps, with status indication.

The Candle Customization Flow: Before and After

Based on the other insight that users were unable to quickly locate the buttons that were bellow the fold, I have repositioned the buttons to the top and right-bottom, in order to make them immediately visible and ensure that users are able to easily navigate the website and complete the main user flow.

The Checkout Flow: Before and After, shows how the buttons were repositioned so they could be above the fold

Final Solution

Home page design - desktop and phone version Style Guide Candle in a jar Quiz screens - desktop version Phone vesion of the quiz screen and the side menu design on phone screen Shop and Product Details pages - desktop version Candle customization flow Shop and Product Details pages - phone version Checkout flow - desktop version Desktop and phone version of the designs of the Cart screen Desktop and phone version of the designs of the Checkout screens About page design - phone version About page design - desktop version

Takeaways

Working on this project helped me learn that even a small design change can have a great impact on the usability and it is essential to keep in mind the users needs, when coming up with design ideas and solutions.

Other Projects

01
Landing Page Redesign

Explicit-Promotions

Landing Page for a company that offers promotion campaigns for musicians

Project 4 thumbnail - landing page presented on a laptop screen Figma and Webflow
03
Mobile App

Sandwich Shop

Menu viewing and online ordering app for a sandwich shop

Project 2 thumbnail - the app displayed on the screens of two phones Figma
04
Responsive Website Portfolio

Angle-Architecture

Projects showcase portfolio website for an architecture firm

Project 1 thumbnail - the home page of the website presented on a laptop screen Figma And Webflow

Get In Touch

iuliana.lupu.dev@gmail