A complete overhaul of Kiiroo's e-commerce website and FeelConnect app — from information architecture to interactive product pages, device pairing flows, and a scalable design system built for a growing ecosystem.

Kiiroo had pioneered interactive haptic devices since 2013 — but their digital touchpoints hadn't evolved alongside their hardware. The website struggled to communicate complex product differentiation (Keon vs. Onyx+, Pearl3 vs. Cliona), and the FeelConnect app's pairing flow was creating friction that led to support queries and device returns.

They needed a design and development partner to reimagine the full digital experience — from first landing to first successful device connection — without losing the premium, sophisticated tone the brand had earned.

Product pages failed to differentiate device capabilities and use cases

FeelConnect app pairing had a 7-step flow with no error recovery

No mobile-first experience — 68% of traffic was on mobile

Inconsistent visual language across web, app, and packaging

Compatibility matrix buried in support docs

Reduce time-to-understand from landing to add-to-cart

Redesign device pairing UX to require zero support intervention

Build a scalable design system for future product launches

Unify visual identity across web, iOS, and Android

Surface compatibility info contextually — not in docs

User interviews, heatmap analysis, support ticket audit, competitor review

Sitemap redesign, user flows, wireframes, prototype testing with 12 users

Design system, component library, high-fidelity Figma for web and app

Shopify 2.0 dev, React Native app, Bluetooth SDK integration, QA & launch

process phase defining the new information architecture

We rebuilt Kiiroo.com on Shopify 2.0 with a focus on product storytelling. Each product page was rearchitected around three buyer types — solo, partnered, and content-connected — with interactive comparison modules and an inline compatibility checker.

Split hero sections by use case, not just product name

Sticky PDP sidebar with real-time compatibility filtering

360° device viewer replacing static imagery

Inline "pairs with" module on every product page

Progressive disclosure on technical specs

Shopify 2.0 with custom sections + JSON templates

Alpine.js for lightweight interactivity without full SPA overhead

Liquid + Metafields for compatibility data layer

Core Web Vitals: LCP under 1.8s, CLS 0

Figma tokens → CSS custom properties pipeline

Homepage — use-case led hero with ecosystem overview

Collection pages — filter by gender, use case, connectivity

Product detail pages — rebuilt from scratch, 8 templates

Compatibility hub — interactive cross-product pairing guide

App download landing — device-specific deep-link routing

61% — drop in app pairing abandonment rate

2.3× — increase in mobile product page conversions

44% — reduction in device-related support tickets

Figma design system — Components, tokens, variants — web & mobile

Shopify 2.0 theme — Custom sections, PDP templates, CWV-optimised

React Native app — iOS & Android — pairing, session, and content tabs

UX research report — Usability testing, heatmaps, drop-off analysis

Dev handoff docs — Annotated specs, interaction notes, QA checklist

Compatibility layer — Metafield schema + Liquid for cross-product sync data