Providing more clarity of series progress at a simple glance.
Project challenge.
Blim's original Series details page design was derived from a previous template developed for movies. The design was tab based and did not support episodic content.
Heat map tracking data showed that users were finding it difficult to browse through episodes. Interviewed users pointed out various UI elements seemed clickable when they were not, the tab component made it confusing to identify which episode they had watched last and some of them were clicking the wrong episode because of problems with the episode list implementation.
Since watching shows on blim is an essential part of the product experience fixing the details page was critical.
Our goals.
It was clear that we needed to have clear series progress and navigational cues at a glance. Improving on this point would also help series engagement, so we recorded the average episode drop off before the redesign.
Process.
After establishing our goals and creating a user journey for the details page we started wireframing. Different layouts were explored and analyzed. We then assembled a prototype and user tested readability, CTA performance, multiple screen resolutions and episode accessibility. When we found or optimum wireframe the UI process started.
Different wireframe layouts were tested before moving on with the final version.
Once the wireframes and prototypes were done I worked closely with Luis Espinoza on the final UI design, an updated and polished look was devised and responsive versions were created. Behavior and interaction was documented and then handed off to the development team.
Responsive versions of final UI design,
Results.
After updating our design and observing heat map data via Mouseflow, the results confirmed that users were now clicking on the appropriate actions. Business intelligence data revealed jumping to the next episode after completeness increased an average of 35% on serialized content and episode drop off was diminished improving our flagship and exclusive series viewership.
BEFORE. Heat map data via Mouseflow indicating confusion and scattered clicks on navigation.
AFTER. Heatmap data via Mouseflow supporting an improvement on navigational actions and cues.
My role in the project.
User Experience Design Lead. Responsible for coordinating interviews, prototyping, testing, documentation, UX and UI design.