Buddy-Up
Interaction Design
Figure 1: Part one of the sign-up process for Buddy Up
When users first open the app, they are presented with the options to sign up or to log in. The sign-up process is as follows. First, users enter either a phone number or email to identify their account. There is also a form field for entering a password for later authentication. Then, users enter their name, age, and sex before proceeding to select which activities they are interested in, as well as their goals for using the app. As the app is fitness oriented, users will have different goals, as observed through the results from survey and the scenarios built from those results. From the survey, respondents were asked why they go to the gym and the answers were varied, ranging from strength training, to bodybuilding, to weight loss, to lifestyle improvement. The scenarios also take these into account where each person represented in the scenario have different goals of why they would want to use the gym or participate in physical activities. To ensure that users can find matches that are suited for them and share common interests, they are also able to choose what their hobbies are outside of the gym, which can serve as conversation starters to talking to a match for the first time.
Figure 2: Part two of the sign-up process for Buddy Up
Since our user research showed a large discrepancy in user’s experience levels with the gym, we have added a question to which will help users know what level of experience a potential partner is at. Users may also select what gym equipment they’re familiar with to give a better idea of how much they may know.
To allow users to know what a potential buddy looks like, all users are asked to upload at least one photo of themselves. This will hopefully provide users with extra safety, as they will know who to look for when meeting a partner in-person. Next, users are asked to choose a gym using a map based on their location. Based on the results of the questionnaire, 88% of respondents were not willing to go past 10 miles for a gym. Thus, it’s important that users can choose a gym that they frequent near them or if they are a new gym goer, they have the option to choose a place that is near their current location.
Figure 3: The Home page and a user's profile
Once the user has registered or logged in, they are presented with the homepage, which shows other potential users they could buddy up with. Each profile card has the summarized version of the information that user provided upon sign up: their first name, age, an image of themselves, their home gym, a list of physical activities they enjoy, and a list of goals for being on the app, and their experience level.
If a user is interested in seeing all of the other user’s profile information, they can tap anywhere on the profile card, excluding the ‘x’ and checkmark buttons, to see a more detailed view.
In our scenarios, each persona has a different set of goals that they want to achieve through using the app. One wants to participate in yoga classes with someone while another is interested in finding someone who could show them the basics of the gym. Having those goals and activities listed on the user’s profile allows them to find matches that are better suited for them more efficiently. Our user research suggested that most would prefer a partner who had similar interests and hobbies to them, so this display should help them identify any commonalities.
Figure 4: Finding a match, messaging them, and viewing their full profile
Of course, this is of little matter if a user is unable to express interest in someone. The checkmark and ‘x’ buttons on the profile cards take care of this. Tapping the checkmark will indicate your interest in someone. If they’ve check marked you as well, or end up doing so, you (or the other user in the latter case) will be given the option to message that person. Tapping the profile picture or name of the person in messages will bring you to their profile page.
Messaging is an important feature as it allows users to communicate directly. This helps them gain familiarity with one another and facilitates more detailed planning for the users. For instance, one of our personas has a very busy life. Her schedule may change often, thus creating the need for quick and direct communication with her partner.
Figure 5: Rejecting the first option, finding a match with the next option, messaging them, and viewing their profile
Hitting the ‘x’ button will remove that profile card from the home page feed. You can always find more users to match with.
Figure 6: The menu when the hamburger menu icon is clicked
Navigation can be done quickly using the menu above. This menu is hidden behind a hamburger menu icon that can be accessed when a user is logged into the app. The user has several ways to get to their profile from here. The user’s picture, the ‘Your Profile’ button, and the ‘Edit Profile’ button will all take the user to their profile page. Their information and gym location can be changed from there. The other buttons will take the user to the specified page. Should one need to exit the menu, the ‘x’ button in the top right will close it.
Figure 7: Expanded options for the menu
In Figure 7, we can see some of the different pages that the menu allows users to navigate to. Various settings, the user profile, messages, informational pages, and the home page can be accessed from this menu. There is also an option to logout if a user desires.
Figure 8: Editing user profile with warning and confirmation windows
On the user’s own profile page, they can view and edit their details. This is useful as it allows users to reflect any changes in their needs. For example, perhaps our college student persona lands a summer internship in a city a few states over, but she still wants to keep up on her exercise. She’ll need a way to change her gym location to reflect this. Maybe our persona who is going to the gym to make some lifestyle improvements and lose weight finds that he loves strength training. He’ll be able to edit his activities and goals to reflect his newfound interest. He can also update his experience levels and gym equipment skills if he so chooses.
For some error tolerance, we’ve included a confirmation modal that will notify the user if they are discarding any unsaved changes.
Figure 9: The login screen and the first part of the password reset process
Users that already have an account can select the login option on the greeting page of the app. They’ll be prompted to enter the phone number or email used for their account, as well as the corresponding password.
Should the user forget their password, they have the option to tap the ‘Forgot password’ link, which will ask for the account phone number or email. A verification code will be sent to either the phone or email, at which point they can reset their password.
Figure 10: The final part of the password reset process
After entering a new password and confirming it, the user will be given feedback on the success of the password reset. Then they can click the ‘Login’ button to return to the login screen and enter their new information. The back button on this page also redirects to the login.