Case Study: Blondery

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.

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.

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.

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

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!