project roles
User Researcher, Information Architect, Content Strategist, Visual Designer
Project type
Desktop App / Web Design
project date
April 2021

Bilibili Batch Downloader (BBD)

Bilibili Batch Downloader is a desktop app that helps users to download, monitor, and manage video content from their favorite content creators from one of the largest video platforms Bilibili.

View Project
Bilibili Users Struggle to Organize Their Video Files

Defined the Challenges

My client Quinn consider himself as a data hoarder. The term data / digital hoarder refers to the people that are excessive acquisition and reluctance to delete electronic material no longer valuable to the user; The behavior includes the mass storage of digital artifacts and the retention of unnecessary or irrelevant electronic data. In my client's case, he is a video-data hoarder, which means he particularly likes to download videos from the internet on to his hard-drive. He shared his frustrations with me recently that there's not a lot of video-database-managing-products currently on the market, the only one he's using right now is called Sonarr, which supports downloading videos from different websites but which does not include one of the most popular Asian-video-platform Bilibili. My client is a software-developer, so he was inspired to create a video-database-management app for Bilibili users. However, we are challenged by below questions:

• How to download videos they like from Bilibili?

• How to automatically download new future videos from a content creator they like?

• How to spend minimum effort to manage the video files and make them look organized?

MVP of Bilibili Batch Downloader

Business Requirements

Since I'm also familiar with using Bilibili, here are the major solutions I proposed to my client - the ideal MVP will enable the below features for our users:

• Allow users to manually download and/or automatically download video content from content creators on Bilibili

• Allow users to check, manage, and organize the video files with a few clicks

• Support downloading Danmaku (live comments)

User Survey

Through the survey, I want to find out how often the users search for video content from the internet, what are some negative experiences, what motivate most users to download video and how much they would like to try out a desktop app that help them to download and manage video content from the internet.

Key Findings:

• 59.3% of the participants browse video content on the internet a few times a day
• 80% of the participants stated that they wanted to search for specific video content in mind but then got distracted by other video content on the homepage; the rest of the users stated that they want to revisit a video but the content was deleted by the uploader.
• 59.3% of the participants have downloaded video from the internet
• 81.3% of the participants said that the reason why they want to be able to watch the videos when offline, 18.8% says that they are afraid the content creator will delete the content; the rest said that they feel safe when they have a copy in their hard drive.
• About half of the participants would willing to try an app to help them download and manage videos from the internet.

User Survey Question: How often do you browse video content on the internet?

User Interview

After gathering the data from the survey, I want to have a follow-up user interview session with one of the participants. This helps to erase my subjectivity and my assumption - it helps me to be closer with my user and grow with this project. I think I've found the best participant, who considers himself a digital hoarder.

Key Findings:

• This participant wants to save content that is valuable or that has tremendously helped him.

• This participant likes to download the video and project it onto a large screen to watch with parents (without worrying about internet interruption). He wants to do the same with his children in the future.

• He has a home-lab set up.

• He also likes to collect things outside of the digital world: Movie tickets, museum tickets, plane tickets, etc.

"In this digital world, we are oversaturated by great content but we end up not remembering anything from the internet."
User Interview Notes

User Personas

In order to illustrate the key audience of my product, and to help potential stakeholders gain more sympathy for the target issues, I have built three personas. Each one of them presents a different personality type with different motivations and major pain points. In the meantime, they also share something in common: A need to download in order to keep the video content.

No items found.

Empathy Map

I used to never understand why would someone wants to download videos onto their drive since everything can be watched online. After conducting the user interview and creating the personas, I have developed a solid sense of understanding for the term "digital hoarders". An empathy map allows me to look at my target audience without any question or judgment, but simply to stand from their point of view and speak for them. Feel what they feel.

User Empathy Map

User Journey Map

The journey map shows the possible actions and mental activities that may happen during the phase when the target audience is struggling to find the solution and checking out our product for the first time.

User Journey Map

Storyboad

In order to help others understand what the product will do, I created a storyboard. While creating the storyboard, I kept the term digital hoarder in my mind. The more I draw, the more I realize how lovely their mental activities are and how helpful the product will be for them.

No items found.

User Flow

The user flow shows the process of the app - how many steps it may take for the user to achieve their goal. The key decision part is to decide whether to download individual video, or monitor a playlist of videos. I also put my user stories next to me when I'm creating the user flow, so that I can always keep in mind what are the goals of users. My user stories portrays the major need and goal of the user who plans to use this app. To summary, the goals of users are: 1) to search and archive a video from an uploader, so that they can have it on their drive without worrying it will be deleted. 2) to be able to monitor the future videos of an uploader, so that they don’t need to manually download all. 3) to be able to organize their archived files the way they want, so that they always know which file belongs to which folder.

User Stories and User Flow

Site Map

The sitemap is the "skeleton" of the app I will be designing - it shows what features it will offer inside the app and the hierarchy of the features. It will include pages like: Sign in, My info, My Library, Activity and Setting.

Site Map

Wireframe Sketches

Sketching is the most exciting part for me as a designer. It forced me to think out of the box. Here are my sketches.  I first took notes of some features and styles of other similar app, then I draw rough ideas.  After that, I use the crazy-eight technique which forced me to draw out eight different presentation of the homepage in 5 minutes. After that, I came up with the solution flow of the monitoring process.

Wireframe Sketches

Digital Wireframes

After a discussion with my client, I decided to turn one of the sketches into a digital wireframe.

My client has pointed out some potential problems with a few pages.

1) He wants the "My Info" and "My Import" pages to be separate - so users can select which content creators they want to import.

2) He wants to put the "Monitor" icon at the most obvious place for users to use.

3) He wants the channel page to include as much information about the video as it can.

Low Fidelity Prototypes

My final low-fidelity prototype showcases how the interface going to look, what functions it will have, as well as the whole flow of the process.

Style Tile and Branding

Before diving into branding, I did some research on my targeted users. I found out that the similar visual pattern within the digital hoarder community - They generally prefer darker/ more settled color. Even for platforms like Reddit, it has a darker background, and many digital hoarder communities “live” in it. Not only does it provide higher contrast, but it also evokes a sense of security and privacy. Since this app is built based on Bilibili, I decided to incorporate the Bilibili-blue into the app interface as well. I want to create a secure, comfortable, and futuristic feeling for my users when they are using the app.

No items found.

High Fidelity Prototype

After Inserting the style and color into the low-fidelity prototypes, I played around a little bit with the layout. Here's the what I got.

High Fidelity Screeshot

No items found.

Final MVP

Click Image below to walk through the interactive prototype! - Link will open in an external window.

Final MVP

Lessons Learned

I have learned a lot from this project. Thanks to my client who gave me this opportunity to learn about a different community:

Listen to User's Needs without Holding Judgements

I remember feeling uncomfortable at first when I heard that some people maintain the habit of downloading video content from internet, when they could just watch them online. Because I was holding this judgment, it made me really hard to open up, ask the right question, or to feel empathetic about the target audience. It's not until I get to talk to one digital hoarder and really listen to what he says, that started me into understanding their psychological movements. I would tell myself "it's will be a learning curve, and it's worth it. All you need to do is let go of your judgments - people are made differently and we have different personalities, everything exist for a reason. Respect that reason and respect other people's beings".

It's Okay to Challenge the Client by Proposing a Different Solution

At first, my client was really strict on being "I want it to be less visuals, and more about datas". So when I presented the videos with thumbnails to him, he was uncomfortable. So I changed it back to just plain text and data - but something felt wrong in me. After I tested the screen with people around me, almost all of them told me that they wish to see more visuals and the thumbnails instead of plain text and datas. So I have presented the opinion to my client, who eventually became more considerate of what other people think. Sometimes, it's my responsibility to remind client about user centered design. A product should not only fulfill the client's personal need, but to serve something greater - in order for it to become valuable and meaningful, it should be desirable and accessible in many possible ways. That means we need other different opinions and alternative perspectives. In the future, I would test more often with different users before I go settle with the client's decision.

Provide Different Modes of Interfaces Will Make the Product More Accessible

If I would further improve this app or done anything differently, I would have include a "day-time-mode" and a "nigh-time-mode". Some feedbacks I got saying that they wish to use it in a lighter mode, which I also personally think that's validated. Some websites are made more friendly by providing different modes, so I think it would make the users more comfortable if I could include different modes. It makes me realize how a product is never "finished" - there will always be room for improvements.

Other UX/UI Case Studies