Sprint 1 - Team 2 Task Ticket 1: Design low/medium- fidelity prototype, with basic UI and UX

[wsxmr1234]

Description

Task: Design low/medium- fidelity prototype, with basic UI and UX. Feature: Achievement System

Design the layout and interaction methods of the achievement interface, draw prototypes and conduct user research, and further design according to the research results.

Dependencies

Milestones

• [x] Conduct background research and design low-fidelity prototypes (Aug. 23)
• [x] Conduct user surveys to get feedback (Aug. 25)
• [x] Based on feedback, do further research, modify and finalize the prototype. (Aug. 26)

Completion Deadline: Aug. 26

Documentation

• Low-fidelity-protoytpe

Member

• Minrui Xu (@wsxmr1234)
• Qicheng Chen (@Wayneecc)
• Xinkai Tang (@Kai9613)
• Zihao Xia (@zihao-xia)

[wsxmr1234]

Each of our team members researched the achievement system of existing games and found some essential elements of the achievement system interface. Usually each achievement has a title and a corresponding icon, and the icon is an abstract representation of the corresponding achievement information. In addition, achievements of different categories are usually displayed in different categories in the achievement system interface of existing games. In addition to these basic elements, the achievement interface in Overwatch also displays the achievement time and achievement rewards.

[wsxmr1234]

The figure below is the achievement interface of Genshin Impact. Usually mobile games display the achievement information in the form of a single column because of the small screen of the mobile phone. While computer monitors are usually much larger than mobile phone screens, there is more space to display content, so double-column is the more common form. So our achievement interface is also designed in the form of two columns.

[wsxmr1234]

This is my preliminary design of the achievement interface (low-fidelity prototype). For feasibility reasons, I didn't choose to display the achievement list as scrolling pages, as this might require more complex coding. Therefore, I chose to display it in the form of flipping pages. Pages can be turned by clicking the page up and down keys on the right side of the screen. Of course, you can also use the keyboard to turn pages.

[Wayneecc]

Another style of prototype:

Each cube with dark background colour is an achievement. Purple Eye Icon at the bottom is a "Button". When clicking this eye icon, there is a pop-ups to show the conditions for getting this achievement, or the details about this achievement.

We also designed 'Items Collection Achievement', this achievement is displayed as a list to show users how many game items they have discovered. Clicking each item also will appear the 'Details'.