Home
>
Case Studies
>

Shawn Mendes Foundation

The Shawn Mendes Foundation (SMF) is dedicated to empowering youth change-makers by providing a platform to amplify their voices and support causes they are passionate about.

1. Project Overview

The Shawn Mendes Foundation (SMF) is dedicated to empowering youth change-makers by providing a platform to amplify their voices and support causes they are passionate about. I was tasked with bringing this vision to life by developing a unique web experience that showcases the foundation’s initiatives in an engaging and interactive way. This project involved collaboration with a local agency and leveraged Webflow for dynamic development.

2. Problem Statement

The foundation wanted to create a digital experience that not only informed users about its mission but also inspired and engaged them through innovative design. A standout feature requested was a horizontal timeline to narrate key milestones in a visually captivating way. The challenge was translating the static designs into a seamless, interactive, and functional component within the Webflow platform.

The Shawn Mendes Foundation Logo and main menu

3. Objectives

  • Implement a horizontal timeline: Build a dynamic and interactive timeline feature based on the provided Adobe XD designs.
  • Deliver seamless animations: Enhance user engagement by utilizing Webflow interactions and animations.
  • Ensure scalability and responsiveness: Develop a website experience that performs flawlessly across devices and platforms.

4. Design Process

Collaboration & Research:

  • Partnered with a local agency and 23/7 Global, who provided design inputs via Adobe XD.
  • Researched best practices for implementing horizontal layouts and timelines in Webflow to ensure a smooth user experience.

Wireframes to Development:

  • Translated Adobe XD designs into a functional prototype within Webflow.
  • Incorporated Webflow’s CMS capabilities for scalability and content management.

Interactive Features & Animations:

  • Used Webflow interactions to create smooth animations for timeline transitions.
  • Focused on delivering a horizontal layout that highlighted key foundation milestones with clarity and style.

Testing & Iteration:

  • Conducted responsive testing to optimize for various devices.
  • Adjusted animations and timeline interactions based on client feedback to ensure functionality and aesthetic appeal.

5. Results

  • Delivered a fully functional, visually stunning horizontal timeline feature that aligned with the foundation’s branding.
  • Enhanced engagement through smooth animations and intuitive navigation.
  • Met project deadlines despite pandemic-related constraints, demonstrating adaptability and effective remote collaboration.

6. Tools & Technologies Used

  • Adobe XD: For initial designs and client collaboration.
  • Webflow: Development platform used for building, animating, and hosting the site.
  • Webflow Interactions: To create seamless animations and transitions.

7. Impact and Future Applications

  • The interactive timeline became a highlight of the Shawn Mendes Foundation’s website, effectively showcasing its milestones and inspiring youth visitors.
  • Demonstrated how thoughtful animations and interactive elements can elevate storytelling in web design.
  • The success of this project reinforced the potential of Webflow for developing complex, visually engaging websites.

Logistics • Transportation

Brand new Design System for logistics company

A robust, adaptable design system was built as a solid foundation for a complex logistics platform using Figma and react components.

The Logistics Alliance Inc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Cancel

Thank you! Instant Access Below.
ENTER
Unable to submit. Please try again.
Telecommunications

Credit Calculator built for telecom provider

This Credit Calculator was designed to help call center agents calculate and offer appropriate credit values to customers effectively and intuitively.

TELUS Communications Inc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Cancel

Thank you! Instant Access Below.
ENTER
Unable to submit. Please try again.
Telecommunications

Designing a 911 Testing Portal for telecom giant

Designed to streamline the validation of emergency communication systems, in a scalable, user-friendly, and accessible manner for engineers, administrators, and regulators.

TELUS Communications Inc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Cancel

Thank you! Instant Access Below.
ENTER
Unable to submit. Please try again.
Logistics • Transportation

Shipment Platform for Logistics Company

By accommodating 3 business levels and 17 unique user types, this new logistics platform provides a cohesive, streamlined, and automation-driven user experience.

The Logistics Alliance Inc.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Cancel

Thank you! Instant Access Below.
ENTER
Unable to submit. Please try again.
SEE MORE

Let's Connect!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
chatsimple