UI Mockups
Overview
Loading Screen
Authentication Screen
Sign Up Screen
Home Screen
Map Screen
Add Mood Screen
Personal Mood History Screen
Profile Screen
Search User Screen
Settings Screen
Offline Screen
* Note: Red circles on taskbar will not be included in UI and are added to the diagram to provide clarity as to where user has selected to access this page
- Accessed from: User opening the app
- Details:
- Displays app logo and name on screen as user loads into the app upon opening
- Accessed from: User signing into the app (for the first time?)
- Details:
- Authentication provided by firebase
- Provides added security so people can sign in with their University of Alberta accounts
- Accessed from: User joining the app for the first time
- Details:
- Screen for user to add necessary app details when they are a new user
- User enters name (first and last), username (unique, will require it to be unique and not proceed until user enters a unique one, will show error message), and role in the app (either a student or staff since description mentions both)
- User Stories:
- US 03.01.01 : As a user, I want a profile with a unique username.
- US 03.02.01 : As a user, I want to be able to search for other users.
- US 03.03.01 : As a user, I want to view other users profile.
- Accessed from: User joining app (first screen they see)
- Details:
- Shows a list of mood events in reverse chronological order
- Has filter button in top corner to allow user to filter by:
- Most recent week, emotional state, and/or reason why (user filters by a specific word)
- User Stories:
- US 05.03.01 : As a participant, I want to view as a list the 3 most recent mood events of the participants I am granted to follow, sorted by date and time, in reverse chronological order (most recent coming first).
- US 05.04.01 : As a participant, I want to filter my mood following list to show only mood events that occurred in the most recent week.
- US 05.05.01 : As a participant, I want to filter my mood following the list to show only mood events with a particular emotional state.
- US 05.06.01 : As a participant, I want to filter my mood following list to show only mood events whose reason why text contains a given word.
- Accessed from: User selecting map icon on taskbar
- Details:
- Automatically shows all events within the last ???
- Filter button in top corner that allows user to filter based on:
- Mood type, location, and/or date and time
- Moods appear on the map as a colored dot (colors listed below in Add Mood Screen section)
- User Stories:
- US 06.02.01 : As a participant, I want to see a map of the mood events (showing their emotional states) from my filtered mood history list (that have locations).
- US 06.03.01 : As a participant, I want to see a map of the mood events (showing their emotional states and the username) from my filtered mood following list (that have locations).
- US 06.04.01 : As a participant, I want to see a map of the most recent mood event of every participant (showing their emotional states) if the event has a location and is within 5 km of my current location.
- Accessed from: User selecting plus icon from taskbar
- Details:
- Emotional state details:
- Anger (red, 😡)
- Confusion (orange, 🤨)
- Fear (purple, 😨)
- Disgust (green, 🤮)
- Happiness (yellow, 😀)
- Sadness (blue, 😢)
- Shame (grey, 😔)
- Surprise (pink, 😲)
- User is able to add a mood with the following details:
- Current date and time (required)
- Emotional state (one of the listed above, required)
- Trigger (optional)
- Social situation (alone, with one person, with two to several people, with a crowd, optional)
- Reason (required)
- Photograph (maximum 65536 bytes, required)
- Current location (optional)
- Emotional state details:
- User Stories:
- US 01.01.01 : As a participant, I want to add a mood event to my mood history, each event with the current date and time, a required emotional state, optional trigger, and optional social situation.
- US 01.02.01 : As a participant, I want the emotional states to include at least: anger, confusion, disgust, fear, happiness, sadness, shame, and surprise.
- US 01.03.01 : As a participant, I want consistent emoticons and colors to depict and distinguish the emotional states in any view.
- US 02.01.01 : As a participant, I want to express the reason why for a mood event using a brief textual explanation (no more than 20 characters or 3 words).
- US 02.02.01 : As a participant, I want to express the reason why for a mood event using a photograph.
- US 02.03.01 : As a system administrator, I want the storage for each photographic image to be under 65536 bytes.
- US 02.04.01 : As a participant, I want to specify the social situation for a mood event to be one of: alone, with one other person, with two to several people, or with a crowd.
- US 06.01.01 : As a participant, I want to optionally attach my current location to a mood event.
- Accessed from: User selecting storage icon from taskbar
- Details:
- Shows all mood histories of the user sorted in reverse chronological order (most recent coming first)
- User can filter by:
- Most recent week, emotional state, and/or reason why with a certain word
- User can click on a mood and:
- See all mood event details (as listed above in Add Mood Screen)
- Edit mood (with edit icon or swiping)
- Delete a mood (shows message "Are you sure you want to delete")
- User Stories:
- US 04.01.01 : As a participant, I want to view as a list my mood history, sorted by date and time, in reverse chronological order (most recent coming first).
- US 04.02.01 : As a participant, I want to filter my mood history list to show only mood events that occurred in the most recent week.
- US 04.03.01 : As a participant, I want to filter my mood history list to show only mood events with a particular emotional state.
- US 04.04.01 : As a participant, I want to filter my mood history list to show only mood events whose reason why text contains a given word.
- US 01.04.01 : As a participant, I want to view a given mood event and all its available details.
- US 01.05.01 : As a participant, I want to edit the details of a given mood event of mine.
- US 01.06.01 : As a participant, I want to delete a given mood event of mine.
- US 01.07.01 : As a participant, I want to be able to post private or public mood events. (Public events can seen by all participants, private mood events are for personal journaling)
- US 05.07.01: As a participant, I want to be able to comment on a specific mood event.
- US 05.07.02: As a participant, I want to view all comments on a given mood event
- Accessed from: User selecting profile icon from taskbar
- Details:
- User can view how their profile would look to others when they are searched and selected by another user
- This user perspective view allows them to select settings and access personal account settings
- User can view their followers, following, follow requests, and moods for today
- Also represents general profile format for all users
- User Stories:
- US 05.02.02: As a participant, I want to view all users who have requested to follow me.
- Accessed from: User selecting search icon on home page
- Details:
- Allows user to search up other users through their unique username
- User Stories:
- US 05.01.01 : As a participant, I want to ask another participant to follow their most recent mood event.
- US 05.02.01 : As a participant, I want to grant another participant permission to follow my most recent mood event.
- Accessed from: User selecting settings icon from profile
- Details:
- Allows user to edit profile picture, edit name, edit status, and delete account
- Accessed from: User joining with no internet connection
- Details:
- Appears when user joins the app without internet connection or loses connection while using the app
- User is still able to add, edit, or delete a mood and changes are synced when connected to internet again
- User Stories:
- US 07.01.01 : As a participant, I want to add, edit, or delete a mood event while offline, and have any of these changes synchronized once I get connectivity.