Show pages
In addition to offering live events DAZN had a vast catalogue of documentaries, series and films, this project aimed to provide improve the discoverability of these content types.
My role: Lead UX.UI · iOS and Android
Problem space
Currently all content associated with documentaries, series and films were difficult to find for the user, they were mixed with the live events catalogue. This meant when you had finished watching one episode from your favourite series it wasn’t easy to find the next episode or find out more information about the show.
FocusCreate a seamless discovery experience
Creating a scaleable destination page across multiple content types
Creating visual differences in the catalogue for shows versus live content
Scaling the design for destination pages to audio format content
Research & insights
Throughout this project I implemented an iterative process of using learnings from user testing sessions to help guide the end solution. This involved creating a series of prototypes in Figma, running unmoderated test and gathering valuable insights from analysis sessions.
General navigation
One of the main focuses was navigation of the destination page to understand if a user was able to find what they were looking for, whether it was new content or more information about the show. This was done by asking users to show how they would perform a number of simple task. This allowed me to understand a users navigation mental model.
Finding content
I carried out follow up sessions with very specific tasks replicating real world scenarios such as trying to find the next episode of a show after a week of watching the first episode. This helped me to understand that a user expects the most relevant content to always be at the top and they don’t have to find it.
User feedback mechanics
Allowing users to give feedback on content would help drive recommendations. I tested multiple feedback mechanics based on different forms of iconography such as faces, hand gestures, hearts and rating percentages. From testing I learnt that all of the options had some level of ambiguity to them, some more than others. As a result users felt the ratings didn’t help them find more content.
Design decisions
The design process was iterative and collaborative, involving testing multiple design hypotheses on usertesting.com and making data-driven changes based on user feedback. Demos were conducted with engineering and product teams throughout to identify and address technical constraints early.
Scalable destination pages
I developed a new page structure that flexed across documentaries, series and films, this was achieved by creating modular elements that were used only when required. Creating familiarity across content types was important to ensure users found it easy to navigate.
Creating visual differences
in the catalogue
The existing catalogue had a mix of content types with thumbnails all at 16:9, to create a visual difference I came up with a portrait tile that had 2 layers, the first being the show graphic and the second the show logo. This allowed us to create additional animation when interacting with shows.
Helping users find
relevant content
From user testing I understood how users navigate a page to find content, I developed a dynamic hero section that would update depending on if a user had watched a show versus never watched an episode. With dynamic buttons and progress bars this helped a user to identify the latest episode without scrolling
Scaling for multiple formats
When developing each component for the destination page I stress tested it against audio and video formats. I took this approach to ensure my design solution was scalable for business growth knowing that DAZN wanted to provide more than just video content.
Working with engineering
Design specs were created for each platform, and demo sessions were held with engineering teams at key milestones for feasibility feedback. The project involved close collaboration with engineers and product teams, enabling a phased release and efficient market launch with incremental updates.
Release 1
The first release contained the new destination page across all video formats whilst we waited for the backend to unlock a more personalised experience
Release 2
The next release involved unlocking the dynamic hero section and having a personalised experience now we were able to detect what episode you had watched last
Outcome
This project created the foundations for all non live sporting content, the modular destination page helped users to find content with ease and further recommendations for similar types of content
+62%
Watch time of shows
+25%
Increase in users watching multiple episodes in a session