Revamped the Content Discovery Tool for Documentary Lovers
Product Designer, Figma, Adobe XD, Adobe Illustrator,
User Research, Interaction Design, Visual Design
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...
Giloo.ist is an online streaming service offering members documentaries from east to west, from award-winning to indie. Based in Taiwan, Giloo.ist is the widow for thousands of its audience to stories happening around the world.
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.
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.
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.
In the old version, the thumbnails of the documentaries are not disclosing enough information to attract users.
I shift from displaying new and popular documentaries to stressing on what issues users can learn from the documentaries on Giloo.
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.
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.
I added more effective information to the thumbnails to inform users more about the documentary and attract them to click.
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?
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 decided to edit the platform's IA by adjusting the pages and their intent. Three significant changes are:
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.
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.
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".
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.
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
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.
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:
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.
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.
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.
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.
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:
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.
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.