Translated agency-supplied interface designs into a responsive Webflow site, personally implementing the horizontal timeline, refining additional pages and correcting a blurry logo.
Project Overview
Context and purpose.
The Shawn Mendes Foundation needed a distinctive website for its youth changemakers, initiatives and history. Agency partners supplied the visual direction and interface compositions. My role was to translate that work into a responsive Webflow experience, including the horizontal Our Impact timeline, supporting pages, CMS-backed content and production-ready interaction behaviour.
Objectives
What the project needed to achieve.
Carry the agency’s creative direction into a functional responsive build without claiming authorship of the supplied visual design. Make the milestone timeline understandable across screen sizes, create maintainable content structures, implement purposeful motion, and ensure the site could support changing foundation stories rather than behaving like a fixed presentation.
The Complexity
The problem, constraints and competing priorities.
The supplied static frames established the look, but not how horizontal scrolling, transitions, responsive fallbacks, motion or content updates should work. Original Webflow Designer evidence shows 57 timeline-named elements on the Our Impact page, including 28 elements styled Timeline Event, 26 styled Timeline Paragraph, two Timeline Navigation elements and a separate Mobile Timeline section. These are structural implementation counts, not a claim of 28 distinct milestones or proof of production interaction quality.
My Role
My responsibilities, ownership and collaboration.
I owned the design-to-build translation: implementing the site in Webflow, building the horizontal timeline and interactions, refining supporting pages, resolving responsive issues, correcting a blurry logo and configuring CMS-backed content. I worked with the agency team and 23/7 Global while preserving the supplied creative direction. My contribution was translating design intent into working behaviour, reusable structure, responsive QA and maintainable implementation.
The Pivotal Decision
The options, trade-offs and reasoning behind the key choice.
I treated the timeline as a responsive editorial system rather than shrinking a desktop animation onto smaller screens. The original Designer source contains a breakpoint-specific Mobile Timeline that becomes active at the medium breakpoint, showing that mobile needed its own content flow. This approach protected readability and narrative sequence while allowing the desktop experience to remain more spatial and expressive.
The Outcome
What was delivered and the impact it made.
The result was a responsive Webflow experience that carried the agency’s visual concept into a working site with interactive timeline storytelling and CMS-supported content. The foundation’s official impact history records US$250,000 in need-based scholarships in July 2020 and a US$10,000 Changemaker Award in September 2020. Those figures describe the foundation’s programme history and provide context for the content represented in the timeline; they are not outcomes caused by my website work.
Reflection & Next Steps
How this work shaped my product design approach.
This project sharpened my ability to collaborate across creative ownership boundaries. A strong implementation can preserve someone else’s visual direction while still requiring substantial product and engineering judgement around behaviour, responsiveness, content modelling and maintainability. If I revisited the work today, I would validate keyboard navigation, reduced-motion behaviour, timeline comprehension, completion rates and CMS authoring efficiency so the quality of the interaction could be evaluated beyond visual fidelity.
