octo website
in a nutshell
The Octo website serves as both the brand’s main storytelling platform and its first e-commerce channel. As a watch brand without permanent retail presence, the site needed to balance Octo’s playful, unconventional identity with a seamless buying journey that builds trust and converts visitors into buyers.
As sole designer and developer, I created a digital framework that merged Octo’s lore-driven personality with clear shopping flows—designing, prototyping, and building a system in Webflow that both immerses users and empowers Octo’s team to manage launches independently.
the challenge
Launching Octo’s first online store meant addressing three core hurdles:
1. Balancing rich storytelling with seamless shopping
Each model comes with rich lore and visuals, but the site also needed to keep the purchase path clear and intuitive.
2. Solving for dynamic pricing
Octo’s tiered pricing by serial number wasn’t supported by Webflow, so a creative, no-code workaround was required.
3. Empowering the team
Octo’s non-technical crew needed a system to launch future drops, manage pricing, and update content without developer help.
architecting a story-first shopping experience
To balance world-building with conversion, I structured the site like a storytelling funnel—leading users from brand discovery into deeper model narratives, then purchase.
Brand layer — I designed a homepage and collection view to establish Octo’s ethos and drop culture without overwhelming new visitors.
Model layer — Each watch launches a dedicated campaign page, where I created immersive storytelling through visuals, specs, and galleries.
Purchase layer — I built a serial-number selector with instant pricing updates, keeping users in the product’s “world” while making checkout smooth.
implementing dynamic pricing with a no-code stack
To implement tiered pricing in Webflow, I designed a lightweight, scalable workaround that Octo’s team could manage:
Creative use of variants — Grouped 200 serials into four pricing tiers, reducing setup from 200 SKUs to just four.
Batch drops to drive scarcity — Structured launches into waves to fit Webflow limits and build anticipation among collectors.
Streamlined CMS workflow — Built a pricing formula with CSV import and tested a CMS architecture that made updates intuitive, scalable, and fully no-code.
empowering the octo team to launch new drops
To make Octo self-sufficient, I built templates and workflows the team could manage without technical support.
Ready-to-go CMS templates — Pre-structured entries with inline guidance simplified drop setup.
Focused editing — Split stable brand elements from frequently updated content, reducing errors.
Smooth hand-off — Delivered documentation and walkthroughs, ensuring new staff could onboard quickly.
looking back (hats collected)
This project taught me the balance between ambition and sustainability. Octo’s bold brand inspired ambitious ideas, but not all were scalable for a team managing the site day-to-day. Some initial designs had to be pared back to ensure ease of use post-handoff. If I were to do it again, I’d set clearer constraints and manage expectations earlier—designing within the realities of no-code and the client’s operational needs. The biggest takeaway: innovative experiences only succeed when they’re also practical for the people who maintain them.
