Julio Montás

Shopify Fragrance eCommerce

🗒 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

Picture of the author
Picture of the author
Picture of the author
Picture of the author
Picture of the author
Picture of the author
Picture of the author

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

Picture of the author
Version H01: Final design
Picture of the author
Version A02
Picture of the author
Version B01
Picture of the author
Version H02
Picture of the author
Version C01

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

Home Fragrance mockup
Mockup A01: Home Fragrance
Picture of the author
Wireframe A01: Fragrance Finder
Picture of the author
Mockup A02: Fragrance Finder
Picture of the author
Fragrance Finder: Video Influencer popout
Picture of the author
Mockup A03: Fragrance Finder final design

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

Picture of the author
Default look
Picture of the author
Review form
Picture of the author
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.

Picture of the author
Contact: Empty or Fill form
Picture of the author
Mockup: Press A02

URL

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