VIAFREE Series Page REDESIGN
The series page on the web was to be redesigned to align with new UI style I was establishing for the product and also to remove the problems and frictions the current version had. I did two rounds of remote user testing and an in-house user test to see the problems that users encountered when doing a task list on the live version of the site. Open ended questions were also asked about what they would expect to see on a series page and what was lacking on ours.
Some problems that arose were:
The main image used for cover art took the entire screen up, and it was also cropped with a swoosh that hid a lot of detail, users did not like that they had to scroll down to see information on the series.
Season Select was tricky to figure out, hard to glance and see what seasons were available, and some shows had the horizontal select go off screen.
Favourite was seen that they liked the show, not that it would save to a list for later viewing.
Users wanted to know how many episodes were available.
The episode list featured episodes from series that were an accompaniment but also had their own page.
Recommendations only showed three items, and users may already watch those shows. These weren’t even recommendations, these were three shows from the same theme page as the series they were on. Since theme pages were being removed in favour of the new genre pages, this would have to be removed.
The mobile web experience was terrible.
The episodes were “a sea of grey”.
Continue Watching was plopped in the middle of the cover hero image.
With this feedback, I decided that there were some things that were going to be the pillars of the redesign:
Updated UI with use of colour and visual heirarchy.
Informative metadata to be exposed.
Mobile Web experience priority.
Information about the series to be above the fold.
Recommendations.
Removal of non related episodes.
Season Select improvements.
Hero
This is what most users saw…
We know the hero image was too big as it forced information down, so the image was not allowed be it’s own element. The main issue that users found was that when they came to the series page, they had to scroll down to see information, that means that information would have to be brought up over the fold.
Now about that information, we knew certain things were important to have:
Series Title (fair enough)
Season Select
Season Information
Publishing Info
Cover Art
Channel Info (Requirement)
Continue Watching / Play
Favourite Feature
So with this, I began exploring concepts!
In these mockups I experimented with keeping the hero size but blending it into the page, but white gradients over image looked like milk in water and didn’t feel right. The season select also didn’t fit right as it would not work for large series with multiple episodes, and making this work on a mobile would be tricky. The metadata started to feel right and so, a second iteration of concepts was underway.
In these mockups I tried different styles for the hero presentation, keeping in mind if there were to be moving content / trailers for a series. I also removed the old season selector as a new one would be used in a dropdown style. The hero was getting closer to stakeholder and developer acceptance, and the first idea was to be refined as the other versions were a bit colourful for the current aesthetic of viafree. So back to the drawing board to refine the hero and see how it would work in the mobile apps. Now the designs had to work in the edge cases to be a successful design, so these refinements focused on the following cases:
Longest title is 60 characters long
Mobile titles must fit on two lines of text.
4 possible social media links
Long descriptions of series.
Non numerical named seasons fit in dropdown
No description available for series
Here we can see that the hero was starting to refine as it was satisfying the edge cases. After another review with stakeholders we decided to go in this direction with smaller changes as follows:
Title and description would take 2/3rds of area, not the full with.
Button would be contextual for continue watching and start watching.
Season Select would be a dropdown but would be closer to the episode list for context.
Genre and channel information would be removed.
Visual Heirarchy added to episodes information
That lead to the refinement below. The episodes were also now supporting the timestamps and labels that didnt exist previously. The recommendations slider was also in effect.
The material select was using the new dropdown menu I designed for the design system and tabbed menu for component reuse.
New Series Hero
This hero also translated to the mobile web much easier than before. The episodes went from vertical to horizontal. to reduce time needed to scroll through lists. The dropdown made selecting a season much easier on mobile.
