Assignment 4 Interface Prototype Design — Fubangbang

Fubangbang (福帮帮) is a campus resource-sharing platform for students of Fuzhou University. In this assignment, we used MoDao to build and share a mobile interface prototype based on our earlier requirements analysis. We also provide a deployed website to demonstrate the application’s implemented functions. The two links serve different purposes: MoDao shows the prototype design and page navigation; the website shows the working application.

Format Description

Contents

1. Team Division of Labor and Contributions
2. Project Background and Prototype Objectives
3. Prototype Design Tool and Process
4. Interface Design and Core Interaction Flow
5. Verification and Comparison with the Deployed Website
6. Difficulties, Solutions, and Lessons Learned
7. Team Collaboration, Presentation, and Deliverables

Checklist: Prototype Design

1. Team Division of Labor and Contributions

Our 14 members worked in the Backend Team, Frontend Team, UI and Presentation Team, and Execution Support Team. For this assignment, their group shares were 30%, 35%, 25%, and 10%, respectively. These percentages describe work on this prototype-design assignment, not each member’s contribution to the entire software project.

Chen Jiayuan, Ye Jiahui, and Zhu Chaoyang carried equal leading shares of coordination, design, and frontend alignment. Zhu Mingqian made a substantial contribution to prototype pages and interaction paths. Other members supported implementation review, visual checks, testing, documentation, and presentation preparation.

2. Project Background and Prototype Objectives

2.1 Background and Users

Our earlier assignments identified two campus needs: exchanging second-hand items within the university community and sharing useful information about study and campus life. Relevant information is often scattered across group chats and general-purpose platforms, making it difficult to find or assess.

Fubangbang is intended to give students a clearer place to browse or publish items and share campus experiences. In the current interface, information sharing is presented through a campus forum.

2.2 Core User Scenarios

The design considers four connected tasks:

• A buyer browses the Marketplace, opens an item, and decides whether to contact the seller or request a reservation.
• A seller publishes an item and checks its status.
• A student reads or publishes a forum post.
• A user moves between Home, Marketplace, Forum, and My Profile with a clear navigation path.

These scenarios guide the overall product. They do not mean that every control shown in the MoDao screens performs a real data operation.

2.3 Design Objectives

We focused on clear navigation, readable mobile content, and visual consistency. Users should be able to enter a main area, open a detail page, and return without confusion. Item images, prices, descriptions, and primary actions should be easy to identify on a phone. Repeated navigation elements should have predictable positions and behavior.

3. Prototype Design Tool and Process

3.1 Why We Used MoDao

MoDao is a specialized prototype-design tool. It lets us organize mobile screens as separate pages, add clickable areas, configure page jumps, and share the result online. This makes it possible for a visitor to follow a user path instead of viewing unrelated screenshots.

We used the existing Fubangbang website as a visual reference. The prototype retains its main layout, product cards, color accents, and bottom navigation so that the design and implemented application describe the same product.

3.2 Page Organization

We organized the item-browsing task into three named mobile pages:

1. Home introduces the platform and its main entries.
2. Marketplace List presents second-hand items for browsing.
3. Product Detail gives one item more space and shows its next possible actions.

Uploading an image to MoDao does not automatically create a new prototype page. We therefore created separate pages and placed the appropriate screen on each one.

[Insert Figure 1: Screenshot of the named pages in the MoDao editor.]

3.3 Interaction Design and Review

We placed clickable areas over selected visible controls and configured page jumps. The main route is Home → Marketplace List → Product Detail, followed by a return to the list or main area. Our team tested the shared link from the visitor’s side and clicked through the main navigation and return route.

A clickable area demonstrates a page transition. Because some screens were imported as images, visible search fields, filters, and forms do not become functional automatically. We do not present those image elements as working input or data-processing features of the MoDao prototype.

4. Interface Design and Core Interaction Flow

4.1 Information Architecture

The interface uses four recognizable main areas: Home, Marketplace, Forum, and My Profile. Home introduces the platform and directs users to important tasks. Marketplace supports item browsing. Forum is the entry to campus discussion and information sharing. My Profile groups account-related actions.

The MoDao pages documented here focus on the item-browsing path. The deployed website includes additional screens and functions, but their presence on the website does not mean they were all recreated as interactive MoDao pages.

4.2 Key Screens

Home. The homepage presents the Fubangbang identity, a search area, Marketplace and Forum entries, recent items, and recent campus posts. The Marketplace entry is the starting point for the demonstrated route.

[Insert Figure 2: MoDao Home screen with the Marketplace entry visible.]

Marketplace List. Search and category controls appear above item cards. Images, short titles, prices, and publisher information help users scan listings. A publishing entry is visually separated from the browsing area.

[Insert Figure 3: MoDao Marketplace List screen.]

Product Detail. A larger item image, price, description, location, and seller information help the user assess a listing. Contact and reservation actions appear after the item information, while the return control supports continued browsing.

[Insert Figure 4: MoDao Product Detail screen.]

4.3 Main Interaction Path

The main prototype path is Home → Marketplace List → Product Detail → Marketplace List or Home. This sequence takes a user from discovery to a specific item and then back to browsing. An image-led layout supports quick comparison; the detail page provides more context before a user takes the next step.

5. Verification and Comparison with the Deployed Website

We evaluate the two online deliverables separately. For MoDao, the question is whether a visitor can open the shared prototype and click its configured navigation. For the deployed website, the question is whether implemented operations work with the frontend, backend, and stored data.

The MoDao prototype is evidence of professional-tool prototype design and tested page navigation. The public website is evidence of a deployed application and its implemented functions. They complement each other; one should not be described as a substitute for the other.

6. Difficulties, Solutions, and Lessons Learned

6.1 Turning Images into Prototype Pages

Difficulty: An uploaded interface image did not automatically become a separate page.

Attempt and result: We created and named individual mobile pages, then placed each screen on its corresponding page. This resolved the page-organization problem and gave us a clear browsing route.

Lesson: A usable prototype needs an information structure, not only attractive screenshots.

6.2 Making Imported Screens Interactive

Difficulty: Buttons and fields visible inside an imported image cannot respond to clicks or accept input on their own.

Attempt and result: We overlaid clickable areas on the main controls, configured page jumps, and tested the shared prototype’s forward and return routes. This resolved basic page navigation. Search input, filtering, form submission, and data updates remain outside what image hotspots alone can demonstrate.

Lesson: Visual fidelity and interaction completeness are different. We should report only the prototype interactions we tested and use the website to demonstrate implemented business operations.

6.3 Explaining Two Online Deliverables

Difficulty: Since the website was already publicly accessible, we needed to clarify why a separate MoDao prototype was still required.

Attempt and result: We matched each deliverable to the assignment requirements: MoDao presents the professional-tool prototype and its navigation; the website presents the implemented application. We label both links accordingly in this post and in the presentation.

Lesson: A working website and a design-tool prototype can support the same project, but they provide different evidence.

7. Team Collaboration, Presentation, and Deliverables

7.1 Collaboration and Plan Execution

The project lead coordinated the written report and requirements alignment. Frontend and UI members aligned the MoDao pages with the website. Technical members reviewed implementation status. The Execution Support Team assisted with checks and presentation materials.

The website’s earlier deployment did not remove the need to present the specialized-tool prototype separately.

7.2 Team Discussion, Reflection, and Peer Evaluation

Our collaboration showed that visual design, clickable prototype navigation, and working software can progress at different speeds. Testing the MoDao sharing link as a visitor and reviewing the website separately helped us describe each result accurately.

For this assignment, Chen Jiayuan, Ye Jiahui, and Zhu Chaoyang carried equal leading shares of coordination, interface design, and frontend alignment. Zhu Mingqian contributed substantially to prototype pages and interaction paths. Zhou Qican and Chen Haoyang supported frontend and implementation review. Other members helped with visual and technical checks, documentation, testing, and submission preparation. These comments evaluate work on this assignment, not any member’s overall ability.

7.3 Classroom Demonstration

In class, we will first open the MoDao prototype and click through the tested route, including entry, page navigation, and return. We will then open the deployed website to demonstrate a rehearsed implemented workflow. The live prototype demonstration is important: screenshots in the slides alone cannot show its interaction.

7.4 Deliverables

7.5 Future Plan

Next, we will gather feedback from the prototype demonstration and improve the interface and user experience. We will also continue testing the deployed website and refine the stability of its frontend–backend interactions.