Assignment5_Interface Prototype Design for THEMIS

Ⅰ. Introduction

Information table

The Link MY Class	The Link MY Class
The Link of Requirement of This Assignment	Fifth assignment-- Prototype design-CSDN社区
Team Name	THEMIS
The Aim of This Assignment	Interface prototype design
The link of interface prototype design	Interface prototype design
Other Reference Documents	Review form for our team in Tencent Docs PPT of Presentation

Background

Based on the handling of college students’ unused items and the collection of actual needs, we plan to build a fully functional, user-friendly, stable and reliable campus rental trading platform. In this blog will introduce our team how to work in a team, effectively completing tasks, and coordinating the work of team members and how to use professional prototyping tools such as Js Design to complete interface prototype design, and mastering the basic principles and methods of prototype design…

Ⅱ. Interface Prototype Introduction

Our team uses JS design prototype design tools. “JS design” is the first professional UI design tool in China. Based on traditional design tools, they have developed more efficient and user-friendly features tailored to the characteristics of Chinese design teams and work. They have also overcome platform limitations, allowing users to access the tool from any platform by simply opening a browser. It features collaboration, one-stop free access to design materials, automatic saving and backup, and cloud storage of file data. It is suitable for individual designers and small to medium-sized teams.

Here is a preview of the interface prototype：

It includes the login page, order page, publication page, category page, personal center page, shopping cart page, points mall page, open screen reminder page, chat page, evaluation page, product details page, Settings page, home page, search page and payment page.

Ⅲ. Key Points and Challenges Analysis

Key points

• 1.User Experience: The design should be user-centric, with a focus on providing a seamless and intuitive user experience. This involves understanding the target audience and their needs, preferences, and behaviors.

• 2.Team concept: The design should align with our team concept and values of the WeChat mini program. This includes using appropriate colors, fonts, and imagery that reflect the brand’s personality and tone.

• 3.Functionality: The design should be functional, with all necessary features and functions easily accessible and clearly labeled. This includes considering the placement of buttons, menus, and other elements to ensure they are easy to find and use.

• 4.Responsiveness: The design should be responsive, meaning it should adapt to different screen sizes and devices. This ensures that users can access the mini program on any device and have a consistent experience.

Challenges

• 1.Screen size limitations: Mini-programs are typically displayed on mobile screens, so designers need to consider different screen sizes and resolutions to ensure that the pages display properly on various devices.

• 2.Complexity of interaction design: Front-end pages of mini-programs may require handling complex interactions, such as user input, data loading, page navigation, etc. Designers need to consider how to make these interactions smooth, intuitive, and ensure a good user experience.

• 3.Data display and processing: Mini-programs often need to display a large amount of data. Designers need to consider how to effectively present this data and ensure page loading speed and performance.

• 4.Integration with backend interfaces: Front-end pages of mini-programs need to interact with backend interfaces for data exchange. Designers need to consider how to design page structures and data transmission methods to effectively integrate with backend interfaces.

• 5.Mini-program specifications and limitations: Mini-program platforms may have design specifications and limitations. Designers need to understand and adhere to these specifications to ensure that the design meets the requirements of the mini-program platform.

• 6.Collaboration between design and development: Designers need to collaborate closely with developers to ensure that the prototype design can be smoothly translated into implementable front-end pages. This requires good communication and collaboration.

Solutions

• 1. Screen size limitations: To address this, the design team can employ responsive design principles, ensuring that the interface adapts to different screen sizes. By using flexible layouts and scalable elements, they can ensure that the pages display properly on various devices. This challenge can be solved through thorough testing on different devices and resolutions to verify proper display.

• 2. Complexity of interaction design: Designers can simplify complex interactions by breaking them down into smaller, more manageable steps. Utilizing clear visual cues, providing helpful feedback, and streamlining user input processes can help make interactions more intuitive. Through user testing and iteration, the team can gain insights into user behavior and refine the design for a better user experience.

• 3. Data display and processing: Effective data visualization techniques, such as using charts, graphs, and summaries, can help present large amounts of data in a digestible format. Additionally, optimizing data loading processes and employing caching strategies can enhance page loading speed and performance. This challenge can be addressed through performance testing and refining the data presentation based on user feedback.

• 4. Integration with backend interfaces: Collaboration with backend developers is crucial to ensure seamless integration. Designers can create clear documentation on page structures and data requirements, and work closely with developers to understand the data exchange methods. Regular communication and alignment between the design and development teams are essential to address this challenge.

• 5. Mini-program specifications and limitations: Designers should thoroughly understand the specifications and limitations of the mini-program platform. By adhering to these guidelines from the outset, the team can proactively ensure that the design meets the platform’s requirements. Regular updates and communication with the platform’s documentation and development teams can help address any changes or updates in specifications.

• 6. Collaboration between design and development: Establishing a collaborative workflow and maintaining open communication channels between the design and development teams is crucial. Regular meetings, design handoffs, and feedback sessions can help ensure that the prototype design can be smoothly translated into implementable front-end pages. By fostering a collaborative environment, the team can enhance the implementation process and address any discrepancies early on.

Ⅳ. Process and Results of Prototype Design

1. Process of Prototype Design

In the first step, team members will conduct market research on mainstream rental and shopping software, understand their interface design and user interaction characteristics, and analyze and learn from them. This process helps the team understand industry trends and user habits, providing reference and inspiration for subsequent design work.

In the second step, the team will use JS Design tools to design the prototype interface for the small program. At this stage, team members will determine the design direction based on research results and team discussions, and carry out design work such as layout, color matching, and icon design. Team members will exchange opinions and continuously optimize and adjust the design plan until satisfactory results are achieved.

In the third step, the team will enhance user interaction by adding interactive elements and animation effects to improve the user experience of the small program. Team members will design corresponding interaction methods based on user behavior and operating habits, such as button clicks, page switching, and pull-down refresh, to ensure that users can use the small program smoothly and efficiently.

2. Results of Prototype Design

After going through the aforementioned process, the interface prototype design results would likely include a visually appealing and user-friendly layout with carefully chosen color schemes and icons. The interface will be designed to be intuitive and easy to navigate, with clear and concise elements to guide the user through the application. Additionally, the interactive elements and animation effects will be incorporated to enhance the overall user experience, ensuring smooth and efficient use of the small program. The design will reflect the team’s understanding of industry trends and user habits, aiming to provide a modern and engaging interface for the users.

During the process of collaborating on designing the prototype interface for the small program, the team shared a variety of feelings and evaluations of their teammates. Some team members expressed appreciation for their colleagues’ creativity and attention to detail, noting that their contributions greatly enhanced the overall quality of the design. Others were impressed by their teammates’ ability to effectively communicate and collaborate, which they felt was crucial in ensuring that the project progressed smoothly. There were also instances where team members expressed admiration for their colleagues’ problem-solving skills and willingness to take on additional responsibilities in order to meet deadlines. Overall, the team’s feelings and evaluations of their teammates were largely positive, with a strong sense of mutual respect and appreciation for each other’s contributions to the project.

Ⅴ. Project Division of Labor

Division of Labor and The Ratio of Workload in this assignment

Name	Member Division of Labor	Porkload proportion
Jie Huang	Participate in the interface prototype design discussion	2.75%
Hongming Chen	Blog information collection and creation	7.5%
Yuxiang Su	Participate in the interface prototype design discussion	2.75%
Daming Fu	Interface prototype design specification information collection	2.75%
Minghao Gao	Blog information collection and creation	7.5%
Jiayi Lu	Interface prototype design specification information collection	2.75%
Zhipeng Wang	PPT content production and page layout	8%
Weijie Hong	Participate in the requirements document discussion	2.75%
Yuxin Peng	Participate in the interface prototype design discussion	2.75%
Lin Bao	Participate in the interface prototype design discussion	2.75%
Siqi Lin	Interface prototype design specification information collection	2.75%
Zhaoqing Lin	Interface prototype design	15%
Xinyun Li	Interface prototype design	15%
Yuyang Hua	Interface prototype design	15%
Wenxuan Zhou	PPT content production and page layout + presentation	10%

Ⅵ. Summary

After completing this assignment, our team has learned a lot about teamwork and prototype design. Through division of labor, we were able to complete tasks more efficiently, and in the process of designing the prototype, we learned to use professional prototyping tools such as Js Design, MoDao, etc., which gave us a deeper understanding of prototype design.

In the process of writing the report, we learned how to express design concepts accurately and clearly, and when encountering difficulties, we also learned how to find solutions and gain growth. In addition, in the PPT presentation and team discussions, we learned how to effectively communicate and showcase team achievements.

Overall, through this assignment, we not only learned the knowledge and skills required by the course objectives but also improved our teamwork and communication skills. We will bring these experiences and gains into future projects to better address similar challenges.