Wowo Casestudy
Wowo is a B2B SaaS platform built for creators, positioning itself as the single place to manage content, grow an audience, get paid, and turn a creative following into an actual business. The product sits at the intersection of creator tools and business infrastructure, competing for attention against platforms like Linktree, Beacons, and Stan Store, so the landing page had to feel sharper and more credible than a typical link-in-bio tool. The client had already completed the design phase in Figma, working through the full visual identity: a warm cream and orange gradient background, bold condensed display type for the headline, floating UI notification cards layered over product photography, and a trusted-by logo strip featuring recognisable names like Indeed, Commerzbank, DuckDuckGo, Vimeo, and WeWork. What they needed was someone to take that static file and turn it into a real, responsive, functioning website.
Date
Sep,2026
Role
Website & Brand Designer
Company
Wowo Casestudy
Problem
The client had a strong, on-brand Figma design that was ready to launch, but nothing to launch it with. Figma files don't run in a browser, don't adapt to different screen sizes automatically, and don't let users actually click a button or scroll through a real page. The design existed as a static reference, essentially a very detailed blueprint with no building behind it.
There's also a specific risk in Figma to Framer conversion work: quality loss. It's easy to produce a site that is technically responsive but visually looser than the original, with spacing that drifts, type that renders slightly differently, or layered elements like the floating notification cards that stack correctly on desktop but collapse into a mess on mobile. The client needed someone who would treat design fidelity as a hard requirement, not a rough guideline.
On top of the conversion itself, this is a B2B SaaS landing page competing for a skeptical, comparison-shopping audience. Creators evaluating platforms like this check multiple tools before committing, so page speed, smooth interactivity, and a build that feels genuinely polished rather than templated were commercial requirements, not just aesthetic ones.
Solution
For the hero's floating notification cards, I built each card as an individually positioned component with its own responsive rules rather than treating the group as one locked layer. On desktop, cards sit exactly where the Figma design places them, layered around the product photo. On tablet, card positions shift and slightly overlap-reduce to avoid crowding the now-smaller image. On mobile, the layout simplifies further, stacking the product image and key notification cards vertically so nothing overlaps or gets clipped, while keeping the same visual language and card styling from the desktop version.
For the logo bar, each partner logo was individually re-scaled and vertically centred against the others so the row reads as evenly weighted at a glance, matching the polished, uniform trust bar look from the original design rather than a raw asset dump.
For the gradient, I rebuilt the hero background using Framer's native gradient tools and cross-checked it against the Figma export at multiple zoom levels until the colour transition matched exactly, including the soft warm-to-orange blend in the centre of the composition.
For mobile responsiveness beyond what the Figma file specified, I used the provided mobile frame as the anchor point and then built out the intermediate breakpoints myself, testing at common device widths to make sure text never crowded, buttons stayed touch-friendly, and the layered hero elements degraded gracefully rather than breaking at any point in between.
Challenges
The biggest technical challenge was the hero section's layered floating cards. In the Figma design, the hero shows a product photo with three or four small notification cards (new subscriber, payment received, content performance) positioned at specific overlapping points around the image. That layout works cleanly at one fixed desktop width in Figma. Making it hold together across a real range of screen sizes, without cards overlapping the subject's face, colliding with each other, or floating off into empty space on smaller viewports, required careful, breakpoint-specific repositioning rather than a single responsive rule.
The second challenge was the trusted-by logo bar. The seven partner logos (Indeed, Commerzbank, DuckDuckGo, Vimeo, Conley, vidIQ, vidday, WeWork) vary wildly in native proportions and visual weight. Some are wordmarks, some are icon-plus-text, and displayed at a uniform height they looked visually uneven straight out of the export. Getting them to read as one cohesive, evenly weighted trust bar took individual sizing adjustments logo by logo.
The third challenge was matching Figma's exact colour gradient in the hero background. Figma and Framer handle gradient rendering slightly differently under the hood, and an approximate match wasn't good enough for a conversion project where pixel accuracy was the whole point of the engagement.
Result
The client got a live, fully responsive website that matches their approved Figma design with a high degree of visual accuracy, while adding the real interactivity, working buttons, and smooth scroll behaviour that the static file never had. The hero section's floating cards, trusted-by logo bar, and testimonial module all hold together cleanly across desktop, tablet, and mobile rather than just at the single width the design was originally created at.
Because the build was done component by component rather than as one static page, the client can now update copy, swap logos, or adjust CTAs without needing a full redesign. The site is fast, loads cleanly, and is ready to be pointed at real ad traffic and organic sign-up flows for a B2B creator SaaS product where page performance directly affects conversion.