High Fidelity Prototype Progress (IIIc) - Digital Share Media Surface

Progression (IIIc) - Classroom Status Display UI

Background of this idea

• When the author tidied up the IxD module material and found a picture...

• It was about many timetables, the status of the room, and help information that was physically placed on the door.

  
  

• Those timetables and information are outdated or too messy to read.

  
  

• When I attend local lectures, other classes of students do not figure out which classroom they should go to and keep “raiding” into our hall.

  
  

• They don't know whether the room's status is occupied because the door is a chunk of wood and metal, and there are no windows.

  
  

• Therefore, the author would like to integrate all that information and think from both users, and the design of “Classroom TimeSlot Screen” was born.

  
  

Implementation of Artefact (C)

• It is proposed that the screen be located outside and inside each classroom, showing the status and information of the room.

  
  

Colour Scheme

The colour scheme is referenced from the HKDI colour, grey, and the remaining colours are black.

Graphical Layout and the UX User flow

Artefact (C) UI/UX Use-case Flow

Mapped Explanation

Mapped layout in UI

Those statuses are also shaded into green, orange, yellow, and red, the traffic light colours used in some UX design concepts (Mulholland, B., 2016).

Main Page

• UI pages are mapped into sections, such as room status, which is divided into two parts:

  • the “status” 

  • and the “occupier or next section user”.

    
    

The room number and the interactable button are shown at the bottom of the screen, and the time and date are at the top. 

The interactable button icon served as a signifier and an affordance of a button for the user to press.

The “occupier” information, for example, the lecture Neko lesson, will be shaded in rio-red for his colour; lecture details will also be displayed on screen.

**A background booking page would be required to arrange the slots outside the project's scope.

Timetable page

• The timetable shows the slot of booked or reserved, and the colour is shaded in the user-preferred colour.

• For the past event, the system will shade in grey scale. Today's column will be highlighted with a signifier. 

The Support Page

• This page also displays the phone number of the supportive department and its status, like our physical door.

  
  
  
  

---

Demo Video (III) -- Classroom Status Display UI Video

---

Last Update

20 May 2025

Nelson LAN MS