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
🚀 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.
Demo + Github
🛠 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.
UI Design version H01
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.
👁 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.
👁 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.
🎯 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.
