The Fan Zone

And how content changes the user’s mindset.

By the end of 2015, I was asked to design a new UI for our end users; we wanted to provide a way for them to discover and consume videos easily. And since content creators can upload almost any kind of videos on our platform (from news to movies, to sport games), our end audience can be very broad.

After deciding on a couple of user personas (movie and sports fans), and a couple of days of sketching, I came up with this stream-style solution:

Users would either scroll in the middle to browse through full articles or use the sidebar to get quick access to the content. Items would be ordered chronologically.

I presented this design during a meeting, and although everyone seemed to like it, nobody was particularly excited. The reason was that this UI is too conventional, and they wanted something new, something that could create big impact on the user.

Then I remembered a library Carlos López had shown me: the bubble UI, which is very similar to the UI of the Apple Watch. And we thought maybe this was a good starting point for creating our own UI for exploring videos. Instead of circles we could use rectangles as containers to create a grid. Users could freely scroll or drag the canvas, the elements on focus would zoom in (like inside a bubble), and the item on the center would automatically reproduce the trailer or preview of the video. Finally, users could click on each of these elements to get a detailed view, and optionally buy and watch the full video.

Initially, it looked like a good idea; we pictured movie fans watching trailer over trailer until deciding what movie to watch, same thing with sports fans, they could watch the preview of several games or interviews, and then choose a particular video to buy. We also picked a name for it: The Fan Zone.

As usual, after deciding on a solution, I wrote down several assumptions:

  • Users won’t care about the ordering of the videos (since the layout is a grid with no apparent order)
  • Users will understand the navigation of this UI (scrolling and dragging).
  • Users will have a positive opinion of this UI.
  • Users will understand they need to click on each element to get a detailed view.

This time, my approach was different. Instead of presenting static mockups, I ended each iteration by showing simple animations which described the interaction of the elements on the grid. This way I could check with the front end developers that my solution was doable, and since they were also discovering how far we could get, most of the time I ended up doing changes to the initial design based on the possibilities.

This is one of the first ideas I came up with:

Grid canvas for navigating among videos
Transition to the “Details View”

As cool as it may look, it was very hard to come up with an algorithm to scale up and down the elements on the grid and at the same time fill in the empty spaces that the items leave when the whole grid changes its state.

So I continued iterating based on the developers’ feedback, and tried to be very flexible during the process because we had a big constraint in front of us: performance. Having all these animations at the same time, plus drop shadows, gradients, and opacity was a huge challenge. We removed most of the effects that were only cosmetic and added them only where they were needed, which was good because it helped me simplify the design a lot.

Navigating on the Fan Zone

After several iterations, we ended up delivering what in my opinion was a great solution.

The first version of our solution.

THE FIRST ROUND OF TESTING

Before testing this first approach there were a couple more assumptions I wanted to validate:

  • Users will notice the elements on the bottom right corner (the one for turning the sound on and off and the other one for taking the user back to the most recent video, which is located in the middle of the canvas).
  • Users will understand how to filter videos by category.

This is how I tested these assumptions:

  • Recruited five 25 to 35-year-old users who were active on social media (we wanted tech savvy users) and who had already bought videos or subscriptions online with their own credit card.
  • Asked them to navigate freely through a Fan Zone which contained a bunch of independent movies.
  • Asked them to filter the grid by a specific category.
  • Asked them to find the way to watch a full video.
  • Asked their opinion of the way they navigate through the videos and if there was something they liked or disliked about it.
  • I recorded everything with Camtasia® and shared the results with Product Management and Development teams.
Fan Zone of independent movies

And now the results.

This is what went wrong:

  • Users felt frustrated by having the sound on initially.
  • It took some time for them to find the button for turning the sound off (the one in the bottom right corner).
  • The videos were ordered from the center outwards, which we know is something users wouldn’t deduct by themselves, but we were also assuming the ordering was not relevant to them. For this same reason, the button for taking the user back to the center/the most recent video didn’t make sense to them.
  • When the preview or trailer ended, it started playing again automatically, this caused frustration for some users.
  • Three out of the five users didn’t know they should click on the active video to open the detailed view.

Now, what went well:

  • Initially, the video on focus looked like a modal window to them, so the first thing they tried to do was to close it. But then, when they “clicked outside” and the canvas changed, they all understood how was that they were supposed to navigate. Some of them scrolled over the canvas, others clicked and dragged, and just one user clicked on the videos without dragging. The important thing is that nobody got stuck.
  • There was an actual “aha moment” when they discovered how to navigate, and they all felt very pleased with the way the canvas moved and the videos zoomed in when on focus. They all made positive comments about the UI and I not even asked for their opinion.
  • When I asked how did they think the videos were ordered all of them said they were just randomly placed. The important thing is that they really didn’t care, they felt comfortable just by exploring through the canvas.
  • They all found the way to filter the videos on the canvas by category (horror, drama, documentary, etc.)
  • The two users who opened the detailed view of the video ended up buying the full movie without any problem during this flow.

At the end of this first round of testing, we were very happy. The problems that we found were not hard to fix, like the sound or the loop on the trailer. The important thing was that the navigation was pleasing, they felt impressed by the way they interacted with the canvas, and they didn’t really care about the ordering. We felt relieved; we had invested a lot of effort in this first version, and we were worried they might refuse it.

THE SECOND ROUND OF TESTING

For the second round, we decided to do the following:

  • Turn the sound off by default on the canvas.
  • Add a general button (bottom right corner) for turning off the action of auto-playing the videos on the canvas.
  • Trailers wouldn’t loop anymore, once ended we’d show two options: one for playing the trailer again and one for going to the detailed view.
  • We added a tooltip to each element on the bottom right corner to see if this time users understand their function.
  • Since the categories inside the active element are clickable, users assumed the rest of the video wasn’t clickable, and they never got to open the detailed view. So we decided to take the categories out of the container and see if this helped.
Changes on the UI before the second study

This time, we decided to recruit sports fans and show them a Fan Zone with videos of a rugby team (replays, interviews, pre-match videos, etc.)

This is what went well:

  • Having the sound off by default and the trailers reproducing only once reduced the users’ frustration a lot. It was the right decision to make.
  • The screen at the end of the video with the two options was very helpful, they all found the way to the detailed view this time. I assumed the floating categories outside the video were helpful as well.
  • They all liked the way they interacted with the canvas.

This is what went wrong:

  • The elements on the bottom right corner are completely out of sight. They never pay attention to them because they are entirely focused on the canvas.
  • This time, the ordering of the videos was extremely important to them, and they felt very frustrated by not knowing how to find the most recent video and the one before that one and so on.

After the second round of testing, we were confused. We fixed most of the usability issues found during the first round, but the fact that they wanted the videos ordered in some way was very problematic. The essence of the Fan Zone was that they could browse freely trough a canvas, changing the layout from a grid to a timeline would be weird and this “bubble effect” wouldn’t be possible to accomplish anymore.

There were two things we changed for this study: the user profile and the content. We switched from a general profile to and specific one (sports fans) and from movies to rugby games. So, what made the difference?

THE THIRD ROUND

The company was pivoting into a more specific market: sports fans. So it was important for the Fan Zone to work with sports content. I was starting to assume that the content dictated the fact of whether the videos should have an order or not, which would “kill” our “star product,” but I could be wrong.

So we decided to recruit regular users (not sports fans) this time and show them sports content. We only added one more feature: a couple of onboarding screens. These screens would explain how the videos are ordered, which by the way, is through a spiral (from the center outwards), and since they would never be able to navigate chronologically through this disposition we also added “previous” and “next” buttons. Lastly, we introduced the “sound,” “autoplay” and “most recent” buttons through this onboarding.

A couple of steps from the onboarding

I know, this was a long shot, and as a UX designer, I thought this was only the proof that the product should change instead of educating the user of how to use it. But we were too attached to the positive feedback we got initially. We had to give it a try.

The results

It was all about the content. Even “regular” users felt weird navigating in the grid and started to look for a way to change the ordering of the videos. They talked about scenarios in which they would like to see the content chronologically ordered so they could browse through the most recent videos. They all mentioned a timeline view.

Also, no one paid attention to the onboarding, they all went through all the steps without reading the text. The “previous” and “next” buttons were not relevant to them. And since the ordering of the videos wasn’t clear, the “most recent” button was still very confusing.

At the beginning, they still talked positively about the interaction on the grid, but they needed something different.

Conclusions

The content changes the user’s mindset.

It was logical for them to feel comfortable with just filtering the grid by category (horror, comedy, drama, etc.) when exploring movies. The dates were not relevant to them in this scenario, at least not initially, but once the content changes so do their needs, and the Fan Zone was not a product that fulfilled the needs of users who browse through content in which dates are important.

At the end we decided to go with several layouts, content creators will decide how do their Fan Zones should look. The “grid layout” is only one of the options, recommended for those Fan Zones in which the ordering is not relevant.

Thanks for reading.