Completed Mobile Application Design Prototype (High-Fi)

 Weeks 11 and 12:

Further modifications and optimizations were made to the low-fidelity model in preparation for creating the high-fidelity model. I deleted and modified some elements in the low-fidelity version that were prone to bugs, making the final version clean and clear.

Creating the high-fidelity model required determining colors, patterns, fonts, and layouts. I kept the original pink color as the base tone but reduced its proportion and frequency. I only used it for the most important elements, such as the confirm or purchase buttons and the marker lines on each page. The reason for this is that using too much pink would make the overall style look too childish. By using pink only for key actions, users can easily notice it when clicking important operations, strengthening the importance of pink. This allows users to strongly associate pink with Bilibili.

For font selection, I used mostly thin fonts to give an elegant and refined appearance. I only used bold fonts in key positions, but I avoided black bold text. Instead, I used white bold text in the pink buttons, making it stand out without overwhelming the overall atmosphere.

For patterns, I retained the original "2D" style design, as it has witnessed the growth of Bilibili, and I certainly hope the software will continue to thrive.

In terms of layout, I discarded the layouts used in most Bilibili pages and designed a more streamlined and elegant layout. This reduces the childish feel and makes the pages look more simple and sophisticated.

https://www.figma.com/design/PP5qSnyIJnaBi7P99wAUaJ/BILIBILI?node-id=250-3285&t=4uAMWAQ90nGomle2-0

 Here is a 3 min  video for an introduction

I had an online meeting with three users to showcase my high-fidelity model. Below are the steps and feedback.

First user

Step： The full process (registering and logging in, browsing the homepage and opening a video to watch, searching for and watching a video, searching for and purchasing a product, posting a video and viewing it, replying to a friend's message).

Feedback: Overall, the satisfaction was high, but the downside is that the font is too small, making it difficult to read carefully.

Second user

Step1：Video playback and search functionality.

Feedback: The user experience was smooth, and the satisfaction level was high.

Step2：Registering and logging in, browsing the homepage, and purchasing a product.

Feedback: There has been a significant improvement compared to the original version.

Third user

Step： The full process (registration, login, browsing the homepage and watching a video, searching for and watching a video, purchasing an item and viewing after-sales, posting a video).

Feedback: The creator center could be more comprehensive, with the ability to view real-time follower count and view count.