Hartnack & Co Shopify Website Design Case Study
Hartnack & Co handcrafts premium binders, books, and portfolios, with every product made to order. Their existing website was dated, with a stressful and cluttered purchase journey that didn’t reflect the care and craftsmanship behind their products. I was brought in to elevate the brand experience, refine the design system, and create a bespoke Shopify product page that made customisation simple, calm, and elegant. All while positioning Hartnack & Co as the premium choice in their market.
Client: Hartnack & CoServices: UX & UI Design, ShopifyRole: Shopify Design Expert
UX and Heuristics review
I began with a deep UX and heuristics review to understand how customers were using the old site. Analytics revealed that while users loved the products, many dropped off during the complex product customisation journey.
The key challenge: hundreds of potential product variations were overwhelming customers. The solution was to simplify, structure, and guide users through the process in a way that felt reassuring rather than stressful.
Elegant Design System
To elevate the brand, I refined the colour palette and typography, creating a more luxurious, accessible, and timeless look. The new design system balanced white space, hierarchy, and clarity. Turning what could have been a confusing ecommerce site into a calming, premium experience.
Product cards that allow the user to compare
Hartnack & Co’s products often share similarities, so I redesigned the collection pages to help customers compare at a glance. Instead of showing only product imagery, I added details such as available sizes, formats, and materials.
This made browsing easier, faster, and more helpful for both decisive shoppers and those still seeking inspiration.
Shop by Use: Inspiring Different Audiences
Not every customer arrives knowing what they want. To cater to both decisive and undecided shoppers, I introduced “Shop by Use” landing pages.
These curated pages showcase real-world applications. From business binders to pilot log books, helping customers quickly imagine how Hartnack & Co products fit their needs.
Customer Gallery: Real Products, Real Inspiration
To further inspire, I designed a customer gallery that highlights previous creations. Each gallery item shows not only the finished product but also the exact options chosen, making it easier for new customers to say “That’s exactly what I want.”
Mobile Screens
Analytics revealed that most customers shopped on larger monitors, but the mobile journey was given just as much attention. By applying the same system styles from the design system, the Shopify 2.0 build scaled seamlessly down to smaller screens, ensuring a consistent and polished experience across every device.
Bespoke Product Page Experience
The centrepiece of the project was a fully bespoke product page, designed to handle thousands of variations without ever overwhelming the customer. The customisation journey was carefully structured into clear sections that guided users step by step, supported by a clean and elegant interface with calming typography and balanced layouts. Slide-up overlays and subtle tips provided extra guidance without breaking the flow, while bespoke icons helped to simplify complex options visually. A sticky cost tracker updated dynamically throughout the process, giving customers confidence and control over their choices.
The result was a product page that transformed complexity into a luxurious, intuitive, and enjoyable experience.
Conversion Rate Highlights
38%
Increase in users engaging with the site
39%
Increase in converting visitors into buyers
91%
More products sold compared to the previous year
Nick Hartnack
(Partner) Hartnack & Company