Home
>
Case Studies
>

Shawn Mendes Foundation Site

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.
Telecommunications

Credit Calculator for Telecom Giant

This Credit Calculator was designed to help call center agents calculate and offer appropriate credit values to customers. This solution replaced an outdated legacy system, addressing inefficiencies and ensuring adherence to financial and regulatory standards.

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.

Logistics • Transportation

Design System for Logistics Company

A robust, adaptable design system was built as a solid foundation for a complex logistics platform. Using Google's MUI as a foundation I designed and built all necessary 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.

Telecommunications

NG-911 Testing Portal for Telecom Company

Designed to streamline the validation of emergency communication systems, ensuring they met regulatory and performance standards. Using the existing Design System as the foundation, the portal was created to be scalable, user-friendly, and accessible 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.

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. Consistency, accessibility and usability are all part of this collaborative project's DNA.

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.

Banking • Finance

Unified Mortgage Flow for Big Bank

Designed to function independently or together depending on the user's needs, these tools support both first-time applicants and existing homeowners looking to switch from another bank.

CIBC

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.

SEE MORE

Let's Connect!

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