NBA + OLG Films for Fans

The NBA Film for Fans project was a collaboration between OLG and the NBA to celebrate basketball culture through short story films showcased at the Toronto International Film Festival (TIFF). My role focused on designing an intuitive UI/UX experience that allowed users to explore and engage with fan stories seamlessly.

Role: Sr. Product Designer - UI/UX

Tools: Figma, Miro, Buisnessmap

Problem

The partnership aimed to create a digital experience that highlighted diverse fan stories and their connection to basketball. However, the challenge was ensuring that users could easily navigate between multiple stories and videos without feeling overwhelmed or lost.

Problem Statement - How Might We...

How might we design an engaging and user-friendly interface that showcases multiple fan stories and videos while maintaining clarity, accessibility, and emotional impact?

Exploration

User Research: Conducted interviews and usability tests to understand how fans consume video content and navigate storytelling platforms.
Competitive Analysis: Studied similar storytelling experiences from sports and entertainment brands to identify best practices.
Wireframing & Prototyping: Created low-fidelity wireframes to map out navigation flows and tested them for ease of use.
Visual Design: Developed a design system aligned with NBA and OLG branding, ensuring consistency across screens.

Feasibility

Technical Constraints: Worked closely with developers to ensure video streaming and transitions were smooth across devices.
Accessibility: Implemented WCAG guidelines for color contrast, text readability, and keyboard navigation.
Performance: Optimized media assets for fast loading without compromising quality.

Solution

We designed:

Story Hub: A central landing page showcasing all fan stories with clear thumbnails and titles.
Seamless Navigation: Swipe and scroll interactions for quick transitions between stories.
Video Player Integration: Embedded videos with intuitive controls and minimal distractions.
Emotional Design: Bold typography and immersive visuals to reflect the passion of basketball fans.

Impact

Increased engagement with fan stories during TIFF.
Positive feedback from users on ease of navigation and visual appeal.
Strengthened OLG’s brand association with basketball culture and storytelling.

Takeaways

Storytelling in UI: Designing for emotional connection requires balancing aesthetics with usability.
Iterative Testing: Early prototypes helped uncover navigation pain points before development.
Collaboration Matters: Close alignment with developers and stakeholders ensured feasibility and brand consistency.