/
Social Timetabling UI

Social Timetabling UI

High Fidelity

https://www.figma.com/file/JxoleUSjUz9eD3FC9DHAP9/Notangles-UI-v.2?node-id=0%3A1

Low Fidelity

V1. Friend list on the left:

Clicking on the expand icon in the middle of the friend bar will expand it to the right.

V2. Friend list on the top:

Clicking on the expand icon in the middle of the friend bar will expand it downwards.

The below draft shows the friend list in expanded mode. You can hover someone’s icon for their name?

Un-expanded mode would look like this. If this is an accessibility issue (tech-boomers not knowing what the expanding button is for), we can have the friend list (top ver.) to stay permanently expanded (however the top bar (navbar + friend list) will look thick).

This is what it might look like when you have no friends .

This is what it might look like when you’re not logged in.

The colour of the profile drop down won’t stay as grey. The frame’s purpose is to show how the current settings, privacy and change log will go under the drop down as well.

When clicking onto a friend’s timetable, you will be able to see their profile picture, name, zID, degree and subjects for the current/upcoming term?

V1. Modal

Clicking the add friends icon will pop up a modal, where it will explain the purpose of adding or invite friends to Notangles (i.e. to view their timetables or for collaborative timetabling).

V2. Small box

Clicking the add friends icon will pop up a small box above it where you can then input the zID (without explaining why adding/inviting friends is good; or could just explain when hovering over the icon?).

Related content