Application Design II / Final Project

Application Design II /Final Project

Starting from 7.2025

4.2025 -8.2025 / Week 12- Week 14

Ge Xianjing / 0377636

Application Design 2 / Bachelor of Interactive Spatial Design (Honours)

🧩 Development: From Low-Fidelity FlutterFlow Prototype to High-Fidelity Redesign

In Task 3, I completed a low-fidelity prototype of the Baidu app using FlutterFlow, which covered the basic navigation structure and homepage layout. However, in pursuit of a more polished high-fidelity result, I’ve decided to revise and simplify certain features while improving the overall user interaction flow and visual quality.

✅ Feature Adjustments

Removal of Bookmark Page
The original concept included a “Bookmark/History” page, similar to Google Chrome’s ability to view background tabs. However, this feature would require advanced backend logic and complex routing, which is outside the current scope of development. To streamline the workflow and prioritize feasible features, I chose to remove the bookmark section.
Enhancing the Post Creation Feature
The “Post a Status” feature has great potential in creating an interactive and expressive user experience. In the high-fidelity version, I will refine it by adding:

Micro-interactions such as a subtle pop-up animation after clicking the “Post” button;
Loading animations during the publishing process to provide responsive feedback;
A success confirmation animation, like a sliding banner saying “✔ Post published! It’s now visible under the Türkiye tag,” to increase satisfaction.

Micro-interactions such as:

Button click effects with light scale-up or slide-in animations;
Pop-up modals (e.g., image upload, log out confirmation) that use fade-in + spring motion;
Tab switching using smooth underlined sliding animations to emphasize user flow;
Small visual cues such as icon highlight on hover or press for enhanced feedback;

Loading animations during the publishing process, showing progress or success to reassure the user and minimize confusion.

These animation enhancements not only improved the visual feedback but also made interactions feel more fluid and intuitive, aligning with modern app design standards. By embedding micro-level animations into various touchpoints, the user journey becomes more engaging without overwhelming the core functionality.

🎨 Visual Direction: A Calm Purple-White Color System

Moving beyond the initial blue-white color scheme, I’ve decided to adopt a purple-white theme that reflects a sense of calm rationality and soft professionalism. Below is the updated color palette used for the high-fidelity version:

Role	Name	Hex Code	Usage
Primary Color	Soft Purple	`#8E7CC3`	Main buttons, active links
Accent Color	Orchid Pink	`#DA70D6`	Tags, selected states, icons
Gradient Accent	Lavender to Warm Yellow	`#EBDCF9` → `#FFE7B2`	Background gradients, headers
Background Main	Pure White	`#FFFFFF`	Cards, base background
Background Alt	Light Gray-Purple	`#F8F5FC`	Subsections, info panels
Text Dark	Deep Gray	`#333333`	Body text
Text Medium	Mid Gray	`#999999`	Captions, descriptions
Divider Light	Light Gray	`#CCCCCC`	Input borders, dividers

By removing overly complex features like the bookmark page and refining high-engagement interactions such as posting content, my goal is to create a more focused and responsive user experience. Coupled with a fresh and cohesive color system, this high-fidelity version of the Baidu app balances usability, aesthetics, and emotional connection in a way that feels both modern and user-friendly.

app launcher icon

splash

📱 Bottom Sheet Dialogs: Enhancing Interactive Experience in My App

To streamline user interaction and maintain a clean interface, I designed five modal bottom sheets for different scenarios across the app. Each one follows the minimalist purple-accented style consistent with the redesigned Baidu app visual identity.

🏠 1. Personal Center: Account Control

In the User Profile page, two bottom sheets enhance personalization and account management:

a) Change Photo Modal

Allows users to update their avatar smoothly:

Displays current profile picture in a circular frame
Upload Image button to import new photo
Save Changes button to confirm update
Clean padding and soft contrast maintain consistency with the overall UI

This modal encourages profile customization without leaving the current page.

b) Log Out Confirmation

When attempting to log out, the following modal is triggered:

Shows user avatar and email (for identity confirmation)
Two options: Cancel and Continue to log out
Soft purple action button supports the brand theme

This step reinforces session security and gives users a chance to reconsider.

📤 2. Global Sharing Panel

The Share modal is a universal component triggered from any screen where sharing is enabled (e.g., post details, articles, locations).

Includes popular share destinations: Facebook, WhatsApp, Gmail, and Mail
Features quick shortcuts: Copy link (currently “lick” typo noted for revision) and Write posts
Icon-based layout supports fast recognition and execution

This panel is vital for encouraging content spread across platforms.

📝 3. Post Editing Controls (History Section)

In the History Records or Past Posts section, long-pressing or tapping on a post brings up this options modal:

✏️ Edit – opens content in editable mode
🗑️ Delete – highlights with red text to indicate caution
✅ Finished – confirms and exits the menu

A simple, functional design that supports CRUD operations efficiently.

💬 4. Simple Comment Composer (Post Preview Modal)

This Post Composer Modal acts as a quick way for users to submit short comments or reactions within a compact interface.

The modal includes:
- User avatar and a “Write something…” input placeholder
- Icon shortcuts to add images, videos, location tags, or emojis
- A soft purple Post button for quick submission
Once submitted, the user will be redirected to a larger, dedicated post page, where they can view full discussions, comments, and extended content threads.

✨ High-Fidelity UI Enhancement Overview (Baidu App Prototype)

🟪 Welcome Page

Waterfall-style image display creates visual appeal
Tagline “Discover what matters to you” highlights personalization
“Next” button with dot indicators shows user progress in onboarding
Button animations added to enhance interaction

Welcome Page

animation 1

🟪 Sign Up Page

Clear form layout with fields for email, password, and confirmation
Password field includes visibility toggle
Prominent “Create Account” button for easy access
Redirect link to login for existing users
Friendly cartoon icon at the bottom adds warmth
Animations include button feedback and page transitions

animation 2

🟪 Login Page

Unified design style with the Sign Up page
Email and password inputs with third-party login options (Google/Apple)
Consistent design for login and sign-up buttons
Redirect link to Sign Up for new users
All interactive buttons feature micro animations and transitions

- Button click with scale-up feedback
- Input fields highlight when focused - Slide-in from right after successful login

Login Page

🎞️ Interactive Enhancements (Animated)

To further elevate user experience, all three pages were enhanced with animation in Figma’s Prototype mode. These include:

Slide-in transitions between pages
Button scale-up effects on tap
Form feedback micro-animations

These animations will be included in the final blog through embedded demonstration videos to showcase the prototype's interactivity and polish.

🟪 Home Page

Updated color scheme with a soft purple gradient background that enhances visual comfort and brand identity.
The search bar remains centered at the top, designed for keyword and website input with clear visibility.

Below the search bar, four intelligent tools are horizontally arranged for easy access:

Weather
Calendar
Baidu AI
Photo Search

A latest news card is added under the tools section, providing real-time news or alerts with an image preview.
The bottom navigation bar allows seamless switching between Home, Calendar, Explore, and Profile pages, each with clear icons.

🔁 All buttons and interactions include micro animations for smooth user experience.

Home Page

🟪 Calendar Page

Monthly and Weekly view toggle
Upcoming and past-due events clearly separated with timestamp and icons
Clean layout for daily events with card-based display
Notification badge shows if new updates are available
Interactive event cards can open to show more details

All transitions are animated for smoother UX

Calendar Page 1.1

Calendar Page 1.2

🟪 Baidu AI Assistant Page

Chat interface for intelligent Q&A and writing assistance
Message input bar with options to send images, voice, or text
Animated response bubbles for real-time feedback
Supports AI-generated suggestions based on user input
Maintains overall visual consistency with rest of the app

AI Assistant

🟪 Weather Page

Display of current weather, wind, UV index, and humidity
7-Day forecast with icons and temperature details
Users can switch temperature units and locations (if enabled)
Large font and icon spacing for readability
Integrated animation when switching between days or refreshing data

Weather Page (1)

Weather Page(2)

🟪 Photo Search Page

Main interface opens camera for scanning
Users can scan QR codes, documents, products, or plants
Newly added scan animation simulates scanning line and detection feedback
Minimalist interface with a black background to reduce distraction
Snap button and upload button included at the bottom

Photo Search Page

animacation 3

🔍 Search Result Flow – Turkey Example

The search feature in the redesigned Baidu app starts with a unified, aesthetically clean search bar on the homepage. When the user enters a keyword (e.g., “Türkiye”), the system returns a well-organized result page structured across multiple tabs.

🟪 Search Entry Point

Users can enter keywords in the center-aligned search field on the homepage.
A microphone icon supports voice input, and a gear icon allows search setting configuration.

- Focus animation on search bar + keyboard pop-up

- Search button has tap zoom - Slide-up transition to result page

🟪 Tabbed Content Navigation

Once the search is submitted, the results are categorized under four major tabs:

All – Mixed results including articles, news, and other content sources.
Picture – A grid-based photo gallery for quick visual reference.
Video – Curated video recommendations from platforms like YouTube.
Note – Community-generated notes or travelogues, similar to Xiaohongshu or Tripnote.

All Tab

Displays integrated sources including articles, travel guides, YouTube links, and website snippets.
Each result features preview text and image to help users quickly identify useful content.

All Tab

Picture Tab

Designed with a responsive grid layout.
Shows high-resolution imagery relevant to the search term, helping users gain visual inspiration quickly.

Picture Tab

Video Tab

Includes embedded video cards from major platforms like YouTube.
Users can preview the title, source, and click to play in full-screen mode with detailed metadata (duration, views, etc.).

Video Tab

Note Tab

Social-style card layout showcasing user-generated notes.
Each card includes title, username, and a cover image, encouraging community sharing and discovery.

Note Tab

Here is the English version of the main flow explanation for viewing the Baidu Encyclopedia entry after searching for “Turkey”:

🟪 Baidu Encyclopedia

Keyword: Türkiye / Turkey

When the user taps on the Baidu Encyclopedia card, they are redirected to a detailed entry page covering Turkey’s national overview, geography, history, cultural heritage, and major landmarks.

- Tapping card slides up with elastic effect

- Dimmed background appears

- Acts as overlay pop-up macro animation

📖 Encyclopedia Detail Highlights

A carousel of scenic photos appears at the top, showcasing iconic views like Cappadocia’s hot air balloons and Istanbul’s mosques;
The page is structured into informative modules such as Geography, Cultural Heritage, and Historical Importance;
Each section includes rich text content and corresponding images, with some entries featuring embedded videos (e.g., about the Ottoman Empire);
Tapping the top-right corner opens a pop-up with options like Share, Save to Collection, Download, History, and more;
At the bottom, there’s a browsing history list for users to quickly revisit previous entries.

Baidu Encyclopedia

"more" bottom

📌 Design Highlights:

All content is presented in neatly arranged cards, offering clear information hierarchy;
Dark mode and refresh options are supported;
A consistent purple header bar is used across encyclopedia pages to reinforce brand identity.

🌍 Core Interaction Flow: Viewing and Creating Travel Posts

🔁 Overview of the Process Flow

This feature allows users to click into others’ travel posts, explore attractions in Türkiye, and express their own opinions through posting or commenting. The entire process is designed to be intuitive, visually rich, and encourages community engagement.

User Flow Summary:

Tap on a note shared by another user (e.g. about Türkiye).
View detailed attraction info: location, highlights, cultural background, and user ratings.
Check comment section or write your own post to share your thoughts.
Publish the post, followed by a confirmation animation.
(Optional) View all your posts in the Post Center.

🧭 Step-by-Step Screens and Features

🟪View Travel Note – Türkiye Hotspot

Tap on a card/note to open a detailed attraction page.
Includes banner image, location, and travel highlights.
Scroll down to view embedded ratings, comments, and shared experiences.

🟪 View Ratings

Displays average rating (e.g. 4.6⭐) and number of user reviews.
Each review card includes user profile, star rating, and short feedback.

View Ratings

🟪Quick Comment Popup

Triggered when replying to a post’s comment section.
Minimal design with user avatar, emoji, and multimedia support.

Quick Comment Popup

🟪Create a Post📝

Users can upload travel photos/videos.
Additional features: Tag people, add mood/activity, and attach a location.
Simple interface with clear buttons for Post, Back, and Delete Content.
Create a Post

- "Publish" button bounces on click

- Return button has tap scale animation - After publishing, slide back to Profile page

🟪 Animated Success Confirmation

After posting, users see a checkmark animation with the message:
“Congratulations on completing the publication of this post.✅
You can choose to return or check in my post center.”

Provides a clear endpoint for the post creation flow.

Success Confirmation

animation 4

⚠️ Identified Limitation

One drawback in the current interaction design is the lack of clarity when exiting during post creation.

If the user chooses to go back mid-edit, it is unclear whether the post will be saved, discarded, or needs confirmation.
A better solution might be to prompt users with a "Save Draft" or “Exit Without Saving” dialog for smoother experience.
chooses to go back

✅ Summary

This post flow showcases:

Seamless transition from content consumption to content creation.
Strong visual storytelling through animations and layered interface.
Opportunities to optimize exit interaction for improved UX.

This core feature emphasizes community-driven content and encourages cultural sharing, making it a central part of the Baidu travel app redesign.

🟪 Short Video Page: Animation & Interaction

The short video interface integrates subtle micro-animations to enhance user engagement. When entering the Short Video Home, video cards slide in with a smooth horizontal transition, while the “Watch Now” banner includes a hover lift and glowing pulse to indicate popularity.

Short Video Page （1）

Short Video Page （2）

In the top right corner of the Short Video Home, a small icon button is present.

When tapped, it triggers a transition animation that gracefully slides into the “Find Friends” page — where users can search for and add members to their follow list. This animated transition uses a fade-in + slide-left effect, maintaining a seamless flow between video and social features.

follow list

Once a user taps on any video card, the app navigates to the Full-Screen Video Page.
From there, users can interact with the content directly:

❤️ Like the video with a bounce animation on tap
💬 View comment summary
📤 Tap the Share icon at the bottom-right corner
➤ This opens an animated bottom pop-up modal, offering multiple social sharing options (e.g., Facebook, WeChat, Gmail) and utilities like “Copy link” or “Write post.”
The modal smoothly slides up from the bottom with a soft shadow, consistent with the app’s minimal UI theme.

Full-Screen Video Page

bottom pop-up

All interactions maintain the purple accent color palette, and animated feedback is applied to every button for a responsive, delightful experience.

🟪 Hot Search Ranking

Displays the most trending search keywords, allowing users to keep up with current events and hot topics.

Page Structure:

Keyword List:
Ranked by popularity (e.g. Top 10), each entry includes:
• Keyword title
• Short description
• Popularity icon (🔥) or ranking number

Keyword Click Action:
Redirects to a related content aggregation page (e.g. news or encyclopedia)

🎞️ Animations:

Micro-interactions:
• Tap feedback with slight zoom on each keyword card
• Gradient color animation indicating popularity level

Macro animations:
• Page slides in from the right on load
• Pull-down refresh with elastic bounce effect

Hot Search Ranking

Hot Search Categories

Allows users to explore trending topcs by category, such as Technology, Entertainment, Politics, etc.

Page Structure:

Category Tabs (horizontal scroll):
• Examples: Tech / Economy / Sport / Politics
• Active tab is highlighted with animated underline

Content Section:
• Displays news cards based o the selected categor
• Cards include title, preview image, and summary

🎞️ Animations:

Micro-interactions:
• Tab switch triggers underline animation and color fade
• Card press responds with light zoom-in effect
Hot Search Categories

🟪 Personal Center

The Personal Center serves as the user’s private dashboard — where they manage personal content, preferences, and app interactions. Accessible via the bottom-right navigation bar icon.

Personal Center

- Avatar click opens Change Photo modal (pop-up + dimmed background)

- Tab highlight slide

- Navigate to post/notification: swipe-in

📌 1. My Post Center

Overview: View and manage all posts created by the user.
Tabs:
- Posts: Published notes with image previews and timestamps.
- Unpublished: Drafts awaiting completion, tap to resume editing.

Create Button: Opens the post creation popup, starting a new travel note.

My Post Center 1.1

My Post Center 1.2

- "Create" button tap with zoom + shadow

- Tabs with underline sliding effect - Enter/Edit page with right-slide transition

📩 2. Notification Center

Friend Requests: See who has added you as a friend.
Comments: Stay updated on interactions with your shared posts.
Time Stamps: Help track latest activities.

- Cards fade in / slide up

- Tap avatar to view profile (optional)

- Whole page slides from left

Notification

📚 3. Collections, Favorites, History

This section allows users to revisit saved or browsed content.

Tabs:
- Collect: Websites, videos, documents — all organized by category.
- Love: Marked favorites across different content.
- History: Chronological browsing record with timestamps.
Search Function: Available across all tabs for quick filtering.
Collections, Favorites, History

-Tab switches with animated underline

- Cards tap with slight zoom

⚙️ 4. Settings & Personal Info

Manage personal preferences and account data:

Change Language: Switch between English, Spanish, French, etc.

Change Language

Edit Profile: Modify name, city, state, and bio in a clean form.

Edit Profile

Change photo:

Tap on profile image on main page.
A popup appears to upload a new photo and confirm.

Change photo

Notification Settings:
- Toggle Push / Email / Location services.
Useful for controlling information exposure and personalized alerts.

Notification Settings

- Input field focus highlight

- Submit button tap feedback

- Enter/exit with slide-up/down transitions

🚪 5. Log Out

Log Out Button at the bottom of the Personal Center.
Confirmation Popup:
- Prevents accidental logout.
- Displays email and offers “Cancel” or “Continue to log out” options.

🔍 Final Reflection & Project Summary

📱 Building a Baidu App Prototype in FlutterFlow

🌟 Project Overview

This project focused on building several core pages of the Baidu App using FlutterFlow, a no-code tool that supports visual programming and Firebase integration. I created fully functional prototypes with interactive elements, transition animations, and data structures that simulate a real-world app experience.

🎯 Pages & Features Completed

Home Page
- Search bar and trending keywords
- Icons for navigation and function shortcuts
Search Result Page
- Mimics Baidu’s result layout using cards and tags
- Organized by category and type of content
User Center Page
- Includes avatar, user name, and settings
- “Edit Username” workflow: complete with popup input box and success feedback
Note Detail & Post Page
- View others’ notes, ratings, and comments
- Create new posts with interactive upload and publish animation

🌀 Animation & Interaction Highlights

Page Load Animations for smooth transitions
On-click Animations with fade/move-in effects
Hero Transitions between list items and detail views
Conditional navigation logic based on user interaction
Floating tip layers and toast messages for user feedback

These interactive touches made the prototype feel dynamic and more closely aligned with actual mobile experiences.

⚠️ Problems Encountered & Insights

Component Nesting Issues
→ Overuse of nested Stack and Column widgets led to layout overlaps and animation failures.
Animation Conflict
→ Triggering multiple entrance effects caused visual chaos. I learned to control timing and trigger conditions to avoid clashes.
Unclear Naming Conventions
→ Inconsistent widget names made late-stage adjustments difficult. I now prioritize organized and meaningful labels.

✅ Skills Learned

Mastered core FlutterFlow tools: layout, navigation, logic flow
Gained experience with animation timing, transition styles
Learned to structure pages for clarity, reusability, and responsiveness
Built a better understanding of user experience flow

📚 Course Reflection

Throughout this course, we explored the foundations of app interface design, learned how to think critically about user behavior, and practiced turning abstract ideas into visual, testable products.

This project allowed me to integrate what I’ve learned into a functional prototype. By building, testing, and iterating, I gained hands-on experience in how to:

Translate a user story into screen flow
Evaluate design choices based on usability
Improve interactivity with minimal resources

This reinforced the idea that good UX is not just about visuals, but about thoughtful planning and user-centered logic.

💡 “Design is not just what it looks like and feels like. Design is how it works.” – Steve Jobs

💬 Personal Takeaway

This was a transformative journey from confusion to clarity. Early frustrations with FlutterFlow's structure were replaced by satisfaction as my design vision came to life. I now see prototyping not as a technical chore, but as an iterative conversation between designer and user.

In future projects, I will continue to:

Break down big tasks into small, testable components
Prioritize consistency and feedback in interface design
Use animation wisely to support, not distract from, user goals

Added teacher as editor

Live on link
https://baidu-search-demo.flutterflow.app

Share preview link
https://app.flutterflow.io/share/rtyu-sbjosc

🔷 Flow 1: From Homepage Search → View Entry → Browse Notes and Post Comment

Homepage
➡️ Tap on the search bar
➡️ Enter a keyword (e.g., Turkey)
➡️ Go to the search results page
➡️ Click on the Baidu Encyclopedia card
➡️ View detailed encyclopedia entry
➡️ Scroll down to see recommended user notes
➡️ Click on a note card to enter the post detail page
➡️ Check the comment section
➡️ Tap the comment icon to post a quick comment or enter full edit mode
➡️ Click “Publish” and see animation feedback

🔷 Flow 2: Profile Center → Edit Info → Logout

Homepage
➡️ Tap the “My” icon at the bottom right to enter the personal center
➡️ Tap on the profile picture to open avatar change popup (with micro animation)
➡️ Tap the nickname area to go to the “Edit Name” page
➡️ Save changes and return
➡️ Tap the settings icon at the top right
➡️ Select “Log Out”
➡️ A confirmation popup appears (with animation)

🔷 Flow 3: Short Video Page → Find Friends → Use Share Function

Tap the “Short Video” icon from the bottom navigation
➡️ Enter the short video recommendation page
➡️ Tap the top-right icon to go to the “Find Friends” page
➡️ Return to the short video page
➡️ Tap the bottom-right share icon
➡️ A share popup appears (with micro interaction effect)