Fifth assignment

Code_Crafters 团队账号 2023-11-11 11:19:13


  • Assignment description
  • Assignment analyzes
  • Team’s division of labor
  • Team Photo
  • Prototype Design
  • Process
  • Result
  • Solution plan
  • Result assessment and achievement
  • Result display
  • Production process and log

Assignment description

This assignment belongs to which course
Where this assignment is required
Team nameCode Crafters
The goal of this assignmentPrototype Design
The link of prototype
The link of presentation

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 NameStudent IDTask DescriptionContribution
陈堃832102218_21125261Look for material8%
汪郑贤832102211_21124744Look for material8%
俞宇星832102222_21125414Blog essay8%
邱韦翔832102209_21125309Blog essay8%
王心怡832101201_21124477Collaboration and Division of Labor & Modification9%
林辰炜832102220_21126496Prototype Design9%
吴正坤832102208_21126917Prototype Design10%
袁成睿832102223_21126348Prototype Design10%

Team Photo


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.


  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.


    Solution plan

  5. 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.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. Collaboration and Communication:

    • Solution: Actively communicate in wechat groups. Schedule regular team meetings and maintain open communication channels. Clearly define roles and responsibilities.
  12. 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.
  13. 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.
  14. 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.
  15. 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.
  16. 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



  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

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. "#left")
[Week1] - Stage goal 1: task launch and objectives defined


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


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


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


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


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

19 回复 打赏 收藏 转发到动态 举报



软件工程 高校 福建省·福州市
  • LinQF39
  • Jcandc
  • 助教-陈锦辉
  • 近7日
  • 近30日
  • 至今