Application Design 2

APPLICATION DESIGN 2

Assignment 1：Self-assessment and reflection

In the first semester, I redesigned the app BILIBILI using Figma.

Application 1 Figma link

 I managed to achieve most of the features and interfaces I had envisioned, but due to time constraints and the overly ambitious scope of my plan, the final result did not fully meet my original expectations and still has significant room for improvement. Here is my improvement plan. 

Strengths and weaknesses:

Strengths: As a video application, it offers comprehensive features, including a complete registration and login process, a homepage, a personal page, a category page, a video upload page, and a relatively complete shopping process.

Weaknesses: Likewise, as a video application, its color scheme and page layout are relatively mediocre compared to other outstanding apps. Although pink is used as the main theme color, the selection of other colors appears too childish, failing to give the product a more refined texture. In terms of page layout, it can easily cause aesthetic fatigue for users and does not effectively provide guidance or visual cues to enhance the user experience.The complex information architecture is also one of the drawbacks.

The most obvious is the lack of branding. There is no visual sign, and the entire interface is incredibly small.In terms of interface performance, the overall style lacks unity. The button style, color, and interactive feedback interrupt the good rhythm and make the operation range unreliable. The interactive feedback is also very weak. Whether it is saving or publishing, users often receive no confirmation, resulting in uncertainty in the operation results.The navigation is lost, the icons are arranged loosely, and the selected state is not obvious, so users are easily lost.

PLAN：

1. Give the interface a clear sense of identity through naming, mascots and unified themes, making it easier to recognize and more emotionally resonant. 

2. I hope to unify the visual language of the interface so that all elements follow the same rhythm, tone and system logic.

 3. Introduce floating prompts, button state changes and other methods to ensure that every operation has a clear response. 

4. Through stronger visual guidance and spatial hierarchy, users can know where they are without thinking. 

5. For a space oriented to creation, this lack of emotion is a limitation.

 I want to turn the interface into a "place" with tone and rhythm, not just a tool, but a space worth staying.

landing page

In this login page optimization, I changed from the original visual guidance strategy based on "two-dimensional illustrations" to a design style with more brand recognition and function focus. Although the original version is friendly, the character illustrations account for too large a proportion, which is easy to distract users' attention, and the interface structure is scattered and the information hierarchy is unclear. In order to improve the function orientation, I deleted the character images, used a repeated background image with bilibili fonts, and superimposed a blue and red offset cyber effect to establish a unified and visually tense brand atmosphere.

In terms of interaction logic, I simplified the input process and reduced the number of rectangular boxes to make the registration and login paths more focused and clear. In terms of font hierarchy, I used a font size setting with obvious contrast between the primary and secondary fonts, and added dynamic interaction effects - for example, after the user enters information, the next input box will be enlarged, the color contrast of the primary button will be enhanced, and the background image will also move slightly with the click, creating a responsive visual feedback experience. This series of adjustments improves operational efficiency, strengthens the brand tone and sense of technology, and provides users with a more immersive login experience.

Home page

The optimized version makes up for the lack of brand recognition, highlights the font of the title above, and unifies the style of the top icons, making the interface more professional, unified, and recognizable, greatly enhancing users' trust and brand impression.Highlight the fonts of important parts, enlarge the time and author's head portrait of the video, and make it easier for users to read.

        I added cartoon characters to the top of each important page, which not only enhanced the brand identity, but also allowed users to see the changes of the cartoon characters directly after switching pages, emphasizing the functionality and aesthetic value. In addition, these cartoon characters interact with the black notch of the iPhone, which adds fun.

Search page

Before the optimization, Search History and Recommendation were mixed together, with no obvious logical order, which easily confused users. 

After the optimization,the information is sorted uniformly by information category: first Ranking → Recommendation → Search History;

Each section is more visually isolated and logically more reasonable.

Advantages: Improves information readability and logical clarity, and users can quickly find what they need.

Video playback page

By clarifying the operation status (such as the feedback of the attention button) and changing the button color from strong pink to slightly dim rose red, the brightness is lower and more emphasized, but the purity is reduced in order not to destroy the color of the video content. It appears more professional and stable. The player control logic is optimized, the overall interface is clearer and easier to use, and the information structure is more reasonable.

   

              Topic page

Navigation highlight is clearer

The highlighting method of the "Hot Topics" label has been optimized to improve the visual guidance effect of the current page.

Icon layout is more standardized

The alignment of icons and texts of modules such as "Rankings" is adjusted to unify the visual style and make the interface neater and more professional.

Information partition is clearer

The difference in fonts is used to clearly distinguish "Hot Topics" from video content, improving the sense of content hierarchy and reading efficiency.

            Film page

Layout optimization

The cards in the original interface have no focus, and the recommendations in the middle and the recent popular cards below are too similar. After optimization, the cards are arranged in order of strength and weakness, and there is better user guidance.

The overall visual is more compact

The card spacing and module layout are more reasonable, and the white space is appropriate, making the content more focused and information browsing more efficient.

      Personal page

The original version only displayed two thumbnails for each group of content, and the cover was very small. After optimization, the number of thumbnails was increased, and the area of ​​each picture was increased, which improved the information display density and facilitated users to quickly browse more content. The overall layout is more compact, and the card ratio is larger, which makes it easier for users to browse more information.

  Creative Studio page

The brand image is strengthened and the visual theme is vivid.

I added anthropomorphic mascots and star backgrounds. The overall interface adopts a dark tone unified style, which enhances the personality and recognition of the creative space and makes it easier for users to substitute for the character atmosphere of the "creator".

The interface colour is consistent with the button style.

In the original version, the button style and colour are mixed, and the visual style is general. I unified the button into purple rounded corners and formed a clear contrast with the dark background, which improved readability and click guidance.

Action feedback and status prompts are clearer.

The prompts of "save successfully" and "release successfully" in the original version lack the visual hierarchy. After optimisation, change to floating prompts or button status changes to ensure that there is clear feedback at every step after the user's operation.

The optimised version makes the whole video creation process more professional, friendly and creative atmosphere through brand visual unification, operation guidance clarification and interface immersion improvement, which significantly enhances the user's user experience and sense of belonging.

     Shopping page

Strengthen brand recognition:

Change the title to "BILI Shopping" and use a more stylized pink bold font to clarify the brand positioning, enhance users' memory of the platform, and emphasize the platform's tone (young and lively), which is consistent with the BILI brand characteristics;

Guide users to form the perception that "this is the B-style e-commerce".

Align the icon and text vertically in the center and enlarge the font. Improve visual neatness,The layout is more symmetrical and more comfortable to use,Maintaining overall style consistency is conducive to users quickly identifying module functions.

The icon color is deepened, the contrast with the text is enhanced, and the visual expression is more brand-like and youthful, which is more in line with the aesthetics of pan-secondary or Z generation users.

link:https://www.figma.com/design/ughddigZRfrEZi5jxBEx2Z/APPLICATION-DESIGN-2?node-id=0-1&t=4gyjshH8SFWrr8MP-1

Prototype:https://www.figma.com/proto/ughddigZRfrEZi5jxBEx2Z/APPLICATION-DESIGN-2?node-id=5-3284&t=7rJeasw2UZKsZxcf-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1

Presontation video link：https://youtu.be/7-lJFPTK-aY?feature=shared

           Reflection

Looking back on this optimisation process, I gradually realised that design is not only a repair of the interface, but also a kind of reorganisation of the "relationship between the user and space". In optimisation, I try to give the interface a clear identity, so that it is no longer a general template that can be replaced, but an existence with a "name, tone and emotion". Through the detailed adjustment of buttons, navigation and feedback mechanisms, I hope that every operation of users can be seen and responded to, so that the interface becomes "interactive". I began to understand that a truly effective interface is not only useable and neat, but more importantly, whether it makes people "want to use it" and whether it can establish a continuous emotional connection. This connection does not come from complex functions, but from the sense of rhythm in the details, the consistency of language, the temperature of the atmosphere, and the psychological contract between the user and it. This optimisation is a collaborative exercise of "function" and "emotion", and it is also a deepening of my understanding of design. Design is never just an aesthetic package, but also a spatial narrative ability, a way to convey positions through graphics and interaction. And this is exactly the direction I want to continue to explore.