BilibiliAS
Redesigning the UI for BilibiliAS, an open-source video downloader for Bilibili.
Year
2024
Team
Developer x 1
UI/UX Designer x 1 (me)
Project Deliverables
User research to identify existing problems within the current version of the app, and targeted solutions for said solutions.
A complete set of refreshed UIs for the BilibiliAS app, including iconography, color scheme, improved UX copywriting and corresponding localization.
Introduction
Similar to YouTube in nature and started as a domestic version of Niconico, one of the most famous Japanese pop- and sub-culture website, Bilibili (哔哩哔哩) is a Chinese video-based UGC platform. Rooted in the fandom around Japanese pop culture and sub-culture such as Anime and Manga, Bilibili started as a niche website for hobbyists, eventually developed into what it is today, where almost anyone could post their content about almost anything. Given its wide coverage of various topics, large amounts of original content, relatively low bar of entry, and its high popularity among younger netizens, many users have the need of saving certain contents, especially videos, from Bilibili. BilibiliAS is an open-source media downloader made to meet such needs.
What is Danmaku/Danmu (弹幕)
Danmaku as a Japanese word is figuratively translated to "Barrage" or "Bullet Curtain" and originated from conventional vertical scrolling shoot 'em up games, where bullets fly across the screen in dense groups.
According to Wikipedia, in 2006, Japanese video website Niconico "introduced a comment function which enables viewers to write comments on the screen for the video"; The comments are displayed over the ongoing video, and will shoot across the screen from right to left in a "bullet curtain" likeness, and "will be reproduced and displayed in accordance with the video's time axis thereafter".
Bilibili launched its own version of this feature around 2008-2009. In Mandarin, it's translated as Danmu. The major reason why this feature is so loved and became a mainstay in the sub-culture fandom is that many thinks "The combination of video and synchronous messaging creates a sense of community for the viewer".
Problems in BilibiliAS's Existing UI
While liked by many users, after doing a in-depth audit of BilibiliAS's existing UI, I identified many problems with its existing UI. The following categories covers the majority of the more significant issues:
Confusing user flow. This has been a major complaint from many users (see user research for more on this); users was not happy with (1) the login flow and (2) download flow, which are both crucial for the app to appear useful and functional to the user.
Many layouts do not make sense from a information architecture/usability perspective. Some of the most obvious problems in this category are:
placement of the Settings button;
usage of the tab bar;
layout of the home screen;
layout of the download options menu.
Incomplete localization. While I understand that since Bilibili is a Chinese website, the majority of users of BilibiliAS would not need English localization, from the perspective of usability and product quality, this is a major problem that I can improve on in my redesign.
Ineffective use of icons. This happened in multiple spots across the app.
User Flow Analysis
I created the following diagram to illustrate the app's user flow based on its existing UI.
