"Exo Moments" Campaign
This project involved creating the first-ever landing page for the exo autumn campaign. The core challenge was to design a highly flexible, blog-style page that could seamlessly integrate diverse media (videos, articles, images) while maintaining a structured, user-friendly, and mobile-responsive design. The goal was to support the campaign's theme: encouraging public transit users by showing passengers they can "ride along" with exo and take time for themselves.
Service
UI/UX Designer & Integrator
Duration
2 weeks
Client
exo (Réseau de Transport Métropolitain)
The requirement was to design a brand-new landing page for the autumn campaign that satisfied the marketing team's need for a multi-media, blog-like experience. This meant creating a structure that could easily incorporate various content types (videos, articles, links, audio) and adapt to new content releases over the campaign's duration, all while delivering an intuitive and mobile-friendly scrolling experience.
The main goals for this project were to:
Support Campaign Strategy: Create a high-impact page to encourage public transit ridership by highlighting the benefit of saving time.
Modular Content Integration: Design a flexible system that allows the marketing team to easily add new content (acting as a "blog" container).
Mobile-Friendly Usability: Ensure the page offers an enjoyable, smooth, and easily scannable scrolling experience on mobile devices.
My process focused on establishing a solid foundation for design coherence and content flexibility.
Foundational Research
As this was my first project, I conducted extensive research into the existing exo website's look and feel and component library to ensure the new landing page was completely coherent with the brand aesthetic.
Component Strategy
I created a detailed document containing a table of reusable components (text blocks, image containers, media embeds) and their intended use. This became the basis for the design.
Prototyping & Flexibility
To demonstrate the system's true flexibility, I provided the marketing team with a Figma component library and two distinct layout prototypes.
The first prototype acted as a functional inventory, listing every available media option (text, images, articles) in strict, separate categories to validate technical requirements. The second prototype showcased a mixed, organic layout, demonstrating how these components could be woven together seamlessly rather than isolated rigid sections. This visual proof of the page's modularity bridged the gap between design and content, leading to immediate approval.
Figma - Prototype of the "mixed" layout.
Initial Information Architecture
We agreed on a clear top-to-bottom hierarchy: Header/Introduction → Campaign Visuals → Content Blocks → Recommended Articles/Newsletter Sign-Up.
Figma - Prototype of the initial information architecture.
Mid-Campaign Integration Challenge
As the campaign progressed, three YouTube videos (one portrait and two landscapes) were released at different times. I successfully integrated them immediately after the campaign visuals for maximum discoverability, rather than burying them at the end of the page.
Figma - Prototype of the landing page with 3 videos.
The final landing page successfully bridged the marketing's creative vision with core usability principles:
Blog-Style Flexibility: The component-based structure allows the marketing team to easily update the page with new articles and media, achieving the primary goal of the project.
Prioritizing Content: Strategic placement of the campaign visuals and newly released videos high on the page ensures they capture immediate user attention, optimizing the flow of information.
Responsive Multi-Media Grid: I solved the complex integration of mixed aspect ratio videos by developing a robust, mobile-friendly grid. This ensures a clean, enjoyable scrolling experience on any mobile device, a key objective for the campaign.
High-Contrast Footer: Included recommended articles and a prominent newsletter sign-up form in the footer to drive secondary conversions.
The biggest challenge was overcoming the initial steep learning curve of building a professional webpage design from scratch. The invaluable guidance from coworkers, combined with proactive research (building the component inventory), allowed me to succeed. A key technical learning was the foundational importance of mobile responsiveness and how information architecture (prioritizing critical content at the top) is essential for maintaining user attention on long, blog-style pages.