We're hiring! Check out open positions
News & Announcements

Case Study: Blondery

Tim Davidson
3 min read
Case Study: Blondery

Collection of blondery website design components

Blondery is a New York based eCommerce bakery that approached Clean Commit for help revamping their Shopify store. As an innovative company, that deals with large companies in the U.S. the Blondery store needed to do a better job communicating the luxury of their product. Their existing design had a number of weird display issues and simply didn’t showcase their products properly.

visually summary of all Blondery web design screens

The existing site was running on Shopify. After weighing up the pros and cons of adopting a headless Shopify architecture, we advised that sticking with a regular, monolithic setup was the correct choice. The biggest driver in this decision was how many plugins the store was running, and the amount of functionality they wanted to achieve.

Headless setups are arguably more flexible, but they’re much more expensive to set up because functionality needs to be coded manually or called in from external sources. Monolithic setups on the other hand can simply install plugins to instantly access a huge range of functionality.

There are tradeoffs of each architecture, but we were confident that a regular Shopify store was going to be the right choice.

Challenges

Unique designs for standard eCommerce components

Creating unique designs is really fun in Figma, and the possibilities are endless. However, working within the framework established by Shopify means that some things aren’t possible. Our challenge was to strike a balance between a design that got the nod of approval and a site implementation that was easy for customers to navigate.

Blondery Shopify store cart

eCommerce sites need to have components like a cart, checkout page, account page, filters, and search bars. We wanted to achieve a familiar look with these components while keeping with the site’s luxurious branding.

Dark theme

Blondery was always destined to have a dark theme. Their packaging is black-on-black, and the website needed to stay on-brand.

Designing a regular website with a dark theme is usually no issue. Regular Shopify stores are a little different because they typically rely so heavily on plugins that can’t always be fully styled.

blondery store with white theme plugin components

The challenge here was adding white-themed plugin components to a dark-themed website. We worked around this challenge by manipulating the plugin’s CSS where possible.

Plugin prices

The Blondery team had a decently long list of functionality they wanted to achieve. Upsells, exit pops, gift notes, shipping integrations, royalty rewards, amongst others. For the most part, these requirements could be met through plugins.

Shopify’s ecosystem of plugins is massive and can achieve most requirements for free. The problem is that “free” only lasts for a very limited period of time or number of customers. After the threshold has been breached things can get expensive really quick.

Our challenge was to build as many of these features without having to rely on plugins as possible. The exit pop was no problem since it could be cr anted in Mailchimp without coding and inserted as a simple script. The upsell was a much trickier challenge, as we needed to write logic to present a product before the checkout.

Timeframes 

The Blondery team wanted to ship the new site quickly. From the point that we had agreed on the contract and created the design, only four weeks remained before their deadline.

Creating complex Shopify themes takes longer than a normal site. There’s more functionality to build, a larger number of pages, and we’re forced to use Shopify’s liquid templates which aren’t the most friendly framework for programming.

Four weeks was not enough to achieve all of the project’s requirements, but we were intent on getting the site up. We backlogged everything that wasn’t necessary for making the site appear visually and functionally complete to visitors and pushed ahead with hitting the deadline.

Wrap up

Creative visual display of Blondery products and product display page

Designing and developing the Blondery site was definitely one of our more challenging projects but we’re very happy with the results. The site design has received a lot of attention from our Dribbble following, and it shows off some really impressive functionality. You can check the site out here!

Tim Davidson
Tim Davidson
Tim is the face of the company. When you want to kick off a new project, or an update on your existing project, Tim is your man. With a background in project management, Tim specialises in managing the chaos around the company.

Have an idea you want to discuss?

We’re based in Canberra, Australia and we LOVE working with locals… but we work with clients all around the world.

From the U.S. to the U.K. From Norway to New Zealand. Where there’s a problem to solve, we’ll be there!

More insights from us

MACH architecture - The ultimate growth play
Development

MACH architecture - The ultimate growth play

MACH architecture has become a red-hot trend in the enterprise world for the past few years. It's an abbreviation of…
Tim Davidson
Tim Davidson
10 min read
Next.js vs Gatsby.js - Which Is The Best React Framework?
Development

Next.js vs Gatsby.js - Which Is The Best React Framework?

Next.js and Gatsby are two of the most popular static site generators used to build fast and SEO-friendly websites. They…
Tim Davidson
Tim Davidson
9 min read
The Pros and Cons of Headless Commerce - The Double Edged Sword
Development

The Pros and Cons of Headless Commerce - The Double Edged Sword

Our team recently jumped in to help a headless eCommerce project that was heading in the wrong direction. The team had…
Tim Davidson
Tim Davidson
11 min read