Skip to content

User Interface Mockups and Storyboard Sequences

Raymond Sarinas edited this page Oct 18, 2019 · 7 revisions

UI Mockups

Mockup Image Description
LoginPage The login screen for Vybe users. They can either login or signup on this screen.
SignUpPage The sign up screen for new users. They can create a user account by entering a unique username and password.
YourVibes User is presented with their mood history as a list, showing all past vibes. On long hold. A user is presented with the option to edit or delete the vibe selected. If a vibe is selected, then the user view's that vibe's details. The user is also able to filter the list of their mood history by selecting an option from the filter button which will display a dropdown list to select filters from.
AddVibePage On add, user is able to add a new vibe and choose relevant details about their vibe, including emotional state (via selecting an emotional state emoticon by tapping on the blank face), Date/Time, and optional text or photographical reason, social situation, and location. The social situation is selected from a dropdown list.
ViewVibePage Clicking on one of their own vibes, a user can view the details of a vibe. The relevant information about their vibe is shown.
EditVibePage A user can edit one of their own vibes; they can change the relevant information pertaining to that vibe.
EmotionalStatePicker Dialogue picker that is displayed when a user is selecting an emotional state required to add or edit a vibe.
PersonalProfilePage A user can view their own profile, displaying their name and unique username. A logout button is also on the screen if a user wishes to log out of their account.
FollowingSocialPage Tapping on the social icon, by default, a user is shown the most recent vibes of the users they are permitted to follow. The vibes of the users they follow show who posted the vibe, and the associated emotional state of that user's most recent vibe.
RequestSocialPage Tapping on the Requests button, a user can see a list of other users who have requested to follow them. A user has the choice of accepting and allowing users to follow them, or rejecting their request.
PersonalMapPage Tapping on the map icon, a user can display their mood history on a map, associating vibes with locations if a location was added to said vibe.
SocialMapPage Tapping on the map icon via the social page, a user can display the most recent vibes of the users they follow on a map, similar to the personal map page.
SearchPageWithResults When users query for another user to follow, they are shown users with similar usernames, if any.
OtherUserProfilePage From the search page, if a user clicks on a user they wish to follow, they can view their name and unique username, as well as have the option to send a follow request to them.

Storyboard Sequence

Storyboard.v1

Clone this wiki locally