Code crafters ASS5

Assignment description

This assignment belongs to which course	https://bbs.csdn.net/forums/ssynkqtd-04
Where this assignment is required	https://bbs.csdn.net/topics/617468304
Team name	Code Crafters
The goal of this assignment	Prototype Design
The link of prototype	https://rp.mockplus.cn/rps/hHpDAFFMK
The link of presentation	https://github.com/wxyyyyyyyyyy/ass1

Assignment analyzes

After discussion and negotiation, we found points and challenges that may arise during the assignment

1. Goal and Audience Analysis: Understanding the goals and target audience for the webpage is crucial. Different user groups may have varying needs and preferences. Ensure the team has a clear consensus on these aspects.

2. User Experience Design: Designing a user-friendly interface is paramount. Focus on the layout, navigation, interaction, and overall usability to ensure users can easily accomplish their tasks.

3. Design Principles and Style Guidelines: Ensure the team shares consistent design principles and style guidelines to maintain visual coherence. This includes aspects such as colors, fonts, and icons.

4. Responsive Design: Ensure the webpage displays well on different devices, including desktops, tablets, and mobile devices. Responsive design is now a standard practice.

5. Content Strategy: Ensure the content on the webpage is clear, concise, and meets the audience’s needs. Consider how to effectively present information so that users can easily understand.

6. Data Security and Privacy: If the webpage involves user data, ensure appropriate security measures for data collection, storage, and processing, while complying with privacy regulations.

7. Collaboration and Communication: Effective collaboration and communication among team members are key to success. Ensure there’s an efficient communication channel, and clarify each member’s responsibilities.

8. Project Management: Effective project management is crucial to ensure tasks are completed on time. Establish clear milestones and timelines, ensuring each team member understands their tasks and deadlines.

9. Technical Implementation: If the webpage involves technical aspects, ensure the team has sufficient technical knowledge to handle challenges such as front-end development, back-end integration, etc.

10. User Feedback and Testing: After the initial design, obtaining user feedback and conducting testing is critical. This helps identify potential issues and allows for necessary adjustments.

11. Budget and Resource Management: Consider the project’s budget and resource constraints. Ensure the team has adequate resources to complete the task while being mindful not to exceed the budget.

12. Change Management: During the project, there may be changes in requirements or design adjustments. Establish an effective change management process to ensure any changes undergo thorough discussion and approval.

Team’s division of labor

Student Name	Student ID	Task Description	Contribution
陈堃	832102218_21125261	Look for material	8%
汪郑贤	832102211_21124744	Look for material	8%
俞宇星	832102222_21125414	Blog essay	8%
邱韦翔	832102209_21125309	Blog essay	8%
邹亦捷	832102210_21126909	PPT	9%
温宗彦	832102228_21126895	PPT	9%
王心怡	832101201_21124477	Collaboration and Division of Labor & Modification	9%
林辰炜	832102220_21126496	Prototype Design	9%
吴正坤	832102208_21126917	Prototype Design	10%
袁成睿	832102223_21126348	Prototype Design	10%
方光贤	832102204_21125929	Defense	10%

Prototype Design

We use Mockplus for prototype design. It is a very excellent prototype and interaction design software. Its core advantage is that when it is necessary to show the interface jump logic and deduce the operation process, a considerable degree of fidelity prototype can be made clearly and quickly for the team to play with, and it has collaborative function and compatibility.

Process

1. Demand analysis: This is to make relevant functions and corresponding page design that meet the requirements when designing our software, and this task has been completed in the fourth assignment.
2. Look for materials: Prototype design is the first impression of the viewer to contact the web page, so its design style should be consistent with the overall page, the color collocation should conform to people’s visual habits, and coordinate with the overall tone of the page. Look for suitable materials for our software is important.
3. Prototype design: It is a platform for visitors to communicate with the web page, because it has a special position in the web page, so its design should follow certain principles. The first is simplicity, simplicity is to facilitate users to use, understand the content of the web page. The second is clear security, which refers to the information that intervenes in the system when the user makes a dangerous choice. Finally, it is flexible and user-friendly, which means that users can use it easily and quickly.
4. Test: This is to make the page design more popular, can better enhance the user experience. Our team first used the interface, and collected opinions for optimization, and strive to complete a better design.

Result

Solution plan

1. Goal and Audience Analysis:

   • Solution: Conduct thorough research on the target audience. Use surveys, interviews, or analytics tools to gather data. Regularly review and update goals based on user feedback.

2. User Experience Design:

   • Solution: Implement user testing to gather feedback on the design. Iterate based on user suggestions. Utilize wireframing and prototyping tools for early design validation.

3. Design Principles and Style Guidelines:

   • Solution: Create a comprehensive style guide that includes color schemes, typography, and iconography. Regularly review and update the style guide to maintain consistency.

4. Responsive Design:

   • Solution: Prioritize mobile-first design. Test the webpage on various devices and browsers to ensure responsiveness. Use frameworks like Bootstrap for efficient responsive design.

5. Content Strategy:

   • Solution: Develop a content plan outlining the type of content, tone, and messaging. Use clear and concise language. Implement user feedback to refine content strategy.

6. Data Security and Privacy:

   • Solution: Adhere to industry-standard security protocols. Encrypt sensitive data during transmission and storage. Regularly update security measures to address emerging threats.

7. Collaboration and Communication:

   • Solution: Actively communicate in wechat groups. Schedule regular team meetings and maintain open communication channels. Clearly define roles and responsibilities.

8. Project Management:

   • Solution: Break the project into manageable tasks with defined deadlines. Use project management software to track progress. Conduct regular check-ins to address challenges.

9. Technical Implementation:

   • Solution: Ensure team members have the necessary technical skills through training if required. Collaborate with experienced developers or seek external assistance for complex technical issues.

10. User Feedback and Testing:

    • Solution: Implement usability testing with real users. Use A/B testing to compare different design elements. Create a feedback loop for continuous improvement.

11. Budget and Resource Management:

    • Solution: Create a detailed budget plan with contingency. Prioritize tasks based on available resources. Consider open-source tools to reduce software licensing costs.

12. Change Management:

    • Solution: Establish a change control board to review and approve changes. Clearly document and communicate changes to the team. Assess the impact of changes on the timeline and budget.

Result assessment and achievement

In the subsequent results presentation, we will make an objective assessment of whether the above problems are solved

Problem	Whether Solved
Goal and Audience Analysis	Solved
User Experience Design	Solved
Design Principles and Style Guidelines	Solved
Responsive Design	Solved
Content Strategy	Solved
Data Security and Privacy	Solved
Collaboration and Communication	Solved
Project Management	Solved
Technical Implementation	Solved
User Feedback and Testing	Solved
Budget and Resource Management	Solved
Change Management	Solved

Achievement:

1. Prototype interface matches the requirements.
2. Provides a good user experience.
3. It is easy to operate.
4. It has an attractive design.

Result display

Prototype design vedio

Production process and log

In order to facilitate the process of recording the project, we use the form of log to present. By maintaining such a design log, we can track the entire design process, recording decisions, feedback, and improvement points to provide useful lessons for future projects.

[Week1] - Stage goal 1: task launch and objectives defined

Discussion:

The main objectives and expected results of the project are identified.
The expectations and aspirations of each member are shared.
Defines the target audience and their needs.
Determined the software for the Prototype Design (instant design)

Next steps:

Find inspiration individually, summarize and share design references.

[Week 2 (first 3 days)] - Session 2: Design reference sharing and preliminary ideas

Discussion:

Members shared the design references and inspirations they found.
Begin to form a preliminary design idea, discussing layout, color, font and other elements.
Next steps:

Create preliminary sketches with instant design tools that highlight key design elements.

[Week2(The last 4 days)] - Session 3: Preliminary design and user feedback

Discussion:

Members presented their preliminary design.
Initial feedback from team members was collected, with a particular focus on suggestions for user experience.
Next steps:

Collate the feedback and make any necessary adjustments.
Start thinking about the interactive details of your page.

[Week3(first 3 days)] - Session 4: Interaction Design and Technology implementation discussion

Discussion:

The interactive design of the page is discussed, including buttons, navigation, etc.
Technical members shared possible technical implementation issues.
Next steps:

In-depth study of technical problems and discussion of solutions.
Refine interaction design and create high-fidelity prototypes.

[Week3(last 4 days)] - Session 5: final design confirmation

Discussion:

Present the final design and ask for final comments from team members.And prepare the results for presentation