【EE308FZ Team EmoGenius Crew Assignment 5 - Fifth assignment-- Prototype design】

EE308FZ Team EmoGenius Crew Assignment 5 - Fifth assignment-- Prototype design

The Link Your Class	2301-MUSE Community
The Link of Requirement of This Assignment	Fifth assignment-- Prototype design
Team name	EmoGenius Crew
The goal of this assignment	Finish the interface prototype design and defense presentation PPT.
Other references	No reference

Links of documents

Requirements Specification	EmoGenius Crew’s requirement specification
Analysis PPT	EmoGenius Assignment 4 Report PPT
Demand Analysis Review Form	Demand Analysis Review Form
Analysis PPT&Requirements Specification in Github	EmoGenius Assignment 4 Report PPT & Requirements Specification

Ⅰ. Team Labor Division of Assignment 5

This table demonstrates the Team Division of Labor of Assignment 5(Not the overall project, just Assignment 5).

Student ID	Work distribution	Contribution
Wang Yifan	Back-end development, Blog essay, interface prototype design	10%
Zhang Xindan	Front-end Development, interface prototype design	21%
Zheng Haoyuan	Front-end Development, interface prototype design	15%
Zheng Binyue	Front-end Development, interface prototype design, Defense presentation PPT, Presentation	18%
Wang Yanbo	Front-end Development, interface prototype design, Defense presentation PPT	15%
Wang zhaoyou	Front-end Development, interface prototype design, Defense presentation PPT	15%
Lu Yuhao	Server development, Demand analysis report PPT	3%
Wu Guohua	Server development	0%
Li Guandong	Back-end Development, Defense presentation PPT	3%
Fan Jinzheng	Back-end Development	0%
Shi TianJun	Back-end Development	0%

Ⅱ. Organization method in Assignment 5

Our team (6 individuals) adopted a collaborative grouping approach to complete Task 5 to ensure efficient completion of the task.
The overall project leader presented the actual development status of the project and outlined the plan for each section, specifying the required components and the total number of interfaces.
The leader of the frontend team conducted a meeting to discuss the overall design style and detailed task assignments. The UI design was carried out using a team-based approach: two members were responsible for the UI design of login, registration, personal center, and emotional chat robot, while the remaining three members focused on the design of emotional diaries and the emotional forum.
The six team members actively collaborated and communicated through various means, including QQ messaging, Tencent meetings, and offline discussions. In the end, both the partial and final products were submitted to the general audience for critical feedback, allowing the project leader and other team members to conduct evaluative revisions.

Division of Labor in Ditails:

Yifan Wang: UI interface layout planning, results review and revision, document writing (10%)
Xindan Zhang: UI interface layout planning, results review and revision, UI interface creation (21%)
Binyue Zheng: UI interface creation, document writing, PPT creation, presentation (18%)
Haoyuan Zheng: UI interface creation, document writing (15%)
Yanbo Wang: UI interface creation, document writing (15%)
Zhaoyou Wang: UI interface creation, document writing (15%)
Yuhao Lu: PPT creation (3%)
Guandong Li: PPT creation (3%)

Team organization method

1. Regularly assess team performance: Evaluate team performance periodically, identify problems, and take timely measures for improvement. Regular performance assessments help the team identify issues and make adjustments and improvements promptly
2. Team meetings: In order to better coordinate the work among all members, we will hold a meeting every day, in which we will explain their progress and give the next schedule.
3. Communication: Our group communicates and collaborates through offline communication and online voice communication. All members are serious and responsible for their work and can complete the task in a short time.
4. Feedback: We will give feedback and improvement regularly, each member will put forward their own views on the work, and finally we will jointly decide on a best improvement plan.
5. Mutual Support and Encouragement: We place a high value on mutual support and encouragement among team members. When a team member encounters challenges, we make every effort to assist and motivate them.

Ⅲ. Schedule arrangement in Assignment 5

A well-structured schedule ensures that each task and milestone has a dedicated timeframe. It helps in utilizing time efficiently, avoiding last-minute rushes, and achieving the project’s objectives within the stipulated time. The team leader reasonably arranges the work schedule to ensure that the work is completed in an orderly manner.

The primary objective of the front-end tasks this week is to finalize all interface designs for the application (subject to potential adjustments later). The designated timeframe for these tasks is from October 30 to November 10.

October 30: The front-end team conducted an online meeting to conclude a draft version of the application interface prototype, subsequently forming two teams.
October 31: The initial Tencent video conference was held to establish a unified UI design style, define the overall design layout, and outline the schedule.
October 31 to November 1: The two teams worked independently to fulfill their respective tasks, maintaining online communication throughout the process.
November 2: Completion of all application interfaces (first version), followed by the second Tencent video conference for collaborative modifications, improvements, and finalization of the team logo.
November 6 to November 8: Composition of the Interface Prototype Design.
November 9 to November 10: Compilation of the blog on CSDN and creation of the PPT.

Ⅳ. Interface Prototype Design

In the realm of UI design, our team extensively employs specialized prototype design tools to construct frameworks and efficiently leverage resources. The primary tools selected for this purpose are Instant Design and Mockplus. Additionally, we source relevant materials, including downloads from Iconfont, with a minor portion of fonts crafted using Blender modeling.

Prototype Design Process and Outcomes:
The subsequent sections will showcase the prototype design based on the distinct functional blocks outlined in the Software Requirements Specification. We will provide detailed insights into the main page, login/register page, pages corresponding to the three key functions, and the user center page. The exploration will unfold sequentially within each functional block, following the order of “results of prototype design - process of design (difficulties).”

Activity UI Design	difficulty	Whether solved
Opening page	How to design our APP LOGO?	Yes
Register interface	How to design the registration page to collect user information window	Yes
Home page	How to implement an entry with three main functions and make the page look good	Yes
Emotional diary interface	Material collection difficulty	Yes
Forum	Style inconsistency issues	Yes
Forum	How to model a pattern font	Yes
Emotional counseling robot	Meet individual user needs and preferences	Yes
Emotional counseling robot	How to enhance the intimacy of emotional counseling	Yes

1. Opening page

1.1 Results

This is the first page users encounter upon opening the software, and it will automatically disappear after displaying for 3 seconds, transitioning to the login interface. The cover showcases the product name and the creative team against a green background adorned with the product logo. This reflects our team’s emphasis on user-friendliness during the design of this software, establishing a fresh, minimalist, and lively color scheme for the entire application.

1.2 Process

1.2.1 Difficulty Description

During the process of designing the software logo, our team encountered several challenges. Firstly, there was no dedicated member within the team for designing the software logo, and the primary cartoon pattern or image for the software was not determined in the early stages of the project. This resulted in the later creation of the software logo, where we had to refer back to the already completed pages and determine the elements to be used in the logo.

1.2.2 Solution Attempts + Whether Solved:

This difficulty has been successfully addressed. Although it was too late to modify the overall style of the software, including the main textures and components, our team collectively brainstormed during an online meeting. We proposed different design solutions, including a combination of patterns and the software name, using only the initial letters of the software name, and incorporating the initials of the software name and team name. Ultimately, we unanimously adopted the pattern + software name design solution, with the selected pattern being the rabbit illustration repeatedly used on the functional pages.

1.2.3 What Was Gained:

This experience made us realize that, before creating software pages, it is essential not only to determine the theme color and style but also to roughly plan the main elements and font style of the software logo in the early planning stages. This helps prevent difficulties in finding a central icon or image that aligns with the entire frontend design when designing the software logo later on, avoiding unnecessary time wastage and potential style inconsistencies.

2. Login/Register interface and home page

2.1 Results

2.1.1 Login/Register interface

Upon viewing the front-page interface, users are directed to the Login interface, prominently featuring the app’s title. Users have the option to log in using their account credentials or facial recognition. For new users, there is an option to click on ‘Create an account,’ which leads them to the ‘Register interface’ page where they can establish an account password and provide additional required information.

2.1.2 Home page

Upon touching their profile picture, users can access the individual center. Additionally, users have the option to touch one of three buttons to enter distinct modules: diary, forum, and robot. Furthermore, users can view their username along with a sentence in the daily sentence module. The purpose of these positive sentences is to elicit improved emotions in users.

2.2 Process

2.2.1 Difficulty Description:

When designing the UI, the interface tends to become monotonous, empty, or overly complex, making it challenging to find a balanced and comfortable design structure.

2.2.2 Solution Attempts + Whether Solved:

The issue has been resolved. Various design methods were discussed with team members, leading to the formulation of multiple design drafts. We took into account the aesthetic perceptions of as many team members as possible and iterated quickly on existing designs. In some interfaces, we referenced mature designs. Using design tools, we arranged elements such as controls neatly and aesthetically. Simultaneously, we enriched the pages by adding patterns from a material library that align with the overall design.

2.2.3 What Was Gained:

Throughout the progression of the project, valuable lessons were learned. When encountering issues, it is essential to actively engage in discussions with relevant team members and leaders, listen to different opinions, and then advance the project. Additionally, referencing existing designs and learning from mature design concepts proved beneficial. When solutions were unclear, multiple attempts from various perspectives were made, actively employing the spiral model to unearth design inspiration and promptly make corrections.

3. Emotional Diary Interface

3.1 Results

Our team intends to establish the emotional diary module as a distinct interface, accessible through the “Emotional Diary” button on the homepage. Within this diary module, users have the option to create and save a new emotional diary or review their historical entries by selecting one of the buttons on the initial page.

3.2 Process

3.2.1 Difficulty Description:

Concerning the difficulty in material search: it primarily involves how to find suitable patterns and backgrounds.

1. We need to specify the patterns that align with the overall design of the app, considering whether different modules require distinct styles of patterns and determining the quantity of patterns needed.
2. It is essential to identify the source of pattern prototypes, i.e., which websites provide suitable pattern prototypes.
3. Copyright and compliance issues.

3.2.2 Solution Attempts + Whether Solved:

1. In the early stages of the project, our team conducted a separate online meeting where each member expressed their opinions, and collectively, we determined the most suitable approach. Ultimately, we decided to search for cute rabbit patterns and others.
2. Based on the meeting results, each team member sought out several sets of materials and shared them. In the end, we confirmed that the main source of our pattern prototypes is from materials found on Mockplus, Instant Design, and Xiaohongshu.
3. To ensure selected materials do not infringe on any copyrights or intellectual property rights and avoid legal issues, we meticulously reviewed the copyright status of each material before use, steering clear of resources explicitly marked as “not for commercial use.”

3.2.3 What Was Gained:

We have gained a deeper understanding of various channels for sourcing materials. Currently, we can swiftly and accurately gather UI design-related materials in specified styles, confirming their suitability for our software design.

4. Forum

4.1 Result

Our team intends to segment the forum into four distinct interfaces, namely: the main interface, specific partition interface, posting interface, and interfaces for likes, comments, and replies for each post.

4.2 Process

4.2.1 Difficulty Description:

1. In the process of selecting a UI that can adapt to other functions and align with the main framework of the function, the primary challenge faced is how to design a UI with a substantial volume, which has a significant impact on the overall UI (taking the design of the forum homepage as an example).
2. For the font design and click effects on positive and negative pages, there is a need to emphasize a sense of design in the emotional forum. Attempts were made to use editable fonts within Mockplus, but the results were not satisfactory.

4.2.2 Solution Attempts + Whether Solved:

1. Through searching on Xiaohongshu, a suitable green tie-dye background was first identified, followed by the addition of artistic fonts and graphics corresponding to positive and negative emotions. The inclusion of cute and vivid rabbits added a lively touch.
2. The font section was modeled using Blender software. By searching tutorials online, successful designs for headers and the word “forum” were achieved. The “add component state” was added to the page, enabling the like function in the lower right corner of each emotion to function with a single click (odd-numbered clicks) for liking and a subsequent click (even-numbered clicks) for canceling.

4.2.3 What Was Gained:

By addressing the aforementioned issues, we enhanced our search capabilities and teamwork. Furthermore, we improved our ability to imitate, innovate, and practice based on existing tutorials.

5. Emotional counseling robot

5.1 Result

The functionality of the emotional counseling robot is divided into two interfaces: the main interface and the conversation interface.
The main interface comprises an introduction to the emotional counseling robot’s functionality, a display of the emotional counseling robot’s cartoon image, and a chat initiation button (“Just talk to me”). In the conversation page, users can click the text input field at the bottom to enter text for communicating with the robot companion or click the voice recognition button at the lower right corner to convert the user’s voice into text information.

6. Individual pages

6.1 Result

6.1.1 Individual Center

The Individual Center encompasses four primary functions: reviewing the numbers of followers and followees, inspecting browsing history, viewing all of the user’s diaries and comments, and adjusting personal information settings.

6.1.2 Individual Center Setting Interface

The Individual Center Setting Interface facilitates the modification of user information. Users have the capability to alter profile pictures, account numbers, name signatures, and passwords. Any changes made will be saved upon the user pressing ‘Finish Setting.’

6.2 Process

6.2.1 Difficulty Description:

When designing the login, registration, and personal information setting pages, it is crucial to avoid homogeneity to prevent users from having difficulty distinguishing between these pages.

6.2.2 Solution Attempts + Whether Solved:

The issue has been resolved. By employing distinct design styles, layouts, and background colors, along with the inclusion of textual cues, we ensure that users can clearly differentiate between the various pages.

6.2.3 What Was Gained:

This process honed our ability to consider problems from the user’s perspective, enabling us to empathize with the difficulties users might encounter. Additionally, it elevated our design proficiency and introduced new design approaches.

Ⅴ. Analysis of possible key points and challenges

Possible challenges

1. Late Logo Design: The challenge of designing the software logo late in the project, leading to difficulties aligning it with the overall style and components of the software.
2. UI Design Monotony: Avoiding the homogeneity of UI designs for login, registration, and personal information setting pages to prevent confusion among users.
3. Material Search Difficulty: Challenges related to finding suitable patterns and backgrounds, including determining the style alignment, quantity, and source of pattern prototypes.
4. Font and Click Effects Design: Designing fonts and click effects on positive and negative pages in the emotional forum may pose challenges in achieving a desired sense of design.
5. Effective Division of Forum Interfaces: Successfully dividing the forum into four interfaces, including main, partition, posting, and interaction interfaces, while maintaining a coherent design.
6. User Interface Consistency: Maintaining a consistent and visually appealing user interface across different modules and functions poses a potential challenge.

Possible key points

1. Collaborative Grouping Approach: The adoption of a collaborative grouping approach is a key strategy, promoting efficient task completion by dividing the team into specialized groups (frontend, backend, server, and documentation).
2. Regular Work Exchange Meetings: Holding regular meetings is crucial for maintaining communication, coordination, and task integrity among team members.
3. Performance Assessment: Periodic assessments of team performance allow for the identification of issues, enabling timely measures for improvement.
4. Utilization of Prototype Design Tools: The team utilizes specialized prototype design tools such as Instant Design and Mockplus for constructing frameworks and leveraging resources.
5. Material Sourcing: The sourcing of materials, including patterns and backgrounds from platforms like Iconfont, is a key aspect of UI design.
6. Schedule Arrangement: A well-structured schedule is essential for ensuring each task and milestone has a dedicated timeframe, promoting efficient time utilization.
7. Division of Forum Interfaces: Segmentation of the forum into four interfaces poses both a key point and potential challenge, emphasizing the need for a balanced and effective design.

Ⅵ Feelings and Evaluations of Teammates

Our team’s spirit of collaboration is evident in our close cooperation and harmonious relationships. In this project, each team member demonstrated a high level of responsibility and teamwork.

Team Collaboration Spirit

Our team’s collaborative spirit is reflected in proactive communication and mutual support. Throughout the project cycle, we maintained timely and efficient communication through various means, including online discussions, video conferences, and offline meetings. Everyone shared a strong sense of common goals, enabling us to quickly address issues and adjust directions, ensuring the smooth progress of the project.

Harmonious Relationships

The team members have established harmonious relationships, contributing to better collaboration. Everyone willingly shared experiences and knowledge, actively providing assistance. Faced with challenges, we worked together and supported each other, creating a positive and uplifting atmosphere within the entire team.

High Sense of Responsibility

Each team member demonstrated a high sense of responsibility. Everyone took ownership of their tasks, completed work on time, and was willing to exert effort for the team’s goals. This high level of responsibility was a crucial factor in our team’s success in the project.

Through this project, we not only achieved our set objectives but also built a strong foundation for future teamwork. This experience has laid the groundwork for continued successful collaboration in future endeavors.