Product
The ten-day storefront
A 29-page website and store for a high-profile smartphone brand in 10 days, and a free Framer–Shopify plugin I built along the way that people still use.
Company
A smartphone brand, via Motion Labs
Role
Product designer · design, build and Shopify
Duration
10 days
Toolkit
Framer, Shopify, a custom Framer plugin, code components, AI image and copy generation
At a glance
The problem
A brand in the headlines with a weak website, no usable content or assets, a badly set-up Shopify store, and a deadline measured in days.
What I made
About 13 page designs and 29 live pages, roughly 50 custom components, live Shopify products and reviews, and a free plugin connecting the two.
10 days, start to finish
~50 custom components
1 free plugin, used by hundreds
Context
The client was a high-profile smartphone brand with its own operating system, and the first big client we won at Motion Labs. The brand was controversial and constantly in the news, so landing it would put a young agency on the map, whichever way the headlines went. Their website didn’t match the attention they were getting.
Because the client mattered so much, the timeline was set by fear of losing them, not by the size of the work. I had about ten days.
The problem
Design and build a full website and store for a brand under a spotlight, in ten days, with almost nothing to start from: phones, watches and audio products, the operating system, the company story, support and policies.
Where we started, and where we got to.
Discovery
The first thing I learned was what we didn’t have.
No content. The client’s team couldn’t send usable copy or product data, so I gathered it from public sources: Wikipedia, public websites and newsletters.
No media. There were no usable photos or graphics, so I generated images with AI and edited them until they looked like one brand.
A broken store. The Shopify setup behind the shop was poorly configured, and it had to work before any design could.
A paid bridge. Connecting Shopify to Framer was possible, but only through a third-party service with a monthly subscription the agency didn’t want to pay.
Product pages, prices and reviews come live from Shopify.
Exploring
A site this size in ten days only works if you stop designing pages and start designing parts. I built the component library first: about 50 smart components and code components, each made for this site. Once they existed, pages could be assembled quickly and stayed consistent, even with content arriving from five different places.
A few components carried the story. The operating system page shows a live-style view of which apps are using your camera, microphone and location, because “transparency by default” is easier to believe when you can see it. The about page tells the founder’s story through a book you open on hover.
The trade-off was obvious and worth it. The first days produced almost no visible pages, and the last days produced most of them.
About 50 components, built for this site, so 29 pages could be assembled fast.
The final design
About 13 page designs and 29 live pages: the homepage, every phone, watch and audio product, the operating system page, the company story, a device hub, service centres, a media corner, support and policies. Every component was made from scratch, with imagery and copy built to look like one brand rather than a patchwork of sources.
Building it
I learned Shopify properly and set the store up again so it actually worked. Then I solved the subscription problem: instead of paying a service every month to connect Shopify to Framer, I built my own Framer plugin that does it, Shopify CMS Sync, and published it for free. Product names, prices, photos and reviews now come straight from Shopify into Framer.
All of this happened inside the same ten days: learning Shopify, building the plugin and shipping the site.
Shopify CMS Sync: built in the middle of the project, free, and used by hundreds of people.
Impact
The site was finished on time, at a pace I wouldn’t normally choose.
The plugin saved the agency a recurring subscription worth hundreds of dollars.
The plugin, Shopify CMS Sync, is now a real product on its own. It’s free, and hundreds of people use it to fill the same gap I had.
The site never launched. Once it was built, the client cancelled the project, citing budget, and never paid for it. No advance had been agreed, so the work went unpaid. Four months later, they launched a redesigned website that looks very similar to the one I designed. I take that as the clearest feedback I could have asked for.
The plugin is the part nobody could take away, and it’s the win I’m proudest of.
Looking back
Build the parts before the pages. It’s the only reason a site this size fit in ten days.
When the client can’t give you content, you become the content team. Plan for it.
No deposit, no start, however important the client is. I learned that one the expensive way.
Sometimes the most valuable thing a project produces isn’t the thing you were hired to make.
Next case study