Allow customers to order wax samples through 024's website so they can try the product without going in to a physical location.
Create an online storefront where customers can purchase 024's flagship candles, and design for later stages when additional product lines are released.
Establish credibility through 024's brand story and clear product descriptions.
Create various hotspots throughout the site that allow users to order a sample as this is an important benefit to both the client and the customer.
Design a modular system where clients can easily add product lines and products using the Shopify CMS.
Build additional, swappable sections on the homepage so clients have a base design to work from as new content (such as press releases) roll in.
Design a comprehensive checkout process that covers special use cases such as including gift messages, referring a friend, and guest checkout.
Note: All product photography here is for placement only and awaiting final assets from client.
I began with stakeholder interviews to better understand 024's brand story and what co-founders Marlene and Gena hoped to achieve with the website during launch and beyond.
I conducted user interviews with 8 participants who are either cannabis smokers or fragrance lovers who frequently shop online.
All users expressed they will not purchase a candle without first smelling it. Product descriptions can provide some guidance but also tend to be subjective and are not always accurate.
Cannabis smokers would only purchase candles their roommates also approve the scent of. More than half of our participants have purchased candles through a friend recommendation. Additionally, all participants value reading online reviews before purchasing a product.
Without effective odor-eliminating solutions, cannabis users have taken other measures such as smoking outside and using air fresheners that smell too much like cleaning products.
Half of our participants like seeing ingredients that are natural. This is especially important for users who have developed allergic reactions to fragrance products in the past.
From the user interviews, I identified two personas based on their unique motivations to purchase a candle. Both, however, stressed the importance of sampling the product first to determine its efficacy or to test the fragrance.
Mapping out and prioritizing features allowed me to easily communicate with our developer in what needs to be created for launch, and in the near future. A site map was also created to serve as a guide to how pages are related to one another, and how the global navigation will be structured.
In creating the user flows, I considered different points of entry as 024 plans to utilize paid advertising. User research shows that ordering samples ranks high in importance, so I included multiple places where customers can place orders for them. A gifting option and friend referral was added as research showed users are influenced by recommendations from peers and have gifted or received candles in the past.
As 024 grows as a brand, I want to be able to hand off a design that anticipates future site changes. To get a clear sense of all the content that might live on the site years down the line, I created low-fidelity wireframes of key pages, establishing visual hierarchy for copy and product imagery.
The homepage is broken into sections (intro, order a sample, featured products, etc). These sections are interchangeable as content gets re-prioritized in later stages for the brand.
024 is launching with candles, but it plans to expand its product lines in the future. I designed the Shop page so the client can easily input new categories in the tabbed sub-navigation, as well as cards for additional products within each.
I've designed the product page so each section (ingredient info, recommended products, reviews) is also swappable in the event that one performs better with users or if the client wants to re-prioritize information.
While Shopify has a standard checkout template, I wanted to give my client a branded version should they decide to move to a different platform in the future.
69% of customers on Shopify are doing their shopping on mobile devices, so designing for varying screen sizes is a must. I worked closely with our developer to make sure the site looks great at various breakpoints.
Each product card and product feature on the homepage acts as an independent element that can be stacked in mobile without significant reduction of font or image sizes.
I designed the order summary as a collapsible drawer so users can reference it at any time during the checkout process, like they are able to when viewing on a desktop.
On desktops, users can browse through reviews using a standard pagination. On mobile, where swiping gestures are more prevalent, I implemented an endless scroll so users can continue the same scrolling motion if they want to see more reviews.
With a much smaller screen on mobile, I compressed the secondary navigation in our "Shop" page into a dropdown menu. Following existing e-commerce websites, I also condensed the products into two columns instead of four so important information like the product name and fragrance information is still visible. To avoid clutter, I placed additional details such as pricing, sizing, and adding to cart in a quick view modal. If users want to read reviews and learn more about ingredients, they can click on the product name or thumbnail to view the full description page.
I went through several iterations of the visual design for 024 with placeholder photography before the client approved the third option as a happy medium between the first two. The fragrances are not particularly light and sweet, as the first design would suggest, nor is it as musky as the darker design.
024's co-founders describe their brand as elevated, confident, and chill. I selected a wide sans-serif font, Syncopate, which speaks to the "confident" and "chill" attributes while still being elevated and modern without looking stuffy.
Although 024 candles are black, the client wanted to avoid using such a heavy color throughout the website. We agreed on using a teal blue the client likes. The rose gold edging used in buttons and containers is a nod to the gradient borders in their packaging.
Breaking away from too many boxy elements, I added a subtle smoke motif in backgrounds to illustrate the smoke odor-eliminating technology of the fragrances. As users scroll down on the homepage, the subtle parallax movement makes the pages less static overall.
From my initial user interviews, I found that users were spending more time browsing online as a result of the pandemic. I recruited these expert shoppers for our usability tests, as they were more familiar with e-commerce design patterns. I tested them on two tasks: purchasing a full-size product for themselves, and ordering a sample for a friend. An affinity map was created to identify common feedback. Actionable next-steps were separated into "Priority Changes" (those that significantly impacted user satisfaction) and "Quick Wins" (low effort changes that can create an overall more pleasant experience).
Most users would expect to find most information about a new brand on the homepage. When they are ready, they would first browse the "Shop" page to see all product lines before clicking into specific products.
Users were pleasantly surprised to find out they can order free samples. For premium fragrances, in particular, they must try the product before investing in a full size.
For a new brand, users like being able to checkout as a guest. They would also need to learn more about product features on the homepage before signing up for emails.
From our first round of usability tests, we determined that most users would browse the homepage to learn more about the company before going straight into the "Shop" page. To make a good first impression, we need to ensure the content being presented resonates with our audience and drives a purchasing decision. In a second round of user testing, I wanted to hear what users have to say about the site copy: