Attackletics doubled sales with a neon storefront that opens like a plain one.
A smart batting tee and a finished coaching app, sold from a stock theme. Rebuilt in neon and scanlines, without making the phone pay for it.
2×Sales
+35%Order value
eCommerce · 8 weeks
CocoaTown made a deep machinery catalogue shoppable and lifted sales 28%.
CocoaTown sell bean-to-bar and nut-butter machinery to craft chocolate makers in more than a hundred countries. The catalogue held everything a buyer needed and no order that a buyer could use.
ClientCocoaTown
SectorFood processing machinery
MarketOver a hundred countries
Timeline8 weeks
ServicesShopify Development, CRO, UI/UX
+28%Sales
+39%Organic traffic
01The challenge
CocoaTown make bean-to-bar and nut-butter machinery — melangers, grinders, roasters and winnowers — for craft chocolate makers and larger producers. The catalogue is deep and technically accurate, written by people who know the process. That depth is the reason serious buyers arrive in the first place. Nobody needed to make the writing simpler.
What the catalogue did not have was an order. A chocolate maker does not search for a model name. They search for the stage they are stuck at and the batch size they need to reach. Listing every machine on one page and adding a search box would have made the catalogue faster to scan, not easier to decide from.
The gap showed up in the inbox. Buyers wrote to ask which machine fitted their batch. A sale that needs an email before it can start waits on a time zone. This is a considered purchase with a long research period. Every unanswered question adds days to it.
02Our approach
UX
Navigation was rebuilt around two questions a buyer can answer: how much cocoa goes into a batch, and which stage is the problem. Product names answer neither. Every machine now sits under the stage it serves and carries the batch range it is built for. The menu is written in the words a maker already uses.
Technical
This purchase takes weeks and usually involves a spreadsheet. So the specifications had to sit on the page as text, not inside a downloadable PDF and not as a photograph of a table. Capacity, motor rating, drum size and footprint can then be copied, compared against a rival machine, and sent on to whoever has to approve it.
Conversion
These machines ship worldwide, and a melanger wired for one country is scrap in another. A cheaper build puts voltage in a note at the bottom of the description and lets a sales email sort it out afterwards. The electrical standard was made a choice on the product instead, so the wrong machine cannot be ordered.
03Design & UX
The catalogue leads with process stage rather than product family. A maker who cannot get their conche to the right texture arrives at the stage first and meets only the machines that serve it. Batch range sits on every card, so a producer working in small runs can rule out an industrial machine before opening it.
On the product page the specification table is the main event, not an afterthought below a gallery. It is plain text a buyer can select and paste into their own comparison. On a phone the table stays a table rather than collapsing into a list, because a buyer comparing two machines needs the rows to line up.
Design & UX image
assets/img/cases/cocoatown-technical-catalogue-design.jpgMenu by process stage
A maker knows which stage is failing before they know which machine fixes it, so the navigation starts where the problem is.
Batch range on every card
Capacity is the first filter a producer applies, so it appears in the listing rather than several clicks deep.
Specifications as text
A specification locked inside a PDF cannot be pasted into a comparison, and comparison is the whole of a considered purchase.
Voltage chosen at the product
If a choice decides whether the machine works at all in a country, it belongs on the page rather than in a follow-up email.
04Development & technical implementation
Capacity had been recorded in litres in some places and kilograms in others. Nothing could be filtered until that was fixed, and no script could fix it, because the conversion depends on what is being ground. The engineers settled one figure per machine by hand before the new navigation could be built at all.
Machine attributes live in metafields, so stage, batch range, motor rating and electrical standard are structured data rather than paragraphs. Meilisearch reads those fields, which is why a search for a capacity returns machines and not blog posts. The electrical standard is a product option, so the order carries the right specification into the warehouse.
The technical writing is why buyers arrive, and years of process notes already ranked. A restructure that broke those addresses would have traded one problem for a worse one. Every page kept its URL through a 301 map, and each one now links to the machine it describes. A maker reading about conching is one tap from the equipment that does it.
Development image
assets/img/cases/cocoatown-technical-catalogue-build.jpg05
Key solutions.
The parts of the build a visitor would point at.
01
Filter by batch size
Capacity is the first thing a maker knows, so the catalogue narrows by how much cocoa goes into a batch.
02
Browse by process stage
Machines are grouped by the part of the process they serve, so a buyer starts from the problem rather than a model name.
03
Voltage as a product choice
The electrical standard is selected before checkout, which stops a machine reaching a country it cannot safely or legally run in.
04
Specifications as plain text
Capacity, motor rating, drum size and footprint sit on the page ready to copy into a comparison sheet or an approval request.
05
Search that reads the data
Meilisearch queries structured machine fields, so a search for a capacity or a stage returns equipment rather than articles.
06
Guides beside the machines
Years of process writing kept its addresses and now links straight to the equipment it describes, so reading turns into a shortlist.
06
The result.
What the work changed, in the numbers the client reports.
+28%Sales
+39%Organic traffic
Sales are up 28%. On a considered purchase with a long research period, that gain does not come from persuading anyone faster. It comes from letting a buyer confirm on their own, without waiting on a reply, that a machine matches their batch size and their electrical standard.
Organic traffic is up 39%. The pages that already ranked kept their addresses through the restructure, and they now sit beside the machines they describe. A search about conching lands somewhere it can be acted on. The catalogue reads as one structure rather than as a list that grew.
The two figures work together rather than separately. More of the right people arrive through the technical writing, and more of them can finish the decision without help once they do. Traffic without a way to decide is a cost. That is the part the restructure changed.
07
The finished site.
Live, and running the business it was built for.
The CocoaTown catalogue is live and organised by batch size and process stage. A maker can filter to the machines that serve the step they are stuck on. The full specification reads as text, the electrical standard is chosen at the product, and no email is needed first.
Visit the live site“
Buyers used to email us to ask which machine fits their batch. Most of them stopped, and the ones who still write ask better questions.
— Head of eCommerce, CocoaTown
09
Tech stack.
What it is built on, and what it talks to.
ShopifyLiquidMeilisearchSearch ConsoleGA4Klaviyo
10
More case studies.
Other projects where we named the number before we started.
View case study
Applied Vision Baseball left a coaching site for a store that shows gear working.
Vision and swing trainers that make no sense in a photograph. Moved out of a coaching site and onto a storefront built around the demonstration.
+46%Conversion
+56%Organic traffic
MindPanda built its own channel and pushed Amazon into second place.
An established Amazon seller with no channel of its own. Catalogue ported across, two markets configured, and a storefront designed to convert rather than list.
7 figuresDirect revenue
No.1Channel, ahead of Amazon
03
Let us look at your numbers.
Send the metric that is stuck and we will tell you honestly whether we agree.
Free consultation — 30 minutes, no obligation, senior lead on the call
1
Within 1 business dayWe read it properly and reply with real questions — not a templated brochure.
2
A 30-minute scoping callFree, no obligation. We tell you honestly if we are the wrong fit.
3
A written proposalScope, timeline, deliverables and the success metric — all on one page.
SAR+
You'll hear back from Sayan or a senior lead — never a bot.