1 of 21

References

Academic use

2 of 21

Content, Users, Context of use

  • Content: App for an enrichment center, containing 4 pages – Home page, Programs, My Classes, Registration that helps users to browse, filter and search for classes, users can also view their payment status. Programs including music, art, and dance.
  • Users: Young adults aged 16 to 25 looking to register for classes to develop skills and pursue their interests and hobbies.
  • Context of use: Young adults using the app on their mobile phone to search and register for classes to attend.

Academic use

3 of 21

Inspirations – Home page

Academic use

4 of 21

Inspirations – Programs

Academic use

5 of 21

Inspirations – My Classes

Academic use

6 of 21

Inspirations – Registration

Academic use

7 of 21

Sitemap

1.0 Homepage

2.0 Programs

3.0 My Classes

4.0 Registration

2.1 Browse popular programs

2.3 Filter by Classes, Date, Time, and Price of the programs

2.2 Search for programs

3.2 Calendar view of upcoming classes

2.4 Register for the selected class

3.1 See registered classes

3.3 Cancel classes

4.1 Fill in personal details, e.g. name, email, phone number

4.2 Fill in payment details, e.g. name on card, card number, CVC number, expiry date

4.4 Success page showing class details

4.3 Confirm registration and payment

Homepage of the app

“Programs” page of the app and its content

“My Classes” page of the app and its content

“Registration” page of the app and its content

Academic use

8 of 21

Figma wireframe – URL

Academic use

9 of 21

Figma wireframe – screenshots

Academic use

10 of 21

UI design principles

  • I used the gestalt principle of Proximity by making the different programs and their respective details (date, time and price) closer together to show that they are related.
  • I used the gestalt principle of “Figure-ground” by making buttons a darker colour compared to the white background to ensure that the buttons always stand out from the background so that it is clearer for the user to see it.
  • I used the gestalt principle of “Continuation” by making the programs in the “Programs” page of the app in a path going down, so that the user will be guided and follow the path, stopping to read the details and to look at the images.

​

Academic use

11 of 21

UI design laws

  • I used Fitt’s law by making the buttons related to a function closer to it, e.g. the “Cancel Registration” button in the “Registration” page is closer to the program it is referring to.
  • I used Hick’s law by only including the necessary information and one choice in the registration process. The user only needs to decide whether to register for a class or not, thus reducing the time taken.

​

​

Academic use

12 of 21

Wireflow – Filtering for programs on Tuesday

Academic use

13 of 21

Wireflow – Checking registered classes schedule

Academic use

14 of 21

Wireflow – Viewing payment status

Academic use

15 of 21

Wireflow – Paying for registered classes

Academic use

16 of 21

Figma mock-up – URL

Academic use

17 of 21

Figma mock-up – screenshots

Academic use

18 of 21

Figma interactive prototype – URL

Academic use

19 of 21

UX interactions

  • The user can scroll down vertically on the “Programs” page to browse more classes.
  • When the user clicks on a filter on the “Programs” page, a drop down menu appears, which help save space and prevent clutter.
  • The user can click on other dates on the “My Classes” page to view their schedule on that day.

Academic use

20 of 21

Design patterns

  • Grid of equal on the “Programs” page

​

  • Module tabs on all pages

​

  • Categorisation of the classes available, by their date, time, price, and type of class

​

  • Carousell of classes on the “Programs” page
  • Event calendar on the “My Classes” page

Academic use

21 of 21

UI style guide

Academic use