Back
Alternative text for photo

Automating sports big talking points

For the casual sports fans with little spare time or have short attention spans, Key Moment Clips are a way to catch up on the week’s events by just watching the key moments. They can share with friends and never miss another viral or trending moment. Intended to get customers back to the app as a daily habit. Got 5 mins to spare? Open up DAZN and watch today’s Key Moment Clips to catch up on sporting events around the world.

Scope

AspectAnswer
Time8 weeks
Team4 person cross-functional team
RoleUX / Design / Prototype in code
ToolsMiro / Figma / VS Code

Process

This was a fast-paced project, featuring an auto-scrolling film roll that dynamically showcases key moments from various games and sports. I designed and prototyped it using React.js and a back-end clip generator API. Highlights are either curated or auto-generated, played in a sequence defined by a JSON schema. When users visit the page, the film roll automatically plays, but they can pause the autoplay and interact with the page for a personalized viewing experience.

Outcome

  • Creative solution aligned with DAZN’s north star at the time “twice a week, every week,” engaging users beyond live games on the platform.
  • Developed a rapid mobile prototype with network condition testing for validation as a proof of concept to push stakeholder buy-in.
  • Refined animations, timing, and interactions for production engineering to reuse.
  • Taken to live within the DAZN app shortly after.
Understanding user journeys, organizing information effectively, and designing interactions through wireframing.
Exploring design options that complement selected UX patterns.
Sample of React.js prototype source code with annotations and structured insights.
Demonstration of film roll animation in prototype.
Testing prototype interactions under various network conditions for real-world performance.
Completed design ready for implementation.
Completed design ready for implementation.