Design
These screens were each created using the Figma diagramming tool.
All pages will have a navigation bar at the bottom of each screen. This navigation bar will display the current screen the user is on, along with two other screens on the left and right side. Users will be able to tap on the optional screens on the bottom of the page, or swipe to the left or right to navigate to these pages. Only "main" pages will displayed in this navigation bar, "subscreens" that fall under one of the main page categories will not be individually displayed.
We wanted our design to be both clean and modern, emphasizing simplicity and ease of use. Our color scheme is reflective of that since we went for a monochromatic color scheme, emphasizing a light blue color, with some neutral greys to add slight contrast when required. Anything marked in blue is generally an important item offering some significant functionality that we want to draw our users attention to.
There is no user interaction with this screen. It is just the loading screen the user will see while any given screen is rendering.
This is the screen where users can either sign in to their account or sign up if they do not currently have an account.
the user enters their username here
the user enters their password here
the user clicks this button to sign in once a valid username and password have been entered into the previous text boxes. An error message will pop up if invalid credentials are entered.
the user will click this button to take them to the create account screen.
the user will click this button to take them to the Google sign up page which will verify their google account and allow them to sign up through that.
This is the main feed where users will see posts from their friends and can scroll through each of those posts.
the user can scroll down to reveal more posts and can scroll back up to see posts they've already viewed
the user can click this button to take them to the Create Post screen
the user can click this button to take them to the Notifications screen
the user can click on the username on each post (highlighted in blue) to take them to that user's profile screen
the user can click on the image of the flexing muscle to 'react' to that post
the user can click on the image of the clapping hands to 'react' to that post
the user can click on the comment button to comment on that post
This screen will list each of a user's notifications such as when someone reacted to their post, commented on their post, or sent/accepted a friend request.
the user can click the arrow in the top left to be taken back to the home feed
if the number of notifications exceeds what can fit on one screen, the user can scroll down to view the rest of the notifications
This screen allows a user to create a workout post that they can share.
the user can click this button to take a photo that they can attach to their post
the user clicks this button to reveal a drop down arrow that gives them a list of different types of workouts to choose from. the options will range from things like weightlifting, running, yoga, boxing, mountain biking, etc.
the user can type a description of their workout such as times, splits, or other relevant details in this text box
once the user has entered the required information for their post, they simply click the post button to post it
the user can click this button to go back to the home feed screen
This screen allows a user to change key elements of their profile.
the user can click this button and they can either take or upload a profile picture to be displayed on their profile
if the user wishes to change their username, they can type in a new username in this box
if the user wishes to add to or change their bio, they can make those changes in this text box
the user can click this arrow to go back to the profile screen
This screen is where users can adjust their profile settings.
the user can click this button to change their profile status to private or public. Setting to private means that people can continue to use the app with no restriction, but
the user can click this arrow to go back to the profile screen
This is the screen where the user can interact with and view their own profile
This button will take the user to a separate page listing the people who follow the user.
This button will take the user to a separate page listing the people who the user follows.
The calendar on the profile page has smaller versions of their last 5 posted images, and clicking on it will take the user to their full calendar page.
The goals part of the profile will list out the users goals, and tapping on the edit goals button will take the user to the goals page in order to change their goals.
This screen is accessed from the main screen "profile" and will be where users can view, and edit their followers. It will include a search bar to allow ease of finding someone as well.
This will allow the user to search for specific people
This button will lead the user back to where they accessed the page from --> The profile page
This button will lead the user to the Following page
The user will be able to click on the profile picture, or username to view that person's profile
This will display a popup to confirm that the user wants to remove that person from their Following list
This screen is accessed from the main screen "profile" and will be where users can view, and edit who they follow.
This will allow the user to search for specific people
This button will lead the user back to where they accessed the page from --> The profile page
This button will lead the user to the Followers page
The user will be able to click on the profile picture, or username to view that person's profile
This will display a popup to confirm that the user wants to remove that person from their followers list
This screen is accessed from the main screen "profile" and will be where users can keep track of their goals in more detail, including editing their goals, deleting their goals, or adding new goals
This button will lead the user back to where they accessed the page from --> The profile page
This will create a popup where a user can add a new goal to their goals list
This will create a popup where a user can edit a previously entered goal (including deletion and marking as completed)
The calendar will show the users posted images from the last month, and can be swiped through to access other months besides the one the user is currently in. If the user clicks on one of the images on the calendar, the image will be enlarged and the user can then see their full post from that day.