Application Design /Final Project: High Fidelity App Design Prototype

 Application Design /Final Project: High Fidelity App Design Prototype

Starting from 12.2024

12.2024 -1.2025 / Week 13 - Week 15

Ge Xianjing / 0377636

Application Design 1 / Interactive Space Design

Final Project / High-fidelity Application Design Prototype

For high-fidelity mockups, the first element to consider is how to arrange the colors. The teacher recommended several software programs specifically for color and fonts.

Task requirements

        1.     Plan the Design Structure: Define the page functions and information architecture, and determine the design needs for each page.

2. Set Up the Figma File: Create a new project and establish a design system with colors, fonts, buttons, etc.

3. Design Page Elements: Design key elements like the header, navigation bar, and search box, ensuring consistency and simplicity.

4. Interaction Design: Link pages using Figma’s prototyping features and simulate user flows and micro-interactions (e.g., button click effects).

5. Optimize Visual Design: Use brand colors, clear icons, and a simple layout to ensure the page displays well on different devices.

6. User Testing: Conduct prototype testing, gather feedback, and adjust the design accordingly.

7. Export and Handoff: Once the design is complete, export the prototype for developers to reference and implement

Mr Zeon suggested us to use [Color Shades Finder] platform for ibetter color matching. I can enter a primary color, and it will provide multiple options of color tones and shades. It also allows me to personalize adjustments to the color's lightness, saturation and temperature. Since I decided to use a complementary color scheme for the app, based on the options provided on the website, I could then choose the suitable shades and tints for the app.

main colors #3070ef

I first referred to other UI design kits to roughly understand what content is needed

I used the basic color of Baidu's original icon for search. Considering that blue gives people a sense of security psychologically, I chose the blue color scheme.

                          

I have modified the tag grouping to better showcase its functionality. The original folder was ambiguous and could not allow customers to directly understand what it was for, and the icon was replaced^_^

Add page   Message notification reminder

I discovered some details during the presentation with my classmates, such as misaligned icons, lack of visibility for text, and some layer confusion. I have made revisions one by one.

Detailed feedback and response

My friends think the high-fidelity model’s interface is very clear, with a well-organized layout, and the presentation of important information and functions is intuitive, making it easy to understand and use; the entire process runs smoothly, with fast page transitions and loading speeds, and the interaction design meets expectations; the visual design is detailed, with well-executed icons, buttons, and text layout, enhancing the overall user experience; the personal center settings are simple and clear, with no unnecessary complexity, retaining only the most important functions, offering help and support features, providing multi-country language settings, and most importantly, adding multi-page synchronization tabs for easier navigation.

My classmate gave feedback that when using Baidu to book hotels, how to navigate to the hotel did not show up. I should add a map interface that can directly navigate to the hotel

 Click on the link to view the file 
https://www.figma.com/design/Y2YKEevxO6MatTdZqzLpOr/%E9%AB%98%E4%BF%9D%E7%9C%9F?m=dev&t=GCz9NCL6pWSwTiVZ-1

Design Concept and Goals

In this Baidu high-fidelity model design, my primary goal was to enhance the user experience by addressing existing issues, such as excessive ads, inaccurate search results, and paid content barriers. At the same time, I aimed to create a clear interface layout and seamless interaction logic to provide more efficient and intuitive experiences for different user groups, including college students and working professionals.

Design Process with Figma

1. Efficient Wireframe Creation

Using Figma’s intuitive tools, I quickly completed wireframes for six main pages, ensuring clear structures and logical flow. Each page’s functional modules were precisely defined based on user needs and usage scenarios.

2. High-Fidelity Prototype Development

In the high-fidelity model, I leveraged Figma’s powerful component system to standardize interface elements. By unifying icons, typography, and color schemes, I enhanced the overall visual consistency. Additionally, I showcased the navigation paths and dynamic feedback for every button using interactive features.

3. User Experience Simulation

With Figma’s prototype linking and animation capabilities, I created a complete interaction flow, allowing users to intuitively experience the interface’s operational logic and smoothness. For example, in the search page design, I detailed features such as search result prioritization, an ad-free mode, and result preview options.

YouTube demonstration video

Reflection Summary:

1. Better Understanding of User Needs:

Creating the model allowed me to better understand the needs and potential pain points of users when using Baidu. My teacher suggested adding dynamic recommendations to the search bar, which helps users quickly find the content they are interested in. Additionally, on the hotel booking page, I included filtering options such as price range and star ratings, enabling users to quickly narrow down their search and improve their efficiency.

2. Focusing on Icon Design and Meaning:

My teacher pointed out that icons are not just decorative elements; their meaning and intuitiveness directly impact the user’s experience. For example, in the Baidu Maps route planning page, I used clear, easy-to-understand icons (like transportation modes, walking, and driving) to help users quickly grasp the purpose of each function. The size and color of the icons are also important, as too large or too small icons can affect the visual balance. My teacher advised me to maintain consistency and hierarchy when arranging icons.

3. The Importance of Layout:

My teacher particularly emphasized layout optimization, and during the high-fidelity model process, I adjusted the layout of each module according to their suggestions. For example, on the hotel details page, I rearranged the information to make it easier for users to view hotel images, reviews, and amenities, avoiding clutter. Additionally, properly using white space helps guide the user’s attention, making their interaction feel comfortable.

4. Challenges and Optimization in Interaction Design:

When designing the interaction flow, I found balancing simplicity with functionality to be a major challenge. Specifically, in the Baidu Maps route planning, users need to input the start point, destination, and select a transportation mode. Reducing unnecessary steps was a key focus of my continuous optimization. My teacher suggested adding more prompt information and interactive feedback in this section, such as dynamically displaying hints in the input box, which helps users better understand the next step.

5. The Impact of High-Fidelity Model Detail:

Through creating high-fidelity models, I came to realize how important the details are to user experience. For example, button feedback and page transition animations, my teacher encouraged me to add more transitional animations, making the interface smoother and more natural. Every small detail contributes to a more engaging and immersive user experience.

6. Learning Iterative Optimization:

During the model creation process, I continuously adjusted and optimized the design based on testing feedback. My teacher reminded me that design is an iterative process, and only through repeated practice and refinement can we truly meet the user’s needs. Using the software allowed me to quickly make modifications and tests, greatly improving work efficiency.