The client had the idea of an app to help people find workout partners based on several factors such as gym location, fitness level and intended results. This need within the market is currently fulfilled by a few apps, however none have had particularly great uptake by users due to bad user experience of expensive payment models. The client approached me in a startup capacity to help develop the user experience and initial designs for the app by conducting user research and producing a strong brand guide to help deliver the apps message.
There a many studies which show that training with someone else who has similar workout goals as yourself can lead to far greater results and less excuses not to go to the gym, compared to those who train alone.
Exercise partners provide a powerful combination of support, accountability, motivation and, in some cases, healthy competition. “They can play the role of teammate, co-coach and cheerleader — all while working out.” Michelle P. Maidenberg, PhD, MPH, clinical director of Westchester Group Works in Harrison, N.Y.
The graphs above show that people who worked out with a 'friend' were more likely to finish the exercise course fully and also maintain the weight loss after it ended.
Knowing there was a need based upon anecdotal evidence, a competitor study was undertaken alongside surveys centered around users' aspirations for an app that allows them to find people to workout with. It also help to discover our target audience and develop the personas based on these. All these factors would aid in the development of the brand and user experience.
In order to get a fair understanding of the competitors on the market, a short study was undertaken to view their best and worst reviews (removing any that feel they were written by the developers or paid for) and locate any areas in which users have strong views in. The apps reviewed were GymUp, FitFlick, Bvddy and Fitmatch.
GymUpApp is fairly sparse, pretty much a grid of user images on load up with no way of filtering based on gym, goals etc.
On clicking a user there is nothing there other than a self typed bio and contact details...To me this makes the app seem more like a generic dating app than a purpose built gym buddy finder.
Major security alert: the app exposes any members' personal email address. This is a major issue in terms of not only privacy but safety.
FitFlickApp functions like many dating apps with the swipe left/right method of selecting people. Personal trainers are marked via an icon so users know which ones they are, however there is no way of filtering them out and they could be made clearer.
You can set your workout preferences on first log in but after that you can't switch; and there is no other method of filtering other than location.
There does seem to be a rating system in place, which could indicate a way of telling if people are genuine or not.
Overall though, the app is a bit laggy, and a few bugs and hasn't had much of a take up by everyday users.
BvddyThe app has a clean modern look whilst also being fun and friendly. It uses the swipe methodology for saying yes or no to people. Filters include sports and distance, although the list of sports is predefined and somewhat narrow.
Users can contact other users without matching as well, although this could be open to abuse.
Users can set a small bio, location and level they feel they are currently at in order to help users make the best matches.
FitmatchThe app has more options and allows the user to set several activities they are interested in, and the level they are in them. However, on the profile view this is shown as a line scale with no context. The user can also set the times of day they work out, which is useful when finding someone to train with.
This app uses the grid system of displaying users and does allow for a small amount of filtering. An interesting feature however, is the gym location tab which allows users to search by who is closest to a specific gym. I guess the app designer believes people attend their nearest gym which is quite often not the case. And also they don't have every gym available in the list with some big chains missing.
Based on the surveys conducted the graph below shows the percentages of what the potential users regarded as the most important aspects of the app.
The graph indicates that the areas users thought most important were easy sign up and sign in alongside filterable information regarding another user's goals, local gym - all whilst regarding the users safety and having verified profiles.
It is likely the emphasis around safety and verified profiles is due to some female gym goers especially feeling that men stalk them, there is certainly enough anecdotal evidence to support this. In some cases this has even lead to women being murdered. With this in mind a key aspect of the app UX will be centered around ensuring the users safety and levels of privacy are maintained. An additional solution will be through verification to ensure profiles are true.
Having a stalker is one of the biggest reasons for people discontinuing their gym presence. Gym Insight - 5 Quirky Personalities You Are Likely to Encounter at the Gym
Another aspect which we asked users about was the method of finding matches. There are 2 main methods that have established themselves within the market; swiping and grid view. We were interested in finding which method the target users found most intuitive.
As the graph shows, swiping is the more intuitive matching method. There is evidence to suggest that the swipe gesture is a recognised and recalled action to users, giving them the power to approve or banish other users with a simple flick. Whilst this app is not a dating or hook up app, some of the functionality can be inspired by their successful user interactions in the forming of a gym friendship app.
Although swiping (a card) was already charged with meanings such as pay, charge, or open, in dating it now takes on the most elemental binary meaning of yes or no. The negating leftward swipe mimics the turning of a page (finished, done). By reinforcing this already coded motion, Tinder has successfully re-signified the swipe gesture to the extent that it is now often first associated with the app and the approval / disapproval binary. G. David & C. Cambre - Screened Intimacies: Tinder and the Swipe Logic
Technical apt. High
Devices Phone, Laptop
Monika has been at university a few months and has started to gain some weight. She wants to adopt a fitness lifestyle like she sees on instagram but feels unsure how to go about it. She has a gym membership but has only been a couple of times. #fitspo #transformationtuesday
Would like to meet someone who is looking for the same situation
Keep each other motivated
Take photos of each other for their instagram fitness accounts
Finding people to go to the gym with
Creepy guys sending unsolicited messages on meetup apps
Prevention of unsolicited messages
Seeking a Spotter
Technical apt. High
Devices Phone, Tablet, Laptop
Justin has been training for a few years, however recently he has hit a plateau and become demotivated due to lack of pushing himself. He trains early in the morning and his partner fears he is pushing himself too hard and without a spotter will cause himself injury. #trainhard #ironaddict
Find someone who can push him further
Meet another man
Doesn't want a gym 'bro'
State workout schedule
Make it easy to meet and contact
Technical apt. Low - Medium
Devices Phone, Desktop
Abigail has been told by her doctor that she needs to lose weight. She feels that she would be judged negatively by other gym members and be more confident if she had someone to work out with as she is a sociable person. She has no gym membership yet and is looking at where would be best for her. She is also open to PT sessions #weightlossjourney #dontbeafraid
Meet someone in similar situation
Find a gym
Doesn't want anyone young
Ambitious Personal Trainer
Occupation Personal Trainer
Technical apt. Medium - High
Devices Phone, Laptop
Patrick is a freelance personal trainer looking for new clients. He specialises in weight training and nutrition alongside competition prep. He works at multiple locations and has a busy schedule. #fitlife #personaltrainer
Advertise his services to the correct people
Gain new clients
Set up group sessions
State fees and packages
Confusion over when meeting clients
Clients in wrong areas
Based on the research conducted we were able to define what functionality the user would like in the app’s main features. In order to deliver a product with a clear message a minimum viable product was sought by categorising the stories into the project scope.
|Features||As a User I want to...||So that I can....|
|Sign up||Sign up using social sign in||Easily create an account|
|Sign up||Sign up using an email address||Sign up without using social media sign ins|
|Basic profile||Add my image to my profile||Show what I look like to other users|
|Basic profile||Add my rough location to my profile||Show other users the areas I train in vaguely|
|Basic profile||Add a bio to my profile||Describe myself|
|Basic profile||State my age||So that I can match with similar ages|
|Basic profile||State my gender||So that I can match with similar genders|
|Advanced profile||Set my types of activities||Find other users which share activities|
|Advanced profile||Add my workout schedule||Find users who workout when I do|
|Advanced profile||Set a specific gym||Find people who already go to the same gym as me|
|Browse/filter||Browse through other users||Find users to match with|
|Browse/filter||Filter other users||Find users which more accurately match with my goals|
|Match/reject||Match with specific users||Contact them about becoming gym buddies|
|Match/reject||Reject users that aren't suitable||Not be contacted by them|
|Block user||Block users who I don't want to be contacted by||Not be contacted by them further|
|View profiles||Read a users profile||See if they would be a suitable match|
|Settings||Have the ability to change my notification settings||Have options on how the app notifies me|
|Messaging||Send a matched user a message||See if I have repoire and then arrange a meet|
|Personal trainer||Create a personal trainer profile||Look for new clients|
Sketching & wireframing
Based off of the sitemap and user requirements I started planning out layouts for the main interface screens.
Low fidelity prototype
After the initial sketches I proceeded to implement a low fidelity prototype in Adobe XD. I kept colour scheme neutral for this point so as not to detract from the usability testing. Although the branding and tone of voice hadn't been decided at this point the initial low fidelity prototypes used a friendly, casual language as we felt this was the correct direction initially.
This prototype was clickable along main user journey routes with the intention of testing with users. We chose to ignore the personal trainer section at this point for MVP.
Guerilla testing was ran on an iPhone device allowing for a more realistic interaction scenario. We were looking at an pain points that the user came across, any suggestions they could make about the flow or options available.
Based on several users responses the major issues with the current setup are:
- Allowing any type of photo to be uploaded could lead to misrepresentation and fake accounts.
- Breaking the registration flow down in more steps but simpler forms elements would make the form flow quicker in more bite sized chunks.
- Onboarding explaining some of the benefits and basic use of the app.
- Removing the number of times someone trains a week as a criteria as it may prevent matches which could potentially encourage users to go to the gym more.
Future iterations of the design would include these ideas. However, since several of what is shown on these screens will be dictated by the branding and tone of voice this stage was considered next.
During our initial competitor evaluations we discovered that the original name - GymBuddy - that was chosen was being used by another app of a similar nature, albeit not currently available. As such we investigated other brand names in order to start our visual design production.
We started by developing a range of different names centered around the theme of the app including portmanteau and abstract links. Once we had this list we tested the names with users to discover the most understandable - in terms of app goal - and memorable - measuring ability to recall exact name. We also wanted the branding to be fresh and modern so enquired around these factors as well.
Based on the results it was a close running between Burn and Cohort, with Cohort being the preferred choice due to Burn's many uses with a range of products already.
Another aspect of this brand testing was to find out more about the user base and focus our target audience more; to this end taking the previous personas into mind we tried to determine the demographics of the users who would be more likely to actively interact with the app.
Our findings found that people who identify as female or other were more likely to positively engage with the app; especially those in the age ranges of 14-35 and 55-65+. As such the branding would be more focused on these demographics.
The ideas which stood out most were the calligraphic and modern geometric styles that had a more modern feel. I explored these logo avenues - creating both a calligraphic and geometric version for selection by the client.
The client felt that the geometric style was the best match for their brand and as such I produced the final version.
After a secondary round of testing with branding, the brand name didn't favour very well and as such we went back to branding to decide upon a more reflective brand name. The final idea was YUMI. The name not only is a portmanteau of 'You' and 'Me', but is also a female name meaning friend. We felt like this really summed up the ethos of the app and tested far better than any of the previous options.
We wanted to keep the colour palette in a similar fashion to the logo: fresh and modern, slightly feminine - without being cliché - and minimalist. As such we built upon a simple black and white palette with complimenting bright colours. These would then be used to accent elements, and in gradients to add visual appeal.
For the typography within the app we wanted to use a font family that shared the roundness of the logo. Round fonts also give the user of friendliness which was an important aspect of the apps ethos. As such, we chose the font family "Filson".
The first step in building a component library was to determine the elemental components the app would require. These were:
- Tab bar
- Text input
- Date selectors
- Yes / no selectors
- Gender selectors
- Workout time selector
- Value sliders
- Toggle switches
- Progress indicator
- User images
- Swipe buttons / elements
- Messaging controls
|Component name||Component design||Notes|
|Tab bar||This was placed along the top of the screen so as not to interfere with the users usual range of thumb motion during the swiping action.
Transitions will function in a side push method and the tab will respond in a fluid, organic animation.
|Buttons||There will be 2 main types of buttons used within the app, calls to action and progression buttons. The progression button animates to show if there are errors or confirms a positive and moves the user along their journey.|
|Text input||Text inputs will be kept fairly simple using a floating label, and providing feedback inline.|
|Date selectors||Within the app there is only 1 instance of a date selector and that is for date of birth selection. It was decided to go with a slightly different interaction than the standard iOS dte picker.|
|Yes / no selectors||A simple yes no selector in the style of modern radio buttons. By default they would be unselected to encourage the user to make the correct decision.|
|Gender selectors||This was a difficult element to design as the aim of the app was to be as inclusive as possible and therefore we had to find a way to allow for users who do not fall within the male / female genders, without also forcing them into a selector they feel doesn't represent them. This is especially important as a portion of the intended audience is Gen Z and based off of a report by J. Walter Thompson Innovation Group, "They see gender, sexuality and their own general identity as fluid or different from what was assigned at birth, while the world they interact with often forces them to 'make a decision'"; this is something we wished to avoid.
This would also be used in filter functionality so couldn't be bulky.
In the end due to the large number of recognised genders, we decided to break it down into asking the user their preferred pronouns, thus making an easier to interact with element.
|Workout time selector||In order to keep the selections filterable it was decided to split the day up into preselected sections rather than allowing users to set their own hour based times.
This was down in a similar way to the yes/no selectors but using iconography and labels to make it more interactive.
|Value sliders||The value slider is used to set the users competency in activities. The icon will change based on the current position.|
|Toggle switches||This will be used in the settings menu to toggle notification settings, options etc on and off.|
|Progress indicator||Instead of going down the route of a linear progress flow, it was decided to go down the route of a wheel like interface element where the user can choose the order filling in the form. As elements are completed in the lines towards the centre fill until completed. Once complete the user can move on to the rest of the app.|
|User images||In order to ensure a consistent look and feel through the app users are asked to upload simple head shots. Not only would this help with verification, it prevents users from uploading misleading photos or creating fake profiles. Images are turned into black and white automatically to prevent overload of colour on the users browsing view.|
|Swipe buttons / elements||A main element of the user interaction in the app is the swiping to match with users. As this is not a dating app we wanted to avoid the iconography usually associated with it to keep it more fitness buddy and less 'do I want to date this person'.
In order to do this we went with changing text overlays – negative being variations of 'No' such as 'Nah...' and 'Nope!'; positive swipes being variations of positive fitness type messages, for example 'It's time to grind' and 'Beast mode on!'.
|Messaging controls||The messaging aspects were kept as native as possible utilising the existing keyboards and message display methods.|
After developing the components for the progress page it became obvious that the existing sitemap was outdated. As such a new one was mapped out.
Splash and welcome screens
Sign in screens
Register - progress