UI Mockup and Storyboard - CMPUT301F24syzygy/syzygy-events GitHub Wiki
Our app comprises of three different activities: Entrant, Organizer, and Admin. A user can navigate between these activities by clicking on their profile icon in the top right corner. Each activity will be given a unique icon (The user profile for Entrant, the facility profile for Organizer, and a user for Admin), the button to access the menu will change to the active activity's icon.
In the presented menu, user will only see the activities that are available to them. Of default, all users can see the Entrant activity. Users can then create a facility (using the option in the menu) to get access to the Organizer activity. Additionally, users with hardcoded admin privileges will get access to the Admin activity.
| Only Entrant | Only Entrant and Organizer | Only Entrant and Admin | All Activities |
|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
To access the entrant activity, the user just needs to create an account. Any user with an account will have access to each tab within the Entrant activity under the users name.
To access the organization activity, the user must create a facility. To do this the user must click on their profile in the top right and then click on Add Facility. This will direct the user to the Create Facility tab.
Upon filling out the fields and clicking save, the user will be directed to the Organization Facility Profile. Their activity menu will then have the organization activity available under the facility's name.
To access the admin activity, the user must be given admin privileges by modifying the database directly. Once modified, the Admin activity will appear in the activity menu.
Each activity contains multiple different tabs which can be cycled through using the navigation bar at the bottom. These tabs will give access to different features available to that user category. The different tabs can be selected by tapping on the respective icon within the navigation bar or swiping left/right on the screen (this will transfer you to next icon in that direction cycling to the other beginning/end if there are no more icons). The navigation bar is present on every view that the user can navigate to excluding the Signup page on initialization and the Create Facility page.
![]() |
|---|
|
The user icon navigates to the user profile. Alongside the user's contact information and profile picture, this tab contains the ability for the user to edit their profile and profile image ![]()
|
|
The calendar icon navigates to the user's current events. This list displays all events that to which the user is enrolled, invited, or on the waitlist. Each list item will navigate the user to the respective event profile. ![]()
|
|
The QR icon navigates to a camera which can be used to scan QR codes. Upon scanning a QR, the user is directed to the event profile ![]() ![]()
|
|
The mail icon navigates to a list of all notifications sent to the user's account. Each notification is identified by the profile image of who or what sent the message, the date the message was sent, and the text on the message. The list will be ordered by sent time with each list item navigating to a full view of the notification on tap. ![]()
|
![]() |
|---|
|
The user icon navigates to the Facility Profile. Alongside the facility's location and information, this tab contains the ability for the user to edit the profile and profile image ![]()
|
|
The calendar icon navigates to the facility's events. This list displays all events that were created under this facility. Each list item will navigate the user to the respective event profile which contains all associated users and buttons to invite/remove/notify users. ![]() ![]()
|
|
The plus icon to the Create Event tab. This allows the user to create a new event under the facility ![]()
|
![]() |
|---|
|
The calendar icon navigates to all defined events in the database. Each list item will navigate the user to the respective event profile which contains a way to navigate to the corresponding facility and delete either. This list is ordered alphabetically and can be filtered by text like. ![]()
|
|
The group icon navigates to all defined user profiles in the database. Each list item will navigate the user to the respective user profile which contains a method to delete the profile. This list is ordered alphabetically and can be filtered by text like. ![]() ![]() If a user has a facility, the Facility link at the bottom of the profile will link to the facility page
|
|
The photo icon navigates to all defined images in the database. This list contains all profile icons for users and facilities along with all poster images for events. Each list item will display the location of the image (the user/facility/event icon and name) and on tap will display the image and a button to delete the image. This list is ordered alphabetically and can be filtered by text like. ![]()
|
When opening the app, the database will be querried for an account with a matching device ID. If found the, user will be brought to the Entrant User Profile and be signed into that account for the duration of the app.
If there is no associated account, the user will be brought to a signup page. This page includes all fields to create a new account. The user cannot navigate to any other page until they have created an account.
Once signed-up, the user will be directed to the Entrant User Profile where they can then navigate to other activities and tabs.
All views, excluding those that can be directly navigated to from the navigation bar, will contain a back button in the top left corner. This button will redirect the user to the previous view that they were on before they reached the current view. The back button will not undo any changes (including removing a user from an event or deleting a profile) but it will not save any unsaved changes (including modifying a profile without hitting the save button at the bottom).
All changes will be automatically applied to the database. For changes that need to be saved (like profile editing or creation), the database will be updated upon save. All items (events, facilities, images, notifications, user profiles) will be updated automatically when the database is modified and all changes will be reflected on the app immediately; all lists of items will automatically reflect the changes too. In the case of overlapping modifications (e.g. a user open the Edit Profile tab, the profile is then changed in the database, then the user saves their changes on the tab), the modification which occurs last will be taken.

Click here to access the editable version of the figma. This version contains the proposed Storyboard and layout of the project. Actions are defined between buttons, so use actions to see how navigation occurs between different layouts. All content is contained in the "No Login" file.
For the non-editable version, Click here. Navigate between flows to view with/without admin.
















