Assignment5_Software Engineering_Prototype Design

---

1 Project Division of labor (Table)

Student ID	Name	Work Description	Contribution
832102212	张钦（QIN ZHANG）	1.Coordination links between project programmes 2.UI design 3.Blog writing 4.Information search and collation (interview with seniors and siblings, understanding of knowledge related to studying abroad at home and abroad, document integration) 5.Report writing 6.Preparation of defence materials 7.Demand analysis document writing	13%
832102227	彭厚铭（HOUMING PENG）	1.Collecting information and consolidating it 2.Information Questionnaire Formulation 3.Report writing	6%
832101223	胡佳辰（JIACHEN HU）	1.Collecting information and consolidating it 2.Preparation of defence materials	9%
832101221	易立（LI YI）	1.Collecting information and consolidating it 2.Preparation of defence materials	9%
832102221	赵攀（PAN ZHAO）	1.Gather information and integrate it 2.Information collection form production 3.Report writing 4.Preparation of defence materials 5.Requirements analysis document writing	6%
832102213	张嘉扬（JIAYANG ZHANG）	1.Learning to understand the technical requirements of the project, such as: mkdocs, github pages, git, markdown 2.Front-end beautification (add plug-ins, etc.) 3.Forum/discussion forum construction, posting construction	9%
832102214	陈正罡（ZHENGGANG CHEN）	1.Learning to understand the technical requirements of the project, such as: mkdocs, github pages, git, markdown 2.Add, modify data and related content (populate the project, from content to web page pages) 3.Forum/discussion forum construction, posting construction	11%
832102215	陈宇恒（YUHENG CHEN）	1.Learning to understand the technical requirements of the project, such as: mkdocs, github pages, git, markdown 2.Front-end beautification (add plug-ins, etc.) 3.Forum/discussion forum construction, posting construction 4.Server migration to domestic	9%
832102219	陈敬华（JINGHUA CHEN）	1. Learn to understand the technical requirements of the project, such as: mkdocs, github pages, git, markdown 2.Forum/discussion forum construction, posting construction 3.Server migration to domestic	9%
832102205	尹相斌（XIANGBIN YIN）	1.Learning to understand the technical requirements of the project, such as: mkdocs, github pages, git, markdown 2.Add and modify data and related content (populate projects, from content to web pages) 3.Server migration to China 4.Docking with publicity team and product manager (project requirements, UI design, etc.)	9%
832102206	刘译祺（YIQI LIU）	1.Learning to understand the technical requirements of the project, such as: mkdocs, github pages, git, markdown 2.Add and modify data and related content (populate projects, from content to web pages) 3.Server migration to China 4.Docking with publicity team and product manager (project requirements, UI design, etc.)	10%

2 Project Division of labor (Detail)

2.1 Development Team/Code Team

Chen Zhengang (also help with information collection)
Liu Yiqi (also interface with the publicity group; communicate with the product manager in time)
Yin Xiangbin (also interface with the publicity group; communicate with the product manager in time)
Zhang Jiayang
Chen Yuheng
Chen Jinghua

2.1.1 Mainly responsible for the Tasks

1. Learning to understand the technical requirements of the project, such as: mkdocs, github pages, git, markdown
2. Front-end beautification (add plug-ins, etc.)
3. Add, modify data and related content (fill in the project content → page)
4. The construction of the forum , looking for similar open source projects
5. Data below the discussion forum , the construction of the comment area
6. Migrate the server to domestic
7. Forum user login interface design and production
8. Looking for new components, new features

2.2 Product Manager

Zhang Qin

2.2.1 Mainly responsible for Tasks

1. Web page art layout, design
2. Contact with seniors, collect information

Overseas study board:

TOEFL, IELTS learning experience sharing, such as, tips, text chicken soup, learning resources recommended and so on. (in the essence is not in many, specialised but not mixed)

Notes on studying abroad, which can be related to the study experience and life experience of each country.

The board of further studies within the country:

Graduate school and exemption, such as, how to maintain a high GPA during the university, competition and research awards experience sharing.

Participation in the summer camp process experience sharing.

Examination experience sharing, such as, time schedule, tips, chicken soup, learning resources recommended.

3. Responsible for leading the development of the project product positioning, including product (website) page requirements, functional requirements, development management and so on.
4. Lead the promotion and defence of the final project
5. if possible - pull sponsorship

2.3 Publicity Group

Zhang Qin
Zhao Pan
Peng Houming
Yi Li
Hu Jiachen

2.3.1 Main Responsible Tasks

1. Report writing, during the defence material preparation (PPT), final defence material preparation (PPT)
2. Blog writing
3. Project requirements analysis document writing
4. Rating form production, information collection form production
5. All kinds of text data editing and integration

3 Project Diary

Week5

1. The project manager completes the project UI design and packages the UI components into a zip package for the front-end engineers.
2. Front-end engineers create web pages according to the project manager’s UI design prototype.
3. The back-end engineers continue to study and learn about the back-end database.
4. The publicity team completes the writing of the blog and the production of the defence PPT.

4 Collaboration method of project members

1. The project manager searches for UI prototyping materials on the Internet and the ink knife to complete the UI design of the project webpage.
2. The project manager communicates with the front-end engineer and packs the UI component images into a compressed package and sends it to the front-end.
3. Front-end engineers create web pages and write code according to the project manager’s UI design prototype.
4. The back-end engineers continue to study and learn about the back-end database.
5. The publicity team collaborates to complete the writing of the blog and the production of the defence PPT.

5 The process of completing a prototype

Step1: Sketch

• Tools:
  Paper, iPad, Word
• Complete the process:
  Draw boxes with outlines for placeholder boxes to represent images, text and graphics
• Stage Objective:
  Draw conversions about design requirements and layout
• Role Description:
  Sketching is the quickest, least expensive, and most convenient way to kick off UI design. It gets the conceptualised and most important ideas listed out of your mind and visualised on your paper or screen.
• Design results:

Night mode

Day mode

Step2: Drawing the wireframe

• Tools:
  Pen, iPad, Mocking bot
• Complete the process:
  Complete the design and drawing of lines and boxes
  Perform colour filling
  Fill in actual text
  Add placeholder images or stock images

*Our group used existing wireframes and UI kits in design software to complete

• Stage Objective:
  Complete the general layout of the visualisation
  Establish the correct scale of graphics and text
  Quickly create initial ideas and low-fidelity prototypes
• Role Description:
  Wireframes are low-fidelity presentations of product designs that have three simple, direct, and clear goals: presenting the main information clusters, outlining the structure and layout, and the main visualisation and description of the user interaction interface, under the removal of all visual design details.
• Design results:
  The first step of our team project was carried out at the same time as the second step, and the results of the plotting have been shown in the first step．

Step3: Component Design

• Tools:
  Mocking bot
• Complete the process:
  Add user interface components (e.g. tables, lists, cards, forms, typography, colours, etc.)
  Add symbols (buttons, badges)
  Setting component states (hover state, click state)
  Write to add actual text (font, font size, line spacing, word spacing, etc.)
• Stage Objective:
  Identify and resolve usability issues.
  Identify accessibility and responsiveness issues.
  Translate ideas into consistent elements that can be shared with developers, increasing team efficiency and facilitating more accurate team discussions and sharing.
• Role Description:
  UI components are a set of user interface design elements that convey meaning to the user and provide functionality to the user. The greatest value of the UI component library is to improve the efficiency of the entire team’s production and research, so that the design quality can be guaranteed while improving the overall user experience of the product.

Step4: User Flow Chart

• Tools:
  Word
• Complete the process:
  Export the picture, import the picture into word using flowchart formation to complete the user flowchart
  Draw wireframes, flow charts, line flow, arrows and jump conditions
• Stage Objective:
  Display navigation routes
  Check for missing status and information
  Visualise entry, presence and decision points in the user journey
• Role Description:
  Considers how users jump from one interface to another. A user flowchart is specific to the design of interface functionality, and it provides an initial representation of the jumping relationships in a page. When the user clicks on a function, what subsequent actions and pages are triggered? User flow chart can give the answer, it is to help you tell the completion of the user and product interaction story carrier.
• User flow chart display:

Step5: High Fidelity Design

• Tools:
  Word
• Complete the process:
  Accurately show everything that is going to be in the final product
• Stage Objective:
  Create perfect detailing
  Create visual design consistency
  Add a splash of colour to our project
  Select final design resources
  The most effective way for all team members to understand the user experience
• Role Description:
  This step aims to refine the UI graphics, copy and various visual design effects to achieve a high fidelity design. During this phase, our team made every pixel as perfect as possible and also added unique thematic elements.
• Design results:

Day mode:

Night mode:

Step6: Prototyping

• Tools:
  Mocking bot
• Complete the process:
  High fidelity design for all screens
  Goal points to mimic what users look like when interacting with real things
• Stage Objective:
  Link all screens and processes together in a simulated environment
  Conduct testing to ensure the site is working well and developing as expected
  Great user experience, easy to use, beautiful design
• Role Description:
  The prototyping phase will link everything that works together and show the final look and interactive behaviour of the product.
• Design results:

Day mode:

Night mode:

6 Team Photo Showcase

Team members are working hard:

7 UI Design Feeling and Team Evaluation

7.1 UI Design Feelings

7.1.1 Catching the source of inspiration

Inspiration is everything for designers, without inspiration even the best topic can not design good works and for inspiration is from all aspects, whether it is books or films or TV series or other aspects of life design works.

It comes from all aspects, whether it’s books or films or TV series or other aspects of life.

All of them can be used as a source of inspiration, constantly discovering the beautiful side of new things and then bursting their works with a new sense of beauty is also a strengths of the designer’s.

7.1.2 Doing summarise

Summarising can help us to reflect on the existing design thinking process, companies that attach importance to design will generally have weekly summaries of regular meetings and sharing.

This is a good way to reflect and summarise according to the existing products, when there is a new demand, we can also understand the business requirements very well and quickly, according to the previous way of reflecting and summarising, adding their own new thinking, continuous improvement, and do a better.

7.2 Learning Mindset

1. Understand the mentality, you can’t learn what you need to learn.
2. Teaching mentality, then learning can be used to change the status quo.
3. The mentality of teaching, then broadcast the seeds of wisdom, breeding a stronger force.

7.3 Learning Steps

1. Initial understanding, establish concepts
2. Repeat the learning, and more importantly, learn what you can’t do
3. Begin to use, theory and practice, practice is the only standard for testing the truth
4. Integration, co-ordinate the whole situation

8 Team Evaluation

The team members of the publicity group cooperated with each other to complete the UI design, and at the same time wrote a blog as well as a PPT (interface prototype design report) for the defence.

9 Implementation of the team’s plan during execution

The team members were well organised during the implementation of the plan and completed the required tasks on time, efficiently and meticulously. The project tasks were completed well and all materials were prepared properly. Successful completion of the web UI design for the project.

10 Key points and challenges

10.1 Key Points

1. Need to follow the steps of UI design, step by step
2. User flowchart design is required
3. High fidelity modelling done using Mocking bot

10.2 Challenge

1. Progression of skills from sketching to using UI drawing software (learning to use Mocking bot).
2. Finding drawing resources on the Internet.
3. Finding illustrations, design framing materials and so on.

11 Prototype Design

• Tools:
  Mocking bot
• Complete the process:
  High fidelity design for all screens
  Goal points to mimic what users look like when interacting with real things
• Stage Objective:
  Link all screens and processes together in a simulated environment
  Conduct testing to ensure the site is working well and developing as expected
  Great user experience, easy to use, beautiful design
• Role Description:
  The prototyping phase will link everything that works together and show the final look and interactive behaviour of the product.
• Design results:

Day mode:

Night mode:

12 Introduction to Button Controls

Picture Example:

Introduction:

Return to home page:
Located in the upper left corner of the page, clicking this button on any page will immediately jump back to the top page. This symbol resembles an open book, and is related to the manuals in the Leapfrog Handbook, so clicking on it will take you back to the top page.

---

Switch night mode on/off:
Located at the top right corner of the page, click to switch between day mode and night mode. Clicking on the small moon means switching to night mode, and clicking on the small sun means switching to day mode.

---

List of columns:
The list column (first level header) is placed at the top of the web page and is quick and easy for users to select the content they want to view and experience. Users have the option of clicking on the columns to be redirected to the corresponding page and display the content.

---

Forum:
Go to the Free Discussion Resource Sharing page to post comments.

Discussion board display:

---

Online Communication:
Located in the bottom right corner within the Free Comments section, click to open an online chat box with the project developer. Users are able to use this feature to get in touch with the project developer for advice or chat.

Chatbox Display:

---

Search box:
Users can enter content here and then click the magnifying glass or click the Enter key to search for relevant content within the site.

---

Project open source repository:
Located in the lower right corner of the page and the upper right corner , click to be able to enter the project Github open source repository.

---

Developer’s personal website:
Located in the bottom right corner of the page, click on New Web Page to go to the project developer page.

---

MkDocs button:
Located in the bottom left corner of the page, clicking on it will take you to the official MkDocs website.

---

13 Difficulties encountered

1. Our team faced many difficulties in designing the framework of the web page, we did not understand how to arrange the layout of the buttons and controls.
2. And we also faced many challenges in choosing the colour scheme, we didn’t understand which colours are eye catching, nice to look at, and can give people a comfortable feeling, not easy to produce visual fatigue.
3. In the material selection, we tend to be more difficult to decide, it is also difficult to quickly find the right material and use him, because our project UI design goals and objectives is simple and beautiful, do not need too much fancy. Can be user-friendly, simple and easy to operate, interface simplicity, partial with academic is the goal of our project UI design.

14 The Solution

When our team encountered difficulties, we used figma, inkblade and other UI drawing software to access their massive template repository and learnt how to refer to what others had done and how to arrange the button controls.

Similarly, we still refer to other people’s UI works to learn the colour scheme of the UI interface of the project website, and how to make the visual effect of the website the best.

At the same time, we also use the Internet to find the relevant image materials we need for our project, use PS snapshot technology to get the materials we need, and then import the materials into our UI design software.

15 Solution Process and Result

We found a large number of templates through the above solutions and extracted a few templates that overlapped with our team’s project UI design concepts and used them appropriately. We solved the problem of the layout of the buttons, controls and block diagrams, as well as the problem of the choice of colour scheme.

Finally, our team used PS and other retouching software as well as the Internet to find a lot of materials related to the team’s project, download them and import them into our UI design software to complete our UI design work, solving the problem of lack of design resources and materials.

In the end, we obtained the following results: a simple and reasonable layout pattern of buttons, controls and block diagrams, a huge amount of materials for the Flying Leap manual, and a comfortable colour scheme for the webpage.

16 Final results exhibition

Day mode:

Night mode:

17 Links

Project UI presentation: https://fzu-fly.online/

*need VPN

Project-related files: https://download.csdn.net/download/FZU_Flying_Club/88521750

Interface prototype design review form (Tencent online document):

https://docs.qq.com/sheet/DYVpoZml2ckh5dE5t?tab=BB08J2&scode=