Custom Shopify Fragrance eCommerce

Creative Director (Art + Design) & Shopify Developer, 2018

🗒 Overview

The Fragrances Group is an American distributor of European fragrance lines with retail partners like Bloomingdale’s, Bergdorf Goodman and Barneys. It also serves as a sole distributor for Christian Siriano, Thalia Sodi and Banana Republic fragrances.

🖼 Moodboard: Deep stages of relaxation

car in the desert
silk sheets
top hiking view
woman traveling
the ocean

🚀 Background

I got on board with the project to redesign their existing eCommerce that was built by their marketing team. I laid out their User Journey first but because of the short timeline for their launch day, I had to skimp on the wireframe process, create all the User Interface (UI) mockups for all pages. I needed to make sure they were getting what they wanted from it.

✍ Roboto / Roboto Condensed By Christian Robertson

🍬 Palette

🍭 Gradient

🗺 Customer journey

🛠 Development

It just so happened that I also coded the entire eCommerce system after their in-house web developer quit the company, only 2 weeks into the project.

  • The front-end was developed locally using the Shopify slate toolkit (deprecated in January 2020), written in liquid syntax script.
  • Cross-device responsiveness.
  • Google's tag manager was used to target dead links and measure traffic.
  • Hotjar was used to analyse the website headmaps and their behaviour, paired with Google Analytics to compare the data being collected for A/B testing results.

🛠 Sitemap

🏠 Landing Page

A minimal approach to every component, focused on getting users focused on each section, which allows them to read and explore the product in a calm and contemplative way.

Mockup Landing Page H1

UI Design version H01

Mockup Landing Page H2

UI Design version H02

👁 Product Listing Pages (PLPs)

Making the user interface (UI) + animation for the fragrance finder section was one of my favorite parts of the project. Collaborating with their in house fashion photographer Beheshteh Zebhi on creating a collection of images that evoke a sense of smell as a guide for shoppers to find their signature scent.

For the rest of the line (Home Fragrances, Body Washes, Bath & Body, Hair Care), I've maintained the same design consistency to have them look and function the same, regardless of whatever collection or gender they may fall under.

Mockup Fragrance Finder A3
Mockup A03: Fragrance Finder final design
Mockup Fragrance Finder A1
Wireframe A01: Fragrance Finder
Home Fragrance mockup
Mockup A01: Home Fragrance

👁 Product Detail Page (PDP)

The product detail page (PDP) was the first page I designed to establish the brand’s design style with a focus on getting users to the checkout page faster.

Mockup PDP B1
Default look
Mockup PDP first review
Review form
Mockup PDP B1 with post review
Multiple review

👁 Contact and Press

The contact page was actually the first version of the page returning users for future improvements in case there was any abuse from a clever user.

The press release page was designed with an archive in mind. Simple components of a horizontal rectangle with minimal height of 50px, containing the publication name with any extra information in the form of a link icon for easy navigation if there are multiple.

Mockup Contact Empty
Contact: Empty or Fill form
Mockup Press A2
Mockup: Press A02

🎯 Results

Their eCommerce platform was finally integrated into their B2C site, giving them a second layer of capital that would draw in their new digital consumer.

Contact Form