Role — Lead UX/UI & Webflow Developer (Freelance)
Tools — Webflow, Figma, After Effects, Lottie (Bodymovin), HTML/CSS/JS, Webflow CMS
Timeline — 7 weeks from scope to delivery
Scope — 18-page responsive site, CMS for events/resources, animated brand storytelling, WCAG-accessible interactions, forms and analytics setup

Problem

Sticks & Stones had completed a year of research (in partnership with Ipsos) and needed an online platform to share findings, tools and stories that would help the public better understand and address online hate and harm. The organisation needed a digital home that clearly communicated their mission, supported advocacy and funding efforts, and could scale as new research and tools were developed.

Goals & scope

Build a modern, interactive and brand-led website that tells stories and drives awareness.
Create a manageable CMS for events, resources and news so the advocacy team can update content without developer help.
Ensure the site was optimised for desktop and mobile and met WCAG accessibility guidelines.
Use motion selectively to bring the brand to life while respecting users who are sensitive to motion.

My responsibilities

Project scoping and client discovery (including a client scoping survey).
Research, information architecture and wireframing.
Storyboarding and production of brand animations in After Effects (exported as Lottie).
Full Webflow build (CMS, templates, forms, custom interactions) plus small custom JS/CSS.
Cross-browser/device QA, accessibility testing and client handover (CMS training & documentation).
Project management and stakeholder communication.
‍

Process & highlights

Discovery & scoping

To scope the project I created a client survey and had multiple client meetings to clarify priorities and success metrics. I gathered references and examples that guided the site's storytelling aspect.

Sample scoping questions used:

What are the top three actions you want visitors to take?
Which content will be updated most often (events, resources, news)?
Once the site has been launched, are there any other plans or goals for the site?

Ideation, wireframes & storyboards

Mapped user journeys for first-time visitors, returning users and stakeholders looking for resources or events.
Wireframed page templates and created storyboards for the Lottie animations so the team could review narrative flow before animation production.
Built wireframes and clickable prototypes in Figma to validate interactions and gather client sign-off.

Motion & illustrations

Created brand-led animations in After Effects using a 2D physics engine to animate the Sticks & Stones shapes and tell short visual stories.
Exported animations as Lottie (Bodymovin) and optimised JSON payloads for performance.
Implemented scroll-triggered animations to reduce constant motion for motion sensitive users
Designed extra illustrations for the mega menu sections that used the Stick and Stones shapes and brand colours to explain each section.

Build & technical approach

Built an 18-page responsive site in Webflow using CMS collections for Events, Resources and News, with templated pages to make publishing easy.
Implemented conditional visibility and dynamic filtering for events and resources.
Integrated Webflow forms for newsletter sign-ups and contact flows.
Added custom JS to initialise Lottie players; used minimal custom CSS for layout refinements.
Prioritised performance with compressed assets, SVGs for vector elements and lazy loading for media.

Testing & QA

Cross-browser and device testing across desktop, tablet and mobile. Resolved browser-specific interaction issues.
Accessibility tests: keyboard navigation, visible focus states, ARIA roles on dynamic components and contrast checks (target: WCAG-conformant experience).
Usability reviews with the client to iterate on copy and flow before launch.
‍

Outcomes

Delivered the 18-page site within the 7-week timeline and on budget.
Client feedback was very positive — they were especially pleased with the animations and the storytelling approach. (Insert client quote here.)
The client team can now add and manage events/resources through the Webflow CMS without developer support, reducing their reliance on engineering resources.

Challenges & learnings

This was one of my first large Webflow projects; I had to learn several advanced animation and Webflow techniques quickly. That learning curve was challenging but massively improved my front-end and performance optimisation skills.
Ensuring consistent behaviour across all browsers required lots of testing and small, targeted workarounds.
I would have liked to track post-launch analytics and SEO outcomes more closely; the client had alternate plans for ongoing SEO and analytics management. If available, I’d include launch metrics and conversion KPIs in a future update to this case study.

What I’d add if we did this again

Instrumentation for analytics before launch (page load, conversion funnels, event sign-ups) so impact can be measured.
A longer usability test round with target audiences to quantify comprehension and confidence.