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