024_Mockup

Designing at scale a seamless, responsive online storefront for a premium fragrance startup.

Client
024

Team
UX Designer (me)
Developer (Tie Liang)

Timeline
6 weeks
(design to development)

Tools Used
Figma, Sketch

The Challenge

  • Cannabis users and smokers want to find a product that can help eliminate the malodors from their homes. Many products in the market claim to get the job done but merely mask the smells. We need a way to communicate efficacy and credibility in this space.

  • Consumers are staying inside during a worldwide pandemic. Air quality might not be the best in some homes. For 024, a lack of a physical store makes it difficult for customers to experience their products in person. We will need a way to allow sampling via the web.

  • 024 is a new startup and is looking for a branded site built from scratch. They plan to expand the business in the coming years and want a design solution that can scale.

Project Goals

  • 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.

My Approach

  • 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.

024_DesignCloseUp

01 Research

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.

  • The brand name 024 comes from its licensed technology, which can eliminate the smell of malodors such as weed and smoke (hence the reversal of "420"). The brand positions itself as a premium air care and fragrance brand, launching with its flagship candle product. 024 would like consumers to add the candles to their smoking rituals.

  • Founded by two minority women leveraging their experience working in fragrance and beauty industries, the company hopes to differentiate itself by developing a judgment-free community that eradicates the negative stigma around cannabis use. It is important to share their story on the site.

  • 024's launch date coincides with the COVID-19 pandemic, when consumers aren't able to try fragrances in person. As such, the website must first allow visitors to order wax samples to try it out at home.
024-candle

Understanding Buyer Behavior

I conducted user interviews with 8 participants who are either cannabis smokers or fragrance lovers who frequently shop online. 

Samples Are Important

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.

Influencing Purchases

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.

Finding Workarounds

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.

Product Components

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.

02 Define

Two Primary Consumer Bases

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.

The-Indulgent-Smoker

The Indulgent Smoker

  • Wants a candle that actually works at removing smoke odors. Current air fresheners are ineffective and smells like a cleaning product.

  • Would like to be able to smoke indoors without turning the room into a smelly hotbox.

The Fragrance Afficionado

  • Wants a pleasant fragrance for everyday use to relax and unwind, and smells good enough to recommend to friends.

  • Cares about natural ingredients in a product.
The-Fragrant-Afficcionado

Defining the Scope and Structure

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.

024_FeatureMap
024_SiteMap

Mapping the Path to Purchase

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.

03 Ideate

Planning for the Future

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.

Swappable Homepage Sections

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.

Adding Products and Product Lines

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.

Detailed Product Pages

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.

Custom Checkout Pages

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.

Desktop-Homepage
Desktop-Shop
Desktop-Product-Page
Desktop-Shipping-Information
Desktop-Confirmation

04 Prototype

Designing for Responsiveness

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.

024_ResponsiveDesign_Homepage

Stackable Elements

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.

Collapsible Order Summary

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.

024_ResponsiveDesign_Checkout
024_ResponsiveDesign_ProductPage-1

Pagination vs. Endless Scroll

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.

Hiding Extra Information to Save Space on Mobile Screens

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.

024_ResponsiveDesign_Shop

Visual Design Reflects Fragrances

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_ResponsiveDesign_Visual-Options

Typography

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.

Color Palette

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.

Smoke Motif

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.

05 Testing

Testing Sophisticated E-Commerce Users

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).

First Impressions Matter

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.

Free Samples Surprise & Delighted

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.

Low-Commitment Options

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.

024_AffinityMap

Priority Changes

  • It should be more obvious that sample sizes are free from the “Order a Sample.”

  • Make “Checkout as guest” more prominent. 024 is a new brand, and users are not willing to sign up for an account if they are shopping there for the first time.

  • Improve copy of Product Features so product benefit is more explicitly highlighted for easy scannability.

  • Make the "email sign up" pop up appear only after the user has scrolled down halfway on the homepage.

Quick Wins

  • Add a character limit to gift messages (physical cards that come with the package can only fit so much text).

  • Place "Payment Information" before "Billing Information" so it is clear that the latter refers to what was entered in the former.

  • Use an image of the product sample instead of the full-size image on the "Order a Sample" page so customers know what to actually expect in the mail.

Usability Test Results

  • Error-Free Rate
    100% (All users were able to complete the tasks with no errors)

  • Completion Rate
    100% (All users were able to complete the tasks)

Clarifying the Product Features

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:

  • Content strategy needs improvement. Users found it difficult to determine what the product does based on vague descriptions. Secondary research has shown that 69% of smartphone users seek clear product descriptions that easily explains the problem the product is solving. We cannot shy away from language about cannabis use as this speaks to one of our core consumer bases.

  • Reorder product features so users learn about the candles' unique properties, such as odor-elimination technology, before details like burn time.

  • Users who viewed the about page had a better understanding of 024's mission statement, but it was still unclear what the product does that other candles cannot do.

  • Iconography was removed from product features after testing with users who were more drawn to the headlines.
Desktop-About

Learnings & Next Steps

  • While product features are important, our users are visual shoppers and would first hone in on beautiful product photos before reading descriptions. This is especially important for items like candles, which often double as interior decor. As 024 continues to add more variety to their product lines, I will add more photography to the homepage to highlight other fragrances.

  • I worked very closely with both of 024's cofounders and understood how important it was for them to showcase every part of the brand they worked so hard on, from the actual fragrances to the packaging and description copy. There was a balance between preserving their vision and adapting it to user feedback. As a customer advocate, I tied every user need back to how it would help my clients achieve their business goals, whether it is making copy more explicit so users understand product benefits or making e-mail sign up messages less intrusive so users are more willing to opt in when they feel ready.

  • 024 uses Shopify as their CMS, but the platform has limitations and not necessarily the best user experience. I was in constant contact with our developer to find workarounds based on what is possible from a technological standpoint.