Application Design 2: Task 01

  APPLICATION DESIGN II: TASK 01

Start from 21.4.2025
21.4.2025 -18.5.2025 /Week 1- Week4 
LI XIN LI / 0379305
Application Design 2 / Bachelor of Interactive Spatial Design 

Task 1 :Self-Evaluation and Individual Reflection

Instructions:

• We need to self-evaluate and reflect on the final project of Applican Design 1.

• Identify what needs to be changed and record the process of improvement and self-reflection in a blog.

WEIBO APP

Click here to view final hi-fi prototype in Figma 

Final Proposal:

，作者 LI XINLI

Problem and Improvement 

Self-reflection:

Last semester, I redesigned an app called Weibo. During the 14 weeks, I conducted a lot of user testing and received a lot of feedback, which helped me a lot in redesigning the app. Overall, I am satisfied with the redesign of the Weibo app, but there may still be some areas that can be improved.

Sections of the App:

Login/Register Page

Strengths:

1.Clear brand recognition

• The splash page and login page highlight the "MICROBLOG" logo, strengthen brand awareness, and create a professional and unified image.

2. Convenient login process

• Support SMS verification code and third-party login , lower the user threshold and improve conversion rate.

3.Clear homepage information hierarchy

• The post card layout is reasonable, and the user name, content, picture, and interactive button (comment/like) are clearly divided for quick browsing.

4. Unified visual style

• Simple icon design + coherent orange brand color application ensures the overall interface is coordinated and consistent, and enhances interactive recognition.

5. Clear functional division

• Splash page (core value) → homepage (content entrance) → login page (focus on verification), the purpose of each module is clear, reducing the user's learning cost.

Weaknesses:

1. Home page optimization (not logged in)

• Navigation bar interaction problem:The text labels are crowded and similar in size, with discover and for you being repeated.

2.Login/Registration Page Optimization

• Operation guidance issues : Low differentiation between primary and secondary buttons.

Update :

The overall layout has been changed, the font spacing and font size have been increased, and color contrast has been added to the registration and login interface to make it easier for users to distinguish and select the buttons they need. At the same time, the repeated discover text labels have been deleted.

Boot Page

Strengths:

1. Visual consistency

• Unified illustration style and soft color matching to create a distinctive brand tone

• Overall color coordination to create a comfortable look and feel and strengthen product memory points

2. Efficient information communication

• Combining pictures and texts to accurately display core functions (current events acquisition/social interaction/life sharing).

• Concise copywriting directly hits the product value and reduces the user's understanding cost.

3. Clear operation guidance

• Pagination dots indicate progress, which is in line with user cognitive habits

• Button copywriting is action-oriented (such as "Select 4 interests") to reduce operational hesitation.

Recommendation/Comments Page

Strengths:

1. Clear visual hierarchy

• The top navigation bar uses eye-catching orange, which contrasts sharply with the content area, making it easy for users to quickly identify the operation area.

• The Weibo content area, comment area and other modules are clearly distinguished by spacing and visual segmentation, and the information is clearly classified.

2. Good design consistency

• The layout of the card-style Weibo module is unified, and the positions of elements such as avatars, user names, publishing times, and interactive buttons are fixed, reducing the user's learning cost.

• The styles of interactive components such as likes, comments, and reposts are consistent, and the operation logic meets user expectations.

Weaknesses:

1.Spacing and layout optimization

• The text labels in the top navigation are too crowded and have similar font sizes.

Update :

The top navigation bar was re-formatted, the spacing between characters was increased, unnecessary content was deleted, and the font size was increased to enhance the contrast.

At the same time, I added an additional shadow effect to the push card to enhance the visual impact but not so abruptly.

Follow/Daily Page

Strengths:

• Clear modules: clear functional divisions, easy to locate and filter content; prominent navigation bar, orderly content card hierarchy

Weaknesses:

1.Spacing layout: 

• Small spacing between elements and color function cards in the card, crowded, need to be adjusted.

2..Interactive feedback: 

• The selected state of the drop-down group is not obvious, feedback needs to be enhanced.

Update :

The top navigation layout has been changed. The background of the drop-down bar of the follow page has been blurred to make the drop-down box more prominent and enhance readability. The font size of the color card has been adjusted to make the card title clearer.

Publish Page

Strengths:

1.Simple and intuitive: 

• The interface is clear, the functions are easy to understand, the operation purpose is clear, and the functions are rich.

Update :

In the final release page, I added a successful release page to ensure completeness.

Video and video publishing Page

Strengths:

1. Clear process: 

• The path from video browsing → adding content → publishing is coherent and meets user expectations.

2. Visual focus: 

• Black and white main colors + key operation highlights (such as the orange "Share" button) to reduce interference.

3. Direct operation: 

• Core functions (photographing, positioning, publishing) can be reached with one click, and the learning cost is low.

Update :

The font size in the sharing interface is increased to improve the user experience, and the commonly used sharing buttons are also advanced for easy selection. The Cancel border is added with a stroke to contrast with the background without being too abrupt.

Search Page

Strengths:

1.Visual Clarity: 

• Interface elements such as the search bar, category labels, and content lists are clearly legible.

2. Color contrast: 

• The orange search bar/light yellow trend page are clearly distinguished, and the key functions are clear at a glance.

3. Functional division: 

• Advertisements and hot search lists are separated to avoid information interference.

Weaknesses:

1.Advertisement identification:

• Add an "advertisement" label to the middle ad image to prevent users from accidentally touching it (such as gray small text mark).

Message Page

Strengths:

1.Clear division: 

• The top category navigation reduces cognitive load.

2.Intuitive icons: 

• “@mention”, “comment”, “like” icons help understand the function.

3.Color highlight: .

• Orange emphasizes important information and attracts attention.

4.Consistent style:

• Unified information layout improves readability.

5.Clear bottom navigation: 

• Five main function modules are easy to locate quickly.

Weaknesses:

1.Visual hierarchy: 

• Reduce the height or saturation of the orange prompt bar to reduce visual pressure.

2.Spacing adjustment: 

• Increase the spacing between list items to improve readability.

Update :

Improved the contrast of the tooltip and increased the chat box spacing.

Create a group

Strengths:

1.Process coherence: 

• The current process meets user expectations and the connection is natural.

2.Information conciseness: 

• Only basic information is required to create a group, which lowers the threshold.

3.Good photo upload: 

• The operation process is concise and in line with habits.

4.Clear success feedback: 

• There are clear prompts and a "DONE" button after completion.

5.Clean interface: 

• The chat interface design meets the standards.

Weaknesses:

1.Unified image editing: 

• Use a light background to keep the overall style consistent.

2.Copy correction: 

• Corrected to "Created successfully".

Update :

Changed the album background color, tooltip box color, and corrected incorrect grammar.

My/Like Page

Strengths:

1. The layout of the homepage content is clear, and the icons and text are well combined, which makes it easy for users to understand the main functional modules.

2. The album page uses images to display the content intuitively, which improves the user interaction experience.

3. The "My Favorites" page presents the user's favorite content in the form of a list to enhance the personalized experience.

Weaknesses:

1. Homepage: The visual hierarchy of the title is not prominent enough; the spacing between functional modules needs to be increased.

2. Album: There is a lack of clear navigation feedback when returning.

3. "My Favorites": Some texts are displayed confusingly, and the layout needs to be optimized.

Update :

The font of important information has been adjusted, the module spacing has been increased, and the "My Favorites" page has been rearranged to improve the user's visual experience.

My Page

Strengths:

1. User profile page: User avatar and basic information are prominently displayed, easy to identify, and can quickly confirm the user's identity.

2. Hot post page: Hot post content is intuitively displayed, allowing users to quickly browse current hot topics and grasp information trends.

3. Follow list page: Detailed classification effectively improves the efficiency of users finding follow objects and saves time.

4. Discover user page: Helps users quickly locate content of interest, providing convenience for expanding social circles and increasing social interactions.

Weaknesses:

1. User profile page: The font size of the introduction column is small and the visibility is low.

2. Hot posts page: The text layout is crowded and the line spacing is insufficient, which affects readability.

Setting Page

Strengths:

1. Overall: clear functional classification, simple design, and clear operation path.

2. Settings page: intuitive hierarchical structure, and logical classification of functions.

3. Language selection page: simple interface, fast language selection operation.

Weaknesses:

1. Settings page: some texts are poorly readable.

Final Submissions:

Click here to view improvised prototype in Figma

Presentation Video: