MindCareers Project Prototype Design Assignment Blog

Table of Contents

• Project Overview

• Assignment Format Description

• Project Division of Labor

• Interface Prototype Design

• Design Process and Collaboration

• Challenges and Solutions

• Team Plan Execution and Reflection

• Prototype Design Report PPT

• References

Project Overview

MindCareers is an innovative AI-driven mental health social support platform designed to provide convenient, scientific, and companionable digital harbor for young people facing emotional pressure and mental health challenges. The project combines AI psychological assessment, social support systems, and personalized intervention solutions to create a warm and healing mental health ecosystem.

Assignment Format Description

Course Affiliation: EE308Fz Software Engineering Course

Assignment Requirement: Fourth Assignment - Prototype Design

Team Name: MindCareers 

Assignment Objectives:

1. Design UI prototypes that comply with SRS document standards

2. Plan detailed division of labor and collaboration processes for a 12-person large team

3. Complete UI prototype PPT preparation for classroom defense

4. Practice requirements engineering and team management methods in large projects

Other Reference Materials: IEEE Std 830-1998, GB/T 8567-2006, PHQ-9 and other professional psychological assessment tools

Project Division of Labor

Our team adopted a structured, role-based approach to efficiently manage the prototype design phase. The specific division of labor is as follows:

Team Member	Role and Responsibilities	Work Description	Contribution Percentage
Lian Sentao	Project Management, Data Collection	Psychological assessment data search and solution writing; meeting records and project progress tracking	8%
Wu Haotian	Data Collection, Test Feedback	Psychological assessment evaluation data collection; user operation test feedback collection	8%
Lin Zejun	Data Collection, Function Debugging	Psychological assessment solution writing; software function debugging	8%
Wu Zhibin	Backend Development Lead	Communication protocol design, database design, server-side coding	9%
Wu Yuting	Protocol Design, Blog Writing	Communication protocol and interface document design; CSDN blog writing	8%
Lian Zezheng	Database Development, Testing	Database design and coding; software function debugging	8%
Jiang Xiancheng	Client Development Lead	Client coding, UI interface design, interface beautification	8%
Fang Lizhe	UI Design, Meeting Records	Client UI interface design; meeting records and project progress recording	9%
Yang Yuanzhen	Interface Beautification	Client interface beautification	9%
Yang Yue	Interface Beautification	Client interface beautification	8%
Fan Zhenzhen	Testing, Blog Writing	Software function debugging; CSDN blog writing	8%
Chen Yipeng	Test Feedback, Blog Writing	User operation test feedback collection; CSDN blog writing	8%

Interface Prototype Design

Prototype Design Tools: We used HTML5 + Tailwind CSS + JavaScript to develop high-fidelity interactive prototypes supporting cross-platform mobile experience.

Design Philosophy: Our design focuses on warmth and healing as the core, adopting a fresh and simple style to create visually appealing and distraction-free environments. The main color scheme uses warm blue (#4A90E2) and soft green (#7ED321) to create a comfortable mental health application atmosphere.

Prototype link:EE308FZ_assignment/Prototype_design_code at main · Lainwk/EE308FZ_assignment

Core Interface Design

Homepage Design

• Top title bar (56px): User avatar and nickname, message notifications, settings entrance

• Central content area: Emotional status cards, quick assessment entrance, functional module area, personalized recommendations

• Bottom navigation bar: Four-tab design for Home, Assessment, Community, and Profile

Assessment Interface Design

• Progress indicator clearly displays current question progress (e.g., 1/5)

• Question area uses large button design for easy user selection

• Bottom navigation provides smooth previous/next question operation experience

Community Interface Design

• Anonymous posting cards support text and emoji input

• Timeline layout displays community dynamics, each item contains content, interaction data, and anonymous identification

• AI psychological counseling dialogue entrance provides immediate support

AI Psychological Communication Page:

Design Process and Collaboration

Our collaboration is the cornerstone of project success. We established a clear workflow:

Initiation and Analysis Phase: Project manager and backend team lead sorted out requirements based on SRS documents, clarifying prototype design scope and technical constraints.

Wireframing and Ideation Phase: UI design team created low-fidelity wireframes, reviewed and optimized through full-team collaboration meetings.

High-Fidelity Design and AI Integration: Used modern front-end technology stack to build high-fidelity prototypes, reasonably utilizing AI tools to accelerate layout exploration and icon concept generation.

Review and Iteration Phase: Test team conducted usability testing on interactive prototypes, with feedback directly incorporated into design improvements by UI team.

Integration and Documentation: Backend team confirmed all designed interfaces have reasonable data structure support, blog content compiled from contributions by all members.

Our team deeply discussed the optimal layout scheme for analysis panels in design review meetings to ensure optimal user experience.

Challenges and Solutions

Challenge 1: Balancing Feature Richness with Simplicity

Problem Description: Our SRS document contains numerous functions (task management, timer, grades, analysis, etc.), making initial designs appear cluttered, contradicting our goal of promoting focus.

Solution Attempts and Results: We applied progressive disclosure design principles. Designed a clean default view (dashboard) with advanced features neatly hidden in secondary screens or expandable menus. This successfully simplified the core user interface without removing functionality.

What Was Gained: Deep understanding of how to prioritize content and guide user attention, which is crucial for productivity applications.

Challenge 2: Human-AI Collaboration in the Design Process

Problem Description: We used AI tools to generate quick layout sketches and icon concepts. Initial outputs were generic and lacked specific context for student productivity tools.

Solution Attempts and Results: We adjusted our strategy. Instead of using AI for final designs, we used it as an "ideation partner." Our iteration: adopted the basic structure but reorganized settings into logical groups matching user needs (account, focus, appearance, notifications). Replaced generic icons with consistent sets from dedicated icon libraries and applied our brand colors.

What Was Gained: We learned to leverage AI as a powerful tool for overcoming creative blocks and accelerating early-stage design, while reaffirming that the designer's role in critique, iteration, and user empathy is irreplaceable.

Team Plan Execution and Reflection

Our team plan was executed successfully. The clear division of labor allowed parallel work streams, with project manager ensuring synchronization. UI and backend teams held regular sync-ups to ensure design feasibility, and test team's early involvement was invaluable for catching usability issues before final delivery.

Prototype Design Report PPT

Our prototype design defense PPT is ready, containing the following core content:

• Project introduction and technical architecture

• Requirements analysis and solutions

• Prototype design highlights

• Team collaboration process sharing

• Future development planning

EE308FZ_assignment/Prototype_Design_Report at main · Lainwk/EE308FZ_assignment

References

1. IEEE Std 830-1998 Software Requirements Specification Standard

2. GB/T 8567-2006 Computer Software Documentation Specification

3. PHQ-9 Patient Health Questionnaire Technical Standard

4. Mental Health Mobile Application Development Guide

5. Personal Information Protection Law Related Specifications

---

Blog Submission Time: November 24, 2025

Team Signature: All Members of MindCareers

Statement: This blog content is authentic and effective, the prototype design is original work, welcome to exchange and correct.