Apperr Designs Website
Designed and built the flagship site Apperr uses to sell WaaS, CTOaaS, and AI systems to founders worldwide—lifting high-ticket inbound conversion by 25% with a 0.9s FCP.
Apperr’s legacy storefront suffered from an identity mismatch: a team building advanced AI infrastructure was represented by a low-trust site with unclear CTAs and handoff bloat.
Owned both design and Webflow development end-to-end—engineering nested Figma Auto Layout modules, semantic HTML tagging, and hardware-accelerated interactions to eliminate handoff drift.
Drove a +25% lift in high-ticket inbound conversion and +40% organic funnel traffic while achieving 100/100 SEO, 94/100 Accessibility, 0.9s FCP, and 0.001 CLS.
Overview
Apperr Designs is an on-demand tech partner that provides technical and design services like Product Design, CTO-as-a-Service, and custom AI implementations, helping founders build digital products through web, mobile, and AI solutions. In this project, I led the redesign and build of Apperr’s website from Figma to Webflow execution.
Problem worth solving
The legacy platform suffered from an identity mismatch: a team capable of building advanced AI infrastructures was represented by a low-trust digital storefront. This translation gap resulted in high drop-off rates along the primary sales funnel.
- Low Conversion: Steady traffic was not turning into leads; CTAs were unclear and the journey had no strong pull toward action.
- Poor Design Implementation: Traditional Figma-to-Developer delivery models were introducing structural bloat, delaying launch speed, and diluting interaction polish.
“How do you close the gap between what a tech partner can actually build and how that capability reads online?”
What I was brought in to solve
Close the translation gap between design intent and production output by taking full ownership of both information architecture in Figma and production engineering in Webflow.
How I approached it
Upon deeper website audit, I found the issue was not only visual but structural. I conducted brand and competitor research, mapped out the new information architecture, and eliminated handoff drift by owning both design and development.
The output
1. Architecting the Layout Engine in Figma
- Auto Layout Mastery: Every component, block, and viewport card was engineered using nested Auto Layout modules, establishing a fluid responsive grid before writing code.
- Semantic Tagging: Prior to migration, I explicitly assigned native HTML tags (<header>, <section>, <nav>) to layers directly inside the Figma workspace.
- Global Variables: Mapped global typography tokens, fluid padding scales, and color architecture using Figma variables to mirror exact web styling properties.
Impact
A design is only as good as its production execution. I audited the final codebase to ensure compliance with web performance standards directly tied to conversion health:
What I’d tell the next designer
This project taught me that great design does not end at the canvas. Bridging the gap between design intent and production output is a skill in itself and one I now bring to every project. Taking ownership of both design and development gave me a sharper eye for what is buildable, what is performant, and what actually converts.