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
clouds
plants
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 skip on the wireframe phase. Created all the pages and interaction mockups in Sketch.

✍ Roboto / Roboto Condensed By Christian Robertson

🍬 Palette

🍭 Gradient

🗺 Customer journey

🛠 Development

It just so happened that I also developed the entire eCommerce Shopify 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 each section component to read and explore the product from the landing page in a calm and contemplative visual solution. Below is my landing page mockup exploration.

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, and Hair Care. I maintained the same design consistency to have them look and function the same, regardless of any 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 Shopify store, giving them a second layer of global capital that would draw in their new digital consumer.

Contact Form