Kwame Boler
An entrepreneur and DEIB advocate's personal brand site, built in Webflow from a finished Figma design with its animation and interaction intact.
Overview
Kwame Boler is an entrepreneur, mentor, speaker and DEIB advocate. The site is his professional home: what he does, what he has built, where he has appeared, and what the people who have worked with him say about it.
The design already existed. A finished Figma file covering eight sections, with animation and interaction built into the concept rather than added on afterwards.
The job was to make it real in Webflow without losing the part that made it worth building.
The challenge
A design with interaction built into it. Hero, Features, About, Accolades, Expertise, Testimonials, Highlights and Contact, each carrying its own behaviour: a loading animation, moving logo rows, expandable About content, testimonial interactions, sliders, hover states. This was never a static page that needed styling.
Not every Figma interaction survives contact with Webflow. Some of what the design implied would either exceed what Webflow does natively or turn fragile the moment content changed. Those needed identifying up front rather than discovering halfway through.
Three device classes, not one layout scaled down. Desktop, tablet and mobile each needed structural decisions of their own. The client tested all three and reported breakpoint specific issues throughout.
The source file had its own inconsistencies. Spacing and padding differed between comparable elements in the Figma, which had to be clarified during the build rather than quietly guessed at.
The schedule was tight from the start. A five day window with a first draft due two days in. The responsive work, the animation and the QA all needed more than that.
Goals
- Build all eight sections in Webflow from the supplied Figma design
- Keep the subtle animation and interactive character the design was built around
- Make it work properly on desktop, tablet and mobile
- Wire up the external destinations: podcasts, press, LinkedIn and company links
- Leave a build that stays maintainable as the content changes
Approach
Ask which animations actually matter. Some of the requested motion went past what Webflow does natively. Rather than reaching for a custom framework and quietly adding complexity and cost, Bilal asked the client to say which animations were essential and explained the trade off. That decision belongs to the person paying for it.
Optimize for the next content change, not today's screenshot. The client wanted only one testimonial expanded at a time. A more elaborate animation could have done it, but it would need revisiting every time a card was added. He explained that and built a simpler read less pattern instead. The build has to survive its own content.
Rebuild Highlights for mobile rather than force it. The Figma treatment did not translate to a small screen and the first attempt showed it. Instead of contorting the layout, he proposed fewer visible cards, a horizontal slider interaction and different card groupings on mobile. The client's answer was Great thinking, and later These look amazing well done.
Split the moving logos into two groups. The Features and Accolades rows were repeating awkwardly because of the animation direction and positioning. Dividing the logos across an upper and a lower row fixed it. The client's reply: Great suggestion, Bilal.
Treat each breakpoint as its own problem. Navigation position, About behaviour, image sizing, slider navigation, testimonial layout, expertise layout, contact treatment and logo distribution were each adjusted per device rather than scaled.
Design
The visual design was the client's, delivered as a finished Figma file. The work here was implementation, and the decisions implementation forced.
Motion carries the page: a loading animation on entry, logo and press rows in continuous movement, hover states on articles, and expandable content in the About and Testimonials sections.
On mobile the Highlights section departs from the Figma deliberately. Fewer cards, a slider, different groupings, because the original composition did not survive the width.
Build
Built in Webflow across the eight sections of the design: Hero, Features, About, Accolades, Expertise, Testimonials, Highlights and Contact.
Interaction work covered the loading animation, the animated logo and press areas, testimonial interactions, expandable About content, sliders, article hover effects and the responsive navigation.
Responsive implementation covered desktop, tablet and mobile with structural differences at each, followed by rounds of QA and bug fixing against the client's own cross device testing.
External destinations were implemented and corrected as the client supplied them: podcast links, GeekWire, iHeart, LinkedIn testimonials, and the LinkedIn and company links inside the About sections.
Outcome
The site is live at kwameboler.com, all eight sections, across desktop, tablet and mobile.
It ran past its original window. A five day order with a first draft due after two days became a build that finished on 8 May, with support continuing the day after. The responsive work, the animation and the QA were what took the time, and at each point the client extended rather than disputed.
The review came back at five stars across communication, quality and value. He wrote that the challenges were resolved ingeniously, that the work went above the call of duty, that he was thrilled with the results, and that he would happily work together again.
He did. He returned afterwards with a further Webflow project for a separate business of his.
No traffic, enquiry or engagement figures are published here. Kwame has not shared post launch data and this project was not measured.
Key takeaways
- A design file is a proposal, not a specification. The useful work was deciding which parts to reproduce exactly and which to rebuild for the platform, then saying out loud which was which.
- An animation that breaks when someone adds a card is not finished. The simpler testimonial pattern cost some flourish and bought a site that keeps working without the studio.
- A five day estimate did not survive eight animated sections across three breakpoints. The scope was real. The estimate was not.
See it in the browser
The finished site is live. Open it and judge the work in its real context.
.png)
Have a project in mind?
Whether you're launching something new or improving an existing website, let's discuss your goals and see if we're a good fit.
