Skip to content

Part 2: UI Mockups and Storyboard

Majd Eissa edited this page Nov 8, 2024 · 15 revisions

UI Mockup

Entrant UI

Screenshot 2024-10-30 025831
The entrant profile screen shows all the personal information for an entrant and also allows them to create a facility and become an organizer as links to the screen to edit their information.



Screenshot 2024-10-30 025958
This screen allows entrants to edit their profile.



Screenshot 2024-10-30 030004
This screen allows users to scan QR codes for events, once scanned they will bring the entrant to the “join event” screen.



Screenshot 2024-10-30 030009
This screen shows entrants the information for an event they have signed up for and been chosen to attend.



Screenshot 2024-10-30 030013
This screen shows entrants the information for an event they have signed up for and have not been chosen to attend.



Screenshot 2024-10-30 030017
This screen shows events that a user has been waitlisted for.



Screenshot 2024-10-30 031252
This screen allows entrants to join an event, they can reach it by scanning a QR code.



Screenshot 2024-10-30 031256
When the “Accept invitation button is pressed”, the user is brought to the “Event Accept Description” and if the event is accepted, the button changes to “View”.



Screenshot 2024-10-30 031300
This screen allow entrants to review the event and accept an invitation after selected in the lottery to attend the event.

Organizer UI

Screenshot 2024-10-30 031550
This screen allows an organizer to view the profile of an entrant for one of their events.



Screenshot 2024-10-30 031513
The organizer profile screen shows all the personal information for an organizer as well as their facility info. It also links to the screen to edit their information. Additionally it allows the ability to navigate to an “entrants view” if they’d like to join events themselves.



Screenshot 2024-10-30 031516
This screen can be accessed from the edit button on the main organizer profile screen.



Screenshot 2024-10-30 031520
This screen allows organizers to create an event and add the data associated with it.



Screenshot 2024-10-30 031525
This screen provides a way for organizers to review the events they have made.



Screenshot 2024-10-30 031529
This is the list of all entrants that have signed up for an event but have not been selected.



Screenshot 2024-10-30 031534
This is the list of all entrants that have been selected

Status indicates whether the selected entrant has signed up for the event.



Screenshot 2024-10-30 031539
This allows an organizer to edit/view an event and do associated actions.



Screenshot 2024-10-30 031543
Displays a map view of the chosen event with pins corresponding to where an entrant scanned the QR code.

Clicking on pins will link to entrant’s profile.



Screenshot 2024-10-30 031547
This screen allows the organizer to create and send a push notification to groups of entrants being either cancelled entrants, entrants on the waiting list, or selected entrants.



Admin UI

Screenshot 2024-10-30 031946
This screen displays the starting screen if someone is given the admin role. The menu on the bottom allows them to navigate to the Events Browser, Images Browser, and the Entrants Browser



Screenshot 2024-10-30 031954
Displays a list of Events with a button to delete events

Clicking on an event will take the user to the Event Admin Page Description page



Screenshot 2024-10-30 031958
Displays List of Entrants with a button to remove entrants

Clicking an entrant will open the profile screen for that entrant

Clicking the bin will delete the entrant



Screenshot 2024-10-30 032001
Displays list of events with their poster images

Clicking the bin deletes the poster for that Event



Screenshot 2024-10-30 032005
Displays the chosen events name and description with options to delete the event, the QR code, or the facility



Screenshot 2024-10-30 032009
Displays the chosen entrants details and profile picture with the option to delete their profile

Storyboard

Image is a PNG therefore lossless and can be saved/opened for closer examination



Control-V

Clone this wiki locally