Harmony Paris

September 30, 2019 · 6 min read

I first found out about Harmony in 2014 via this video. Immediately fell in love with the brand and being an Odesza fan didn’t really help. Five years later, Emily Oberg - who I had helped with her brand Sporty and Rich reached out and asked to see if I could help her boyfriend David, the founder and creative director of Harmony.

Preconditions and asks:

David said that he needs a new site, since the old site looked dated, had weird bugs which led to plummeting online sales. Most importantly, it cost him a lot of money to maintain. The agency who had built it, charged him 30% on each product sold on the site, in perpetuity. He was being ripped off.

A bug on the old site
A bug on the old site, where the hero section was just a giant image. Not cool.

We had an initial conversation during which we tried to figure out what we wanted:

  • Big bold images to captivate the customers.
  • Clear navigation to easily access all the look-books, collections and products on the site.
  • An Easy fuss-free checkout process.
  • We decided the timeline to be approximately 3 months (mid-Aug to mid-Nov) - so launch during the holiday season.

Just before the project started, David had a special request. He asked if it was possible to get the site completed for mid-Sep(in 1 month). He didn’t want to lose more money by launching the F/W collection on the old site.

I said yes, but that meant we had to change aspects of some of the things that we had originally discussed. We decided to use plug-ins to perform for some of the site functionality, and a base theme. This would although reduce the time it would take to launch the new site, but also reduce its customizability.

Product Thinking:

We had two types of users for the site: First was the Harmony customers who wanted to easily browse through the site, find what they like and buy them. For this we started by mapping out all the pages of the site and the user flows on a spreadsheet.

clean spreadshit mapping
Spreadsheet showing the final iteration of the site map.

Secondly, we had the non-technical Harmony employees, whos job was to efficiently update and maintain the site. Hence we picked Shopify as our platform. We also needed to make sure that the existing inventory management system was properly integrated with the system.

Visual design:

I had to work with a text logo, which was simply the word harmony in Helvetica. The only design requirement from David was to also use Helvetica through out the site. All other visual elements were for me to figure out. With our given time constraints, I developed a simple type system that could easily translate on both mobile and desktop without much fuss.

The Harmony type system
The Harmony type system.

We introduced one key yellow colour on the site that got used on all call to action buttons intended to drive users to click and engage.

The Harmony yellow in use
The Harmony yellow in use.

Interaction design:

We included subtle transitions and animations throughout the entire site. Their purpose was to nudge the user from just browsing the site to engage with the products and eventually add items to their cart and proceed to checkout.

Button color transition
Button color transition, yellow to black.

The collection page was a little tricky, we didn’t want to overwhelm the user yet give them the necessary information so they can easily make a decision on the exact product they liked and clicking to learn more.

Product images change to second image
Product images change to second image and shows the available sizes.

Once you came to the product page, you could easily scroll through all the images while the description and add to cart functionality stayed fixed.

Images scrolling in product page
Images scrolling in product page.

On mobile, we achieved the same goal with a simple swipe functionality. Ideally we want to show the number of images for the product, and the index of the image we are currently at. It was becoming complicated to implement that functionality due to the plug-in we were using, so we settled for a clean ‘album’ icon that still conveyed the swipe idea idea to the user.

Mobile product page swipe feature
Mobile product page swipe feature.

Conclusion and Learnings

Like all design and creative processes, this too was a big complex puzzle that had to be solved. The final product turned out to be a simple yet intelligent solution to the needs of the business.

The creative process
Illustration of the creative process from 100days.design 1 .

After launch, Harmony’s weekly sales increased 200% on average, compared to the last two years during the same period. We are also leveraging the customer insights and data provided by Shopify to optimize the collections and products we feature as well as iterate on our current UX design.


Footnotes:
  1. I found the 100 days of product design site insightful and highly recommend it to learn more about desin thinking. ↩︎