Application Design /Project 3: Lo-Fi App Design Prototype
Application Design /Project 3: Lo-Fi App Design Prototype
Start from 1.7.2024
11.2024 -12.2024 /Week 11- Week 14
GeXianjing / 0377636
Application Design 1 / interactive Spatial Gesign
Project 3/ Bai du App Design Prototype
The upcoming low fidelity model needs to include the following content: homepage, search module, search results page, content display page, user management page, and help and support center page
My teacher gave feedback that my homepage doesn't have much appeal, so I can add some pictures to attract young people to use it. I have also considered this and will add images when making high fidelity models. At present, no changes will be made.
Revised the functions and layout required by Baidu. Then we need to start making the low-income needle model. The teacher first talked about the process we will follow in the next few weeks to ensure that our progress does not fall behind.
Week11
Classroom teaching documente
Key Points for Creating Baidu’s Low-Fidelity Prototype Using Figma
1. Define Your Goals
• Understand User Needs: Focus on testing functionality and information architecture in the prototype. Identify key features, such as the search bar, navigation menu, and search results page.
• Prioritize Functionality: Avoid detailed or visual design; concentrate on logical layouts and essential functions.
2. Use Standard Components
• Basic Shapes for Layout: Use rectangles, lines, and buttons to represent core elements like images, input fields, or links.
• Label Key Buttons: Clearly mark interactive areas like the search button with text or simple icons.
• Use Placeholders: Represent images or ad spaces with gray boxes or wireframes to define the structure.
3. Focus on User Pathways
• Define Interaction Flow: Show user paths, such as navigating from the search bar to viewing results.
• Ensure Logical Flow: Keep navigation, buttons, and interactions intuitive and coherent.
4. Optimize Information Architecture
• Clear Hierarchy: Divide content into sections (e.g., search bar, recommendations, ads, results) and clearly define levels with wireframes.
• Keep It Simple: Highlight only core modules to avoid clutter and unnecessary details.
5. Simulate Feedback and Interaction
• Add Dynamic Links: Use Figma’s interaction tools to simulate button clicks and page transitions for a more realistic experience.
• Highlight Functional Logic: For example, clicking the search button should lead to the results page, simulating user behavior.
Week12
The multi page switching feature I added to Baidu is based on Google's reference, because I think it's really a convenient feature that allows you to switch between different pages at any time, just like a computer web page
The design of the homepage aims to be as concise and clear as Quark's search software, with a focus on search functionality
User Registration Process:
• Visit the registration page: The user navigates to the registration page from the homepage or login page.
• Fill in registration information: The user enters necessary information such as username, password, and email.
• Agree to the user agreement: The user reads and agrees to the Baidu User Agreement.
• Submit registration: The user clicks the register button.
• Verify identity: The system may require the user to verify via phone or email.
• Registration successful: The user receives a registration success message and can choose to complete their profile or start using Baidu services directly.
Classroom teaching documents
This week, we need to create three complete processes for using Baidu software, which is to add its necessary features
After checking with the teacher, they provided feedback. The overall icon has been modified multiple times, this is the original version
Second
Confirm version
The most important features have been identified, including short video channel, hot search, homepage, browsing cache tab, and personal center
The multifunctional channel page has become more attractive, and the functions are more clear at a glance
I reduced the functions included in the homepage to make Baidu simpler and more focused on defining the search software itself.
Week13
Classroom teaching documents
Search Function Process:
• Homepage display: Design a simple homepage that includes a search bar.
• Enter keywords: The user types a query into the search bar.
• Display search suggestions: Show relevant search suggestions or autocomplete as the user types.
• Submit search: The user clicks the search button or presses the Enter key.
• Display search results: The system redirects to the search results page, displaying a list of results related to the query.
Using Baidu to Book Hotels:
1. Open the Baidu app: Launch the Baidu app on your mobile device.
2. Enter the “Book Hotels” function: Locate and click the “Book Hotels” feature in the homepage or menu bar.
3. Enter destination and dates: Type the city or destination where you plan to stay and select the check-in and check-out dates.
4. Browse the hotel list: The system will display hotels that meet your search criteria. You can filter and sort by price, rating, distance, etc.
5. Select a hotel and book: Browse the hotel details, select the one you like, go to the booking page, fill in necessary details, and complete payment to successfully book the hotel.
Using Baidu Maps:
1. Open Baidu Maps app: Launch the Baidu Maps app on your mobile device.
2. Search for a destination: Enter the place or address you want to search for in the search bar and click the search button.
3. View map information: The map will display the location you searched for, allowing you to view surrounding areas, traffic conditions, and more.
4. Get navigation directions: If you need to go somewhere, click the “Route” button, enter the start and end points, choose a mode of transportation (driving, public transport, walking, etc.), and the system will plan the best route and provide navigation.
5. Use other features: Baidu Maps also offers real-time traffic, nearby searches, offline maps, and other features for you to use as needed
AI search function
Personal Information Editing
Personal Center
Help and Settings
Message notification
Time Schedule
Video Channel
Words studing
Hot News
Multi Window Page
Week14
In the following week, I have improved many detailed functions, such as calendar AI intelligent search, word learning, photo search, etc., to ensure that users can fully use them. The personal center has also been set up to view historical records and other information.
Based on feedback from three users, adjustments have been made to the animation to ensure it returns to the original interface and has pop ups
There were serious issues when connecting each jump page, such as the animation being connected but unable to play, which really troubled me
In addition, if you want to click a button on a page and have a pop-up animation, it can also be very frustrating. I have been learning how to operate animations for a long time. Need to crop a frame for sliding.
Invite three students to showcase the model as clients for the first time.
1. Using Baidu Search to Book Hotels
Process Steps:
1. Open Baidu Homepage:
• Access the Baidu homepage, with the search bar displayed at the top.
2. Enter Keywords:
• The user enters keywords such as “Türkiye Bodrum” in the search bar.
• Dynamic suggestions or related popular keywords appear in a dropdown menu.
3. View Search Results:
• The page loads search results, including ad recommendations, user rating filters, and map navigation modules.
• Users can refine results using filters (e.g., price range, star rating, location).
4. Click on a Hotel:
• The user clicks on a desired hotel, transitioning to a detailed page with animations.
• The page displays hotel details (images, facilities, reviews) and booking options.
2. Using Baidu to Modify a Name in Personal Center
Process Steps:
1. Enter the Personal Center:
• Tap the “Personal Center” icon in the bottom navigation bar of the Baidu app to access the user’s profile page.
2. Find the Name Editing Option:
• Tap the settings button (usually in the top-right corner) and select “Personal Information.”
• Navigate to the “Name” field and click to edit it.
3. Edit and Save Name:
• A popup input box appears where the user can enter a new name and confirm.
• A success notification appears after saving, and the name updates immediately.
3. Using Baidu Maps to Find Routes
Process Steps:
1. Open Baidu Maps:
• Launch the Baidu Maps app or website to access the main interface.
• The homepage displays a search bar, current location marker, and shortcut buttons (e.g., “Route Planning,” “Nearby”).
2. Input Starting Point and Destination:
• Tap the “Route” button on the homepage to enter the route planning page.
• Input Starting Point:
• The default starting point is set to the current location, which can be manually changed (via search or by selecting a point on the map).
• Input Destination:
• Enter the destination name or address in the “Destination” field. The system dynamically displays search suggestions for the user to select.
3. Select Transportation Mode:
• Provide multiple transportation options:
• Driving (default): Displays the optimal driving route, including estimated time, traffic conditions (e.g., congested areas), and toll fees.
• Walking: Plans a pedestrian-friendly route, showing walking time and distance.
• Cycling: Recommends bike routes, noting slopes and road safety.
• Public Transport: Suggests bus and subway routes, sorted by time or the number of transfers.
• The map and route details dynamically update as users switch transportation modes.
4. View Route Details:
• Once the route is loaded, the map displays the planned path with a dynamic route animation (e.g., marked with a blue line).
• Key information provided includes:
• Details of the starting point, destination, and key waypoints along the route.
• Estimated time, distance, and traffic updates (e.g., red markers for congested areas).
• Users can tap “Route Details” to view step-by-step navigation instructions (e.g., detailed directions for each turn).
Feedback on using Baidu to search for dynamic : font needs to be adjusted, and the click history is not well displayed
1. Using Baidu Search to Book Hotels
• The search function is very simple, helping them quickly find their target hotel. Dynamic suggestions and the search bar design make the search process more efficient.
• The hotel detail page provides a wealth of options and useful information, assisting them in making decisions. Filtering options (e.g., price, star rating, location) make the hotel selection process more personalized, catering to different needs.
• The entire process is smooth and easy to operate, with a clean page design that allows them to complete their booking quickly.
2. Using Baidu to Modify a Name in the Personal Center
• The process of modifying the name is simple and intuitive, and they can easily find and edit their personal information. • The settings interface is clear, and the operation is convenient. A notification is immediately shown after saving the changes, ensuring they know they’ve completed the task.
• My friends respond positively to this function, considering it fast and reducing unnecessary steps.
3. Using Baidu Maps to Find Routes
My friends generally find Baidu Maps’ route search function intuitive, and entering the starting point and destination is very simple. However, sometimes the search suggestions are slow or inaccurate. When it comes to transportation options, they appreciate the dynamic updates for different modes, but they may wish for a smoother way to switch between transportation options and want the traffic condition markers on the map to be more prominent. The step-by-step navigation feature is effective in most cases, but they feel it may lack guidance in more complex areas. They would like to see enhanced real-time feedback and clearer navigation prompts. However, they believe that since this is a feature within Baidu Search, there is no need for Baidu Maps to be overly detailed, as Baidu Maps is already a standalone app, and providing route guidance as part of the search software is enough to meet basic needs.
Design Goals
During the low-fidelity model design phase, my primary goal was to quickly validate whether the interface layout and functional logic aligned with user needs. This phase focused on framework construction and functionality planning, laying the groundwork for the subsequent high-fidelity model design while ensuring that the overall design direction met user expectations.
Design Process for the Low-Fidelity Model
1. Framework Construction
Using simple wireframing tools (such as Figma or hand-drawn sketches), I quickly completed the layout designs for six main pages of Baidu: Homepage, Search Results Page, Personal Center, Navigation Page, Tools Page, and Settings Page. Each page framework was clear and focused, highlighting the positions and relationships of key functional modules.
2. Functionality Testing
The low-fidelity model allowed for quick testing of different user interaction paths to simulate their operational logic. For example:
• Can working professionals quickly find industry news and work-related tools?
• Can college students easily locate study resources or utility applications?
3. Simplified Interaction Display
Using lines, blocks, and simple text labels to replace complex visual elements helped emphasize functionality usability rather than visual details. For example:
• Is the search bar prominently placed?
• Are the ad sections clearly distinguishable from search results?
• Does the quick navigation meet users’ daily needs?
Features of the Low-Fidelity Model
1. Rapid Iteration
The low-fidelity design enabled quick adjustments to page layouts and interaction logic based on user feedback, reducing the need for major changes during the high-fidelity phase.
2. Intuitive and Efficient
Simple wireframes showcased the functional blocks of each page, allowing users and team members to quickly understand the design intent and saving communication time.
3. User Experience Focus
During the low-fidelity phase, I paid particular attention to the following aspects:
• Ad Issues: Attempted to adjust the proportion of ads in the interface to avoid disrupting the user experience.
• Search Accuracy: Reserved button positions for “Personalized Recommendations” and “Ad-Free Mode.”
• Simplified Navigation: Organized complex functions into categorized modules, enabling users to quickly access desired pages.
Low-Fidelity Model Example (Page Design Summary)
1. Homepage
• Core Features: Search bar, trending topics, quick access modules.
• Layout: Search bar at the top center, followed by trending topics for easy access.
2. Search Results Page
• Core Features: Results list, ad indicators, filtering buttons.
• Layout: Results on the left, recommended content on the right, with clearly marked ads.
3. Personal Center
• Core Features: History, favorites, personalized settings entry.
• Layout: Clearly segmented for users to quickly locate what they need.
YouTube demonstration video
Comments
Post a Comment