Redesigning the Home Page of FOX+
My role
- UI/UX design
- Stakeholder communication
- Design review
The team
Working with content team, project managers, developers
Platform
Mobile, Web, Tablet, TV
Company
FOX Networks Group (Hong Kong)
Background
FOX+ is a video-streaming service that combines TV series, Hollywood blockbusters, Live sports and inspiring documentaries.
​
Like many other streaming services, our home page is used to promote the highlighted shows of the month. Before the redesign, we showed them in banners with one big highlight and 4 smaller highlights.
Problem
The problems with the old design were:
1. There was not enough information for user to know what kind of show it is.
2. There was no call-to-action to encourage user to interact
3. The imagery looks too small on phone, especially the text on key art logo
​
To increase engagement, the senior management decided to change it into a carousel. This was an opportunity for us to improve the overall experience of the homepage for our users.
​
Soon after listening to the brief, I initially felt it was a pretty simple task. There shouldn’t be much variation of carousel design right? I did some market research on streaming apps with carousel design like iFlix and HOOQ. I also studied about the guidelines for best carousel design. Then, when I started sketching and creating wireframes, I realised it was going to be much more complex than I earlier imagined.
Understanding Stakeholder Needs
Later on, I understood there is no point to design without real content. The FOX+ content team curates and schedule the content in the app. They are the users of this interface. I had to know what information they want to put in order to design with it. So, we had a meeting with the content team for feedback. After discussing our initial ideas, I realised it could get really complicated when it involved dynamic content.
For example, if the image ratio is not the same as before, they will need to create new image assets and it will cost a lot of man hours. The logic of the play button for series content is another big discussion. What if we want to promote season 8 but the user hasn’t watch the show before? There are lots of use cases to consider in order to design the most ideal user experience.
UI Design
With the concerns in mind, we listed out all the use cases of different content and related logics for developers to follow. At the same time, I started creating Hi-Fi interfaces for all platforms.
It’s not copy-and-paste from platform to platform
In the process, I realised each platforms has a specific interaction method for carousel. For example, we use swiping on mobile devices. But for website, extra tabs need to be used for switching screens. And for TV, you need extra effort to make the navigation clear to user. I had to design the interaction and define the logics carefully for each of the platforms.
​
With different screen sizes, information to be shown also differs. On mobiles, there is not much real estate to put extra information about the show. But for tablets, web and TV versions, there are much more space to use. The challenge is to balance the consistency and effectiveness of using screen real estate across these devices.
Final Design
Result:
-
Imagery is clearly visible compared to before.
-
It looks much more appealing to user.
-
It allows user to watch content directly, with details of the shows like number of seasons and duration.
-
Better usage of real estate on platforms with larger screen size.
-
Description of the show can be added by content team.
Learning Outcomes
The project was not completed as quickly as the design & development was finished. In fact, some of my most important learnings were after the development, in the real world scenario.
Pixel-perfect DO matter
In evaluation stage, we reviewed builds from developers and gave feedbacks so that it looks more like what we’ve designed. This process took over 10 rounds but still it was not pixel-perfect. But I decided to accept it if the build was at least 90% same as my UI design mock, otherwise it could never be launched on time.
However, after the design was launched, we discovered some key art logos were blocking the character of the image behind. The position of logo needed to be extremely precise. Content team was creating images based on our guidelines, but the developer hadn’t meet the expectation. Therefore, it is necessary to constantly iterate with the developers until they make the pixel-perfect UI.
Create UIs of all use cases
Another major learning for me from this project was the importance of planning for all use cases. In the design, everything looks so perfect, with 3 lines of description. But what wasn’t considered during the design stage was, what if content team didn’t put any description? or put only 1 line of description? How will the button and logo be anchored? This wasn’t thought through before passing on to developers.
During the discussions with the content team, we should have also discussed deeper about the use cases for the description. Turns out they would want to put simple text there as a hook, such as “Same Day as the U.S”. That would generally take only one line. If the description is within one line, it would be centre-aligned to make the layout look balanced. So we immediately created a file to state all the logics of alignment in different situations and platforms. It is a very important process when designing UI.