The client needed to integrate a complex AI logo generator, ikely built with React into Webflow without compromising performance. Their early designs buried the main tool under too much content, leading to a confusing user experience. On mobile, the generator's canvas and controls broke frequently, and they lacked a scalable system to showcase logo examples by style or category.
Their goals were clear, they wanted me to build a conversion-focused Webflow site that makes the AI generator feel native, improve mobile performance, and allow easy content management through a flexible CMS, especially for logo showcases.
I used a hybrid approach to embed the AI generator via Webflow’s Custom Code tool and styled native Webflow UI elements to ensure visual consistency. I redesigned the homepage with a single CTA and created a three-step animated flow (Prompt → Generate → Download) using Webflow Interactions to reduce cognitive load. On mobile, I replaced horizontal previews with a stacked card slider and implemented tap-friendly controls. For scalability, I built a CMS-driven logo gallery with filterable styles and reusable Symbols, empowering the client to add new logos through Webflow Editor without dev support.
The new design led to a 19% increase in free-to-premium conversions. The site achieved a 92/100 score on Google Lighthouse (Mobile), and the client is now fully managing updates on their own through Webflow’s CMS. saving time and reducing developer dependency.
Working with Sufyan was an absolute game-changer for our site. He understood exactly what we needed clean design, smooth AI tool integration, and a structure we could manage ourselves. The final result not only looks amazing but actually boosted our conversions. He was communicative, professional, and genuinely cared about making the site better for our users. Couldn’t have asked for a better experience.
.svg){kind=small}
