Fourth assignment -- Prototype design

This assignment belongs to which course	MIEC EE304FZ
Where this assignment is required	Fourth assignment – Prototype design
Team name	“ExamMastery Pioneers”
The goal of this assignment	Prototype design
Other references	N/A

I. Link to Presentation Slides

CLICK HERE => Our group’s Slides on 优快云

II. Link to Presentation Interface Prototype Design

CLICK HERE => Our group’s interface prototype design
Axure is used for designing the interface.

III.Contribution

3.1 The division of labor and workload proportion among team members.

Student	Work Description	Contribution
832201124蒋修平	Reading and Allocating Work from Teacher’s Requirements. Visual Designer:Design UI visual styles, produce high-fidelity drafts, and maintain brand image consistency.	10%
832201101王宇涵	Visual Designer：Design UI visual styles, produce high-fidelity drafts, and maintain brand image consistency.Interaction Designer：Plan interaction processes, create interactive prototypes, and draw on research for design.	9%
832201212吴旭炜	Blog Writing：Responsible for documenting UI design work, sharing progress and insights in written form.PPT Making: Create well-structured PPTs to present UI design details, process, and achievements	9%
832201218陈子彦	Blog Writing：Responsible for documenting UI design work, sharing progress and insights in written form.	8%
832201106李文超	Visual Designer：Design UI visual styles, produce high-fidelity drafts, and maintain brand image consistency.	8%
832201327童百川	Visual Designer：Design UI visual styles, produce high-fidelity drafts, and maintain brand image consistency.	8%
832201303朱纪钧	Interaction Designer：Plan interaction processes, create interactive prototypes, and draw on research for design.	8%
832202221林汪洋	Front-End Development Engineer：Convert UI design drafts into code, cooperate for optimization, and enhance front-end performance.	8%
832201329 熊恒	Front-End Development Engineer：Convert UI design drafts into code, cooperate for optimization, and enhance front-end performance.	8%
832201308 巫昌书	User Experience Researcher：Conduct research activities, analyze data, and offer suggestions for UI design improvement.	8%
832201107 李石龙煜	PPT Making: Create well-structured PPTs to present UI design details, process, and achievements.	8%
832201119郑轶恒	Reporting：Deliver oral presentations about UI design projects, updating on status and outcomes.	8%

3.2 Photo of Discussion

3.3 Cooperating Methods

Reading and Allocating Work from Teacher’s Requirements

The person responsible for this task among us (usually the project leader or team coordinator) carefully studies the teacher’s requirements and then assigns work to different divisions according to the skills and specialties of our team members. During the project, they will also adjust the work allocation plan in a timely manner according to the actual situation and new requirements.

Visual Designer and Interaction Designer

• As interaction designers among us, we first outline the basic interaction framework and process based on user needs and product functions, thus providing a foundation for the work of our visual designers.
• Then, our visual designers create the visual style on this framework, constantly communicating with us interaction designers to ensure that the visual design doesn’t disrupt the smoothness of the interaction flow.
• After our visual designers complete the high-fidelity design drafts, we interaction designers check the interactivity to confirm that all elements can be operated as expected and provide feedback for any necessary modifications.

Visual Designer and User Experience Researcher

• As user experience researchers among us, we collect users’ feedback and preferences regarding the visual aspect of the product during our research and promptly share this information with our visual designers to help them adjust and optimize the visual design.
• Our visual designers can invite us user experience researchers to organize small-scale user tests after completing some visual design drafts to observe users’ reactions to the visual style and interface layout for further improvement.

Interaction Designer and User Experience Researcher

• The findings on users’ behavior habits and needs obtained by us user experience researchers serve as crucial input for the work of our interaction designers, helping them formulate more reasonable interaction strategies and processes.
• After our interaction designers complete the interaction prototype, we user experience researchers organize usability tests, gathering feedback from users and relaying it to our interaction designers for optimization adjustments.

Visual Designer, Interaction Designer and Front-End Development Engineer

• Before the project enters the development stage, our visual designers and interaction designers need to thoroughly explain the design intentions, interaction processes, and specific requirements of each element to our front-end development engineers, preferably providing detailed design documents and interaction prototypes.
• During the development process, if our front-end development engineers encounter situations where the implementation doesn’t match the design drafts or prototypes or faces difficulties in technical implementation, they will promptly communicate with our visual designers and interaction designers to jointly discuss solutions, which may involve making minor adjustments to the design or using alternative technical means to achieve similar effects.
• After our front-end development engineers complete the staged development results, our visual designers and interaction designers will conduct inspections to check whether the interface effect is consistent with the design drafts and whether the interaction functions are implemented normally, and provide feedback for any necessary repairs.

Regarding Blog Writing, PPT Making and Reporting

• For blog writing, relevant members among us (such as project leaders or user experience researchers) communicate with the whole UI design team to obtain accurate project information and then record the background, goals, process and achievements of the UI design project in a clear and understandable written form for publicity and experience sharing.
• For PPT making, the member responsible among us (such as a project coordinator or visual designer) collects key information from different divisions, like design effect pictures from our visual designers, interaction process screenshots from our interaction designers, and research data charts from our user experience researchers, and then integrates and presents this information in an aesthetically pleasing and organized way for project reporting and display.
• For reporting, usually the project leader or a member with strong communication skills among us communicates with all divisions to understand the latest progress, achievements and existing problems of the project before presenting this information orally to superiors, clients or other relevant parties. During the reporting process, different division members may be invited to supplement explanations on certain professional issues.

IV.Analysis of key points and challenges that may arise

4.1 Analysis of Key Points

4.1.1 Understanding User Needs

Accurately grasping user needs is the core key in UI production. This requires in-depth understanding of the target user group through various means, such as conducting user research (including questionnaires, user interviews, etc.), analyzing user behavior data, and studying user feedback on competing products. Only by clearly understanding the functions, operating habits, and aesthetic preferences that users expect can a UI interface that meets users’ wishes be designed, thereby enhancing the user experience and the product’s market competitiveness.

4.1.2 Visual Design

• Style Positioning: Determining a visual style that is consistent with the product positioning and the target audience is of crucial importance. For example, products targeting young and fashionable groups may tend to have trendy and vivid visual styles; while products for business people usually adopt simple and stable design styles.
• Color Combination: A reasonable color combination can create different atmospheres and emotional resonances. Factors such as color contrast, readability, and display effects on different devices need to be considered to ensure that the interface colors are comfortable and can highlight key information.
• Icon and Graphic Design: Carefully designed icons and graphics should not only be aesthetically pleasing but also have clear semantic functions, allowing users to intuitively understand the operations or contents they represent, thereby improving the usability of the interface.

4.1.3 Interaction Design

• Process Planning: Planning a simple and smooth user interaction process is crucial. It is necessary to ensure that users can easily complete various tasks during the operation process, reducing unnecessary steps and confusion. For example, in an e-commerce APP, the process from product browsing to placing an order and making payment should be as convenient and efficient as possible.
• Feedback Mechanism: Timely and appropriate interaction feedback enables users to clearly understand the results of their operations. For example, after a button is clicked, there should be corresponding visual changes (such as color changes, animation effects, etc.) to inform the user that the operation has been received and processed.
• Prototype Making: By creating an interaction prototype, the interaction process between the user and the product can be simulated in advance, which is convenient for team members, clients, and users to test and experience, and potential interaction problems can be discovered and solved in a timely manner.

4.1.4 Front-End Development Implementation

• Code Quality: Writing high-quality and standardized front-end code is essential for realizing the UI design effect and ensuring product performance. It is necessary to ensure the readability, maintainability, and compatibility of the code so that it can run stably on different browsers and devices.
• Performance Optimization: Attention should be paid to performance indicators such as page loading speed and resource occupation. The loading methods of images, scripts, and other resources should be optimized to reduce unnecessary code redundancy, thereby enhancing the user experience and avoiding user loss due to slow loading.
• Consistency with Design Drafts: Front-end development engineers need to accurately reproduce the visual effects and interaction functions of the UI design drafts, closely cooperate with designers, and communicate in a timely manner to solve situations where the development does not match the design during the development process.

4.1.5 Team Collaboration and Communication

UI production involves multiple professional divisions, such as visual designers, interaction designers, front-end development engineers, and user experience researchers. Good team collaboration and communication are the keys to ensuring the smooth progress of the project. Team members should share information and feedback problems in a timely manner, jointly discuss solutions, and avoid problems such as duplicate work, design deviations, or development difficulties caused by poor communication.

4.2 Analysis of Challenges

4.2.1 Multi-Device Adaptation

Nowadays, users use a wide variety of devices, including mobile phones of different sizes, tablets, computer monitors, etc. Ensuring that the UI interface can present good visual effects and interaction functions on various devices is a major challenge. Differences in resolution, screen ratio, and operating system of different devices need to be considered, and targeted design and development adjustments should be made.

4.2.2 Technical Implementation Difficulty

Some innovative UI design ideas may be difficult to implement technically or the implementation cost may be too high. For example, complex animation effects, real-time data interaction and other functions may require the use of relatively new technical frameworks or algorithms, and team members may not be familiar with these technologies and need to spend additional time and effort to study and research, which may affect the project progress.

4.2.3 Time and Cost Pressure

UI production usually has clear project cycle and budget limitations. To complete high-quality UI design and development work within a limited time, while also dealing with various problems and changes that may occur, places high requirements on the team’s work efficiency and resource management ability. If time and resources are not reasonably arranged, it may lead to project delays or cost overruns.

4.2.4 Aesthetic Differences and Subjective Judgments

Regarding the visual style, design details, etc. of the UI, different people (including team members, clients, users, etc.) may have relatively large aesthetic differences and subjective judgments. For example, a design that a designer considers beautiful may not be satisfactory to the client, or the aesthetic preferences of users may not match the design expectations. This requires the team to fully communicate and collect opinions from multiple parties during the design process, and verify the feasibility and popularity of the design through user testing and other means, and try to coordinate the aesthetic differences of all parties.

V.Difficulties Encountered And Solutions

5.1 Intuitiveness of User Interface

Difficulties:
During the initial stage of prototype design in UI design, making the interface intuitive and fully - functional is a major challenge. It is essential to guarantee that all users, regardless of their technical proficiency levels, can navigate and utilize the platform with ease.

Solutions:
The design team simplifies the interface by leveraging multiple rounds of user surveys and feedback. They highlight the most commonly - used functions and offer intuitive visual cues and icons. Additionally, interactive tutorials and help documents are incorporated to assist new users in quickly getting up to speed.

5.2 Complexity of Function Implementation

Difficulties:
Integrating all the planned functions onto a single, unified platform presents a significant technical hurdle, particularly when it comes to seamlessly integrating personalized learning paths and real - time interactive Q&A platforms.

Solutions:
The team adopts an agile development approach, breaking the project down into smaller, manageable modules. Each module is then developed and tested sequentially. Furthermore, they collaborate with professional third - party service providers to ensure the stability and reliability of the Q&A platform.

5.3 Iteration Speed of Prototypes

Difficulties:
Quickly iterating prototypes in response to user feedback while maintaining product quality and adhering to tight development schedules is a considerable challenge.

Solutions:
The implementation of cross - functional team collaboration ensures that design, development, and testing teams work in close harmony. Additionally, the use of automated testing and continuous integration tools expedites the iteration process.

5.4 Multi - device Adaptation

Difficulties:
With a vast array of devices available, including various - sized mobile phones, tablets, and computer monitors, ensuring the UI interface displays well - optimized visual effects and interactive functions across all devices is extremely challenging. The differences in resolution, screen ratios, and operating systems among these devices necessitate numerous targeted design and development adjustments.

Solutions:
A responsive design framework is utilized, enabling automatic adjustments to layout and element sizes based on the screen characteristics of different devices. A device - testing matrix is established, and regular tests are conducted on mainstream devices during the project development phase to promptly identify and address adaptation issues. Design specifications also take into account device - compatibility principles, such as using relative units (percentage, em, rem) for setting element sizes and spacing.

5.5 Differences in User Aesthetics

Difficulties:
There are substantial aesthetic variances and subjective preferences among different user groups regarding the visual style and design details of the UI. Designs that appeal to designers may not be well - received by clients or end - users, making it challenging to meet everyone’s aesthetic tastes.

Solutions:
Comprehensive user research is carried out in the early design phase, analyzing the aesthetic preferences of target user groups across different ages, genders, and regions. A user - feedback mechanism is established to continuously gather user opinions throughout the design process. For example, A/B testing is employed to present different design versions to distinct user groups, and the final design is determined based on user behavior and feedback data. The design style also maintains flexibility, allowing for some degree of personalization while still meeting brand image and functional requirements.

5.6 Technological Updates

Difficulties:
As technology continuously evolves, new design tools, development frameworks, and interaction technologies emerge constantly. UI design teams must keep learning and adapting to these new technologies; otherwise, there may be a disconnect between design concepts and technical implementation, hindering the effective realization of design plans.

Solutions:
Team members are encouraged to participate in industry - relevant technical training, seminars, and online courses to stay updated on the latest design and development technologies. A technology - sharing mechanism is established, with regular internal technical exchange sessions organized to allow members to share newly - acquired knowledge and application experiences. Project planning also reserves time for technological exploration, enabling the trial of new technical solutions and assessment of their feasibility and value for the project.

5.7 Project Time and Cost Constraints

Difficulties:
UI design projects typically come with strict project cycle and budget limitations. Completing high - quality UI design and development within these constraints, especially when faced with complex functional requirements and frequent changes, is a daunting task.

Solutions:
Thorough demand analysis and project planning are conducted at the outset, formulating reasonable timetables and budget allocation plans. An iterative development method is adopted, breaking the project into smaller, deliverable stages, each with clear objectives and acceptance criteria to ensure the project progresses as scheduled. Strict cost monitoring is implemented during the design and development process to prevent unnecessary functions and design elements from inflating costs. Open - source resources and existing design components are also utilized rationally to enhance development efficiency.

5.8 Communication and Collaboration with Other Departments

Difficulties:
UI design often requires close cooperation with multiple departments, such as product, marketing, and development. However, these departments have different professional perspectives and priorities, which can lead to communication barriers and conflicts regarding project goals, design directions, and functional requirements.

Solutions:
A cross - departmental project communication mechanism is established, including regular project communication meetings and shared project documents and resource libraries. This ensures timely and accurate information exchange among departments. Joint review meetings are held at key project nodes, allowing all departments to participate in the review and decision - making of design and development plans. Clear definitions of departmental responsibilities and authorities are made, along with unified project processes and specifications, to minimize communication frictions caused by unclear responsibilities.

VI. Interface Design

All interface designs have been completed and are currently under development.

6.1 Main page display

1. Clear navigation bar: The left - side navigation bar contains core function entries, such as “Get exam materials” and “Personalized learning plan”, facilitating users to quickly access each function module.

2. Information and module brief introduction: The welcome words and brief introductions of each function module are displayed in the center of the homepage, using concise titles and icons for identification. Each module’s card provides a brief description to help users quickly understand the function of each module.

3. High - contrast color matching: The blue background color at the top enhances the visual hierarchy, and important information and buttons also use blue, making it easy for users to focus on key areas.

4. User interaction entries: The “Login”, “Mailbox”, and “Help” entries in the upper right corner are convenient for users to quickly perform basic operations. These entries are prominent and easy to find, enhancing the user experience.

5. Modular layout: The homepage adopts a card - style modular layout. Each function module has an independent card with a reasonable spacing, preventing the page information from appearing crowded and ensuring a smooth user experience.

6.2 Previous Exam Papers Acquisition Interface

1. Search and Filter Functions: The interface offers a search box and dropdown menus for subjects and years, enabling users to quickly locate the desired exam papers.
2. Exam Paper Information Display: Each exam paper card clearly presents the title, brief description, and release date of the paper, facilitating users to quickly browse the paper content.
3. Quick - operation Buttons: The “Preview” and “Download” buttons are provided below each exam paper card, allowing users to directly choose to view the papers online or download them with one - click, which is simple and convenient.

6.3 Personalized Learning Plan Interface

1. Generate study plan: Users can fill in information like student ID, name, plan name, college, major, study time, study method, and study goal. Through this, personalized study plans can be generated, which helps users clarify their study directions and arrange study time.
2. Create study group: The function of creating study groups is provided. Users only need to input the group name to create a group. This makes it convenient for students to organize and participate in group learning.
3. Available study groups: The page displays the list of currently available study groups. Users can check and choose the groups suitable for themselves, increasing the interactivity and collaboration of learning.

6.4 Real time interactive Q&A interface

1. Real - time interactive Q&A: The page provides an area where users can ask and answer questions, enabling real - time communication.
2. Popular answer search and push: There is a function that uses algorithms to analyze users’ behavior patterns. It identifies the most popular and valuable answers and pushes them to interested user groups.
3. Enhance community vitality: By showing and rewarding users who produce high - quality content, it encourages more people to participate in knowledge - sharing, forming a positive, active learning community.

6.5 Notification function interface

1. Real - time Update Reminder: Users can know immediately whether there are changes to their study plans, ensuring the accuracy of study arrangements.
2. Regular Review Reminder: Regularly remind users to complete review tasks, helping to consolidate learned knowledge and avoid forgetting.
3. Interaction Enhancement: When users’ questions are answered or their answers are recognized, increase users’ participation and enthusiasm through instant notifications.
4. Information Non - omission: Ensure that users won’t miss any new developments regarding the questions they raised, promoting knowledge exchange and sharing.