90% Increase in Orders: How a Headless Shopify Design Grew PaperBlanks Online Store
- UX/UI Design
- Tech Stack Strategy
- Headless Shopify
Industry
Stationery, Journals & Gifting
Platform
Headless Shopify
Region
European Union
About the Client
Canadian Publisher of Journals
Paperblanks is a Canadian publisher of fine journals, diaries, and creative tools, known for museum-quality cover art, traditional bookbinding, and a mission built around craftsmanship and self-expression. With a global fan base and a wide, highly visual product catalogue spanning journals, planners, address books, and gift sets, Paperblanks needed a digital presence that could match the artistry of the physical product — while running on commerce infrastructure built for scale.
Clients Challenges
The Challenge
Paperblanks came to Madcraft ready to reimagine paperblanks.com, but the brief went well beyond a visual refresh. The team needed:
- A UI design that could carry the brand’s art-led, tactile identity online, across a catalogue with hundreds of SKUs, cover designs, and gifting variations.
- A modern technical foundation capable of supporting a lightning-fast, feature-rich storefront — without being boxed in by the limitations of a traditional themed Shopify build.
- A clear, opinionated recommendation across every layer of the stack: frontend framework, CMS, commerce engine, search, subscriptions, reviews, loyalty, support, and analytics — each evaluated against Paperblanks’ specific gifting and content needs.
- A feature-complete functional specification that could be checked off against real business requirements, distinguishing what was needed now from what could be phased in later (like group gifting and subscriptions).
- A comprehensive, developer-ready handover — since the build itself would be executed by Paperblanks’ internal development team, not Madcraft. That meant the documentation had to stand on its own, with no gaps for the receiving team to guess at.
Let’s get started! Contact us today to discover how we can help.
Project Goals
What We Set Out to Deliver
Paperblanks needed more than a set of mockups. It needed a partner who could turn brand ambition into a scoped, buildable plan. The brief brought together several intersecting goals:
- Design a luxury-grade, art-led storefront experience, from product discovery and gifting flows through to checkout
- Decouple the frontend from the Shopify backend for a faster, more customisable and more scalable experience
- Recommend and cost a complete, connected tech stack tailored to Paperblanks’ gifting and content needs
- Audit every feature area of the store and prioritise each as required, optional or future phase
- Compile everything into a handover document the internal development team could build from with confidence
Our Approach
Discovery & Research
- Evaluated every layer of the stack against Paperblanks’ specific gifting and content needs
- Audited every feature area of the store, from user management and checkout to localisation and legal compliance
- Prioritised each feature as required, optional or future phase, such as group gifting and subscriptions
UX & Design
- Built wireframes directly from Paperblanks’ own initial ideas rather than a generic template
- Designed the full storefront in Figma, from product discovery and gifting flows through to checkout
- Translated the brand’s art-led, tactile identity into a modern eCommerce interface
- Structured every screen for a clean handoff into a componentised, headless build
Tech Stack Creation
- Decoupled the frontend from the Shopify backend for a faster, more customisable and more scalable storefront
- Recommended Next.js for the frontend and a headless CMS (Sanity or Contentful) for marketing-led content
- Specified Shopify Plus with Hydrogen as the commerce engine, with serverless functions on Vercel or Netlify for lightweight backend logic
- Mapped Klaviyo, Yotpo, Rebuy, Recharge, Klevu, Wishlist King, Gorgias and Refersion into one connected ecosystem
- Provided estimated monthly cost ranges so Paperblanks could weigh functionality against budget
- Compiled the designs, tech stack rationale and functionality spec into a developer-ready handover document
Results
Paperblanks’ internal development team was equipped with a complete, decision-made blueprint: a designed UI, a justified and costed technology stack, and a prioritised functionality spec, ready to move straight into headless development without re-litigating foundational architecture decisions. Working from the Figma wireframes and tech stack recommendations Madcraft provided, Paperblanks’ team iterated on the designs and built out the new site — launching in early July. In the first month alone, average daily orders increased by over 90%, a strong early signal that the improved shopping experience is already driving real impact for the business.
What Paperblanks Had to Say
“It was a pleasure working with Madcraft on our Website Revamp project. The team, spearheaded by Megan, was responsive, professional, and great to work with. We appreciated the weekly check-ins with updates and progress reports to feel reassured that the project was moving ahead on track.
We received a Figma file with wireframes designed after our initial ideas, which was really helpful to clearly visualize the future site and use as a basis for our own further iteration, which were based on the initial frames. The team also provided valuable recommendations for the tech stack to help us grow our online business and improve our customer experience.
Since launching the new website in early July, we have already seen very positive results. In the first month alone, average daily orders have increased by over 90%, giving us confidence that the improved shopping experience is making a huge impact for our online business already.
We would highly recommend Madcraft to any business looking for a knowledgeable, proactive, and reliable digital partner. Their expertise, attention to detail, and commitment to our success have made this project come to life and really helped us improve our online business.”
Maren Schirrow E-Commerce Team Leader – European Markets, Paperblanks
Deliverables
UI & UX Design in Figma
We designed the full storefront experience in Figma — built to translate Paperblanks’ art-forward brand into a modern eCommerce interface, from product discovery and gifting flows through to checkout. Every screen was built with the internal development team in mind, structured for a clean handoff into a componentised, headless build.
A Fully Specified Tech Stack
Rather than leaving architecture decisions to chance, we produced a complete Tech Stack blueprint recommending Next.js for the frontend (SSG, built-in routing, and a mature ecosystem tailored to high-end eCommerce), a headless CMS layer (Sanity or Contentful) for flexible, marketing-led content management, and Shopify Plus with Hydrogen as the commerce engine — paired with serverless functions on Vercel or Netlify for lightweight backend logic like cart handling and third-party API calls.
On top of that core architecture, we mapped out and recommended best-in-class tools for every functional layer of the store: Klaviyo for email and SMS, Yotpo for reviews and loyalty, Rebuy for cross-sell and upsell, Recharge for future subscription offerings, Klevu for search and navigation, Wishlist King for wishlists, Gorgias for customer support, and Refersion for affiliate marketing — along with how each of these tools integrates with the others to work as one connected ecosystem, not a pile of disconnected apps. We also provided estimated monthly cost ranges for the full stack, so Paperblanks could weigh functionality against budget with full visibility.
A Full Functionality Audit
Alongside the design and architecture, we ran a complete functionality specification exercise — auditing every feature area of the store, from user management and product management to gifting, cross-sell, checkout, order management, marketing, support, analytics, localisation, and legal compliance. Each feature was marked as required, optional, or a future phase, giving Paperblanks a clear, prioritised roadmap rather than an all-or-nothing feature list.
Developer-Ready Handover
Because the build would be executed internally, the entire package — Figma designs, tech stack rationale, and functionality specification — was compiled into a full handover document for Paperblanks’ internal developers, giving them everything needed to build with confidence and consistency with the intended design and architecture.
Why Work With Madcraft
Paperblanks needed more than a set of mockups. They needed a partner who could turn brand ambition into a scoped, buildable plan their own team could run with. That’s what shaped how we approached this project: weekly check-ins so progress was always visible, wireframes built directly from the client’s own ideas rather than a generic template, and tech stack recommendations weighed against real budget and growth goals rather than picked for novelty. The result was documentation and design work Paperblanks’ internal team could pick up and build from with confidence — and a launch that delivered measurable impact within its first month. Whether we’re designing the blueprint or building the site ourselves, our goal is the same: a digital foundation that earns its keep.
