Streaming Service
for Documentary

Revamped the Content Discovery Tool for Documentary Lovers

Product Designer, Figma, Adobe XD, Adobe Illustrator,
User Research, Interaction Design, Visual Design

I also designed Giloo's Design System →

Problem Statement

How may I improve Giloo's current content discovery tool and reduce its bounce rate?

The bounce rate of Giloo's content discovery tool is too high (over 75). Looking at Google Analytics, we realized that users came to the Giloo's online-streaming service from multiple places. However, they left really quickly. Hence I'm assigned to approach this problem in a UX perspective and come up with a hi-fi mockup. So...

Who is is an online streaming service offering members documentaries from east to west, from award-winning to indie. Based in Taiwan, is the widow for thousands of its audience to stories happening around the world.

What did I do?

I was a Product Design Intern. For this project, I was in a team of Product Manager, 4 Developers, Content Strategist, and Marketing. To fulfill the goal, I did User Research, UX Solution, and Design System.

Current Version

This is the current version.

I identified several main problems to have a clear scope for further improvements.

Problem A

The displaying strategy is not answering to the users' questions

Giloo's users are social activists, coming here to look for documentaries that can teach them about social issues. However, the previous displaying strategy is plainly displaying the new and popular documentaries.

Problem B

Overload of similar information

The older version of Giloo's content discovery tool spent most of the layout repeating similar thumbnails. Users mentioned that they usually got lost while scrolling and hence left.

Problem C

Users can't relate to the thumbnail

In the old version, the thumbnails of the documentaries are not disclosing enough information to attract users.

New Version

This is my solution.

I approached the problems with a user-research-informed strategy and an effective design system. And then came up with it.

Solution A

Focus on showcasing the issue and the relating documentaries

I shift from displaying new and popular documentaries to stressing on what issues users can learn from the documentaries on Giloo.

Solution B-1

Assigned the principle of "Engaging" to the Design System

To be engaging, the visual should have heigh readability and clear hierarchy. I assigned the new principal and revamped the elements in the Design System accordingly.

Solution B-2

Mapping the sections with users' journey

I devised three sections of content displaying that can answer to users' journey when they enter Giloo. Further, this can navigate users through their documentary discovery.

Solution C

Informative Thumbnails

I added more effective information to the thumbnails to inform users more about the documentary and attract them to click.

So how I got to the solution?
And how exactly does it work?

Story A

The current Information Architecture (IA) of Giloo's platform is loosely tied to users' expectations. Hence I applied the insights from users and restructured the IA accordingly.

Current IA is focusing on showcasing the new and popular documentaries

Information Architecture is directly presenting users with what this product can do for them. The current IA is stressing its ability to offer users new and popular documentaries. For instance, the hero section on the Home Page shows a trending documentary; the playlists are set to showcase the newly-released and popular documentaries.

Further, the flow this IA is suggesting is documentary-centered. It started by attracting users with the recommended documentary and then the new and popular documentaries. And if the users want more, they can go to the Genre Page to look for more. However, is our users really here looking for "documentaries"? What is the intention behind it?

However, the intention of Giloo's user is to learn about social issues through documentaries.

I looked back at the Persona and found that our users are a group of curious social activists who have a clear intention of coming to Giloo. They came here from our partners, such as Amnesty, National Geographic, Women Film Festival, etc. Their expectation of coming to Giloo is to learn about the social issues through documentaries. They are here asking what documentary can teach them about Social Issues. However, the current IA does not appear to solve this problem.

I adjusted the current IA to stress on social issues and their related content

I decided to edit the platform's IA by adjusting the pages and their intent. Three significant changes are:

1. Issue-focused Home Page

To attract users to keep scrolling and look deeper, the Home Page needs to meet their expectations immediately. Hence, instead of the new and popular documentaries, I restructured the Home Page to stress the Social Issues and the content(documentaries, articles, exhibitions) about Social Issues.

2. Flexible Documentary Page

The way content is laid out can directly influence users' interest. Instead of the genre, the issues, especially the recent issues, can be more attractive for Giloo's users. Hence I changed the Genre Page to Documentary Page. In the Documentary Page, playlists are arrangeable for content strategists to create issue-based playlists.

3. CTA to Subscribe

Instead of renting a documentary, Giloo is trying to encourage users to subscribe. Hence I changed the Rent Page into a CTA button saying "14 Days Free Trial". 

Story B

The Homepage fails to navigate users smoothly through the content discovering journey. During the user testings, I recognized users got lost easily while browsing.

I devised the user journey map and assigned principles to the Design System to solve this problem.

The current journey map of the Home Page is lack of intention

From the previous exploration in Story A, we know users' motivation here is to look for documentaries to teach themselves more about social issues. However, the current strategy of the Home Page is not answering this need. Hence I devised a new user journey map for the users and then assigned three main sections to the Home Page to adapt to it.

I devised a new user journey and mapped out three sections accordingly

Users felt motivated when they know this is the place to help fulfill their goal, their interests are taken care of, and there is more potential to be discovered. Hence I designed the three sections: Topic, Focus, Playlists, to complete this journey.

Topic:   One weekly issue with three related documentaries
Focus:  List of issues that are popularly searched
Playlist:  List of themed documentaries

Added design principles to the Design System to create a pleasant and consistent visual experience

Currently, the visual styling of the components is inconsistent. The text and image blending made it hard to read.

I was also in charge of devising Giloo's next version Design System. Hence I embedded 2 principles [Engaging, Flexible]  as the Design System 's foundation to improve the visual experience from the components to the structure.


The design should be clean, informative, and appealing to facilitate the content in keeping users engaged.


The design should be sufficient to adjust to the UX strategy's multiple goals while maintaining consistency.

Go Check out the full Design System

Story C

Users can't relate to the documentary's thumbnail. Hence, I dissected the thumbnails into three parts and analyzing them explicitly. This way, I can intentionally design for my goal: attract users to hover and click the thumbnails.


The content (texts) on the thumbnail severely influences users' decisions of their interest in the documentary since documentaries' stills tend to be less telling or engaging. To prioritize the disclosed information according to users' preference, I made several changes:

1 Add tags about the social issues

The titles of documentaries are often too short to be informative. The opportunity here is that Giloo's users are social activists who have a clear intention to learn about social issues. Hence I decided to add tags about the social issues to the thumbnail to attract them.

2 Deduct the English title, Year, and Duration

Listing too much information on the thumbnail can lead to users feeling overwhelmed. To reduce the density and prioritize the content, I decided to eliminate the English Title, Year, and Duration. Since this information isn't determining when users are deciding are they interested in the thumbnail.

3 Add Mandarin Title to the hover state

Currently, there's no Title at the hover state. Since users are not familiar with the documentary, they need to hover on and off the thumbnail to remind themselves what the documentary is. To design with memory in mind, I decided to add the Mandarin Title to the hover state.


At Giloo, since users decide their interest in documentaries by reading the keywords, readability is extra essential. And the readability is hugely determined by the layout of the thumbnails. Hence I made the following changes to improve the layout.

1 Switch to vertical thumbnail to enhance the readability

The density of information on the platform is quite high. The whole screen is covered with 3 rows in total 15 thumbnails, each having 1/3 of its space filled with content. Hence I decided to reduce the density by making the thumbnail vertical. Now, there will be 2 rows in a total of 10 thumbnails, each having 1/4 of its space filled with content.

2 Add a content field at the bottom of the thumbnail

The content can be blending with the background image in the current version, which diminishes the readability. Hence I added a block at the bottom of the image to put the content so that it will not be blending with the image.


The journey does not stop after users hover over the thumbnail! It is also important to encourage users to click it. However, the interaction now failed to do so. When hovering, the trailer will start playing, and there will be a Description and buttons of Mute and Add For Later. Hence I made the following changes:

1. No Autoplay Trailer

The trailer's beginning is not always prioritized to attract users in the first 5 seconds. Also, when the trailer is playing, the subtitle is blurring the texts on the thumbnail. Hence I decided to take out the trailer. This way, users can focus on the short description.

2. Reorganize the Buttons

Users tend to want to know more about the documentary before actually watching it. Also, users become confused about whether clicking on the thumbnail will lead to playing the documentary or going to the information page. Hence I decided to add a More Information button right next to the Play button.