Design Practice

Hench, the Gym Application

Josh Dance

Semester 1 Project

DM7903

Abstract:

"Hench” is a gym app that combines social media with fitness. It was created to emulate the social aspects of going to the gym and bring the gym community online into one space, whilst also allowing the user to track their gym workouts and progress. The app allows you to record and then post your workout to your friends, who can view, like and comment on your workout.

Wordcount:4526

Click on the buttons below to take you to the content section.

Initial Ideas

Design Process

Gym App Specification

Sporting Apps Background Research

Future Considerations

Conclusion

References

Initial Ideas

Initially, I had two ideas for my project of a gym app and a dating app. However, after pitching both ideas to the class and from the feedback I received, I agreed that the gym app was the better idea.

I got the idea to do this gym app after taking inspiration from Strava, the popular running app. Strava brings the running community online, by allowing them to post their runs and view, and like and comment on their friends running, cycling, and swimming activities. That’s when I noticed there was a gap in the market and there wasn’t such an app that did the same for gym users. Almost every runner has Strava, but there’s no app that the huge market of gym users all have.

One of my favourite things about going to the gym regularly is meeting up with friends and seeing the same gym users daily. Not only does the gym keep me physically and mentally fit, but it also is a part of my social life, and I wished there was an app that emulated that.

Go to Table of Contents

Design Process

For both of my projects, I have adopted the Design Thinking process as defined by Chicago Architecture Centre. It identifies the following 5 steps in the design process.

Masengarb, J., Chicago Architecture Centre (2022[online])

1. Identify the problem and understand the people you’re designing for

2. Collect information on the problem and learn how others may have solved something similar

3. Brainstorm and analyse your ideas

4. Develop a solution that you could test out and get feedback on

5. Improve your original idea

Masengarb, J., Chicago Architecture Centre (2022[online])

This process seems to fit the way I want to develop this project. I identified the key tasks I would do for each of the stages in the design process and recorded the outcome of each stage. This is summarized below:

Stage 1: Identify the problem and understand the people you’re designing for

I will be designing this app for use by gym users. I am a very keen user of the gym myself and am enthusiastic about this project. I feel I have a lot of real experience to bring to this project. I understand how the gym community works. I also believe there is a niche in the market for a well-designed gym app which records your workouts in detail, as well as creating a social online community for gym users.

Stage 2: Collect information on the problem and learn how others may have solved something similar

I intend to take a close look at the competitors in the market of gym apps. I will research each app, recording my likes and dislikes about each one.

For UX/UI research, I will interview some gym users and ask them if they would use a gym app.

Stage 3: Brainstorm and analyse your ideas

I plan to create a mind map and brainstorm my ideas for the gym app, noting all the features I would like to include.

Stage 4: Develop a solution that you could test out and get feedback on

I will initially design my gym app by sketching the wireframing of the design. I will then use Figma to produce some detailed high-fidelity wireframes.

For some feedback on my gym app, I will discuss the designs with my lecturer.

Stage 5: Improve your original idea

I would then consider the feedback and use further research to improve and refine the gym app. I would look at what improvements I can make and the marketing for the gym app.

Go to Table of Contents

Gym App Specification

The gym app I am designing will need to run on a mobile phone. It will need to record workouts for the different muscle groups and keep track of personal records. There will also be a social aspect of the app so users will be able to connect with friends, join groups and post their workouts.

The app must be simple to use and operate. Screens must be designed with accessibility in mind so that all users are able to use the app. It should include some privacy features.

Brainstorming

I brainstormed the gym app idea using a mind map, trying to include all the features I think a successful gym app should have.

This mind map made it clear to me that the app should include the following:

Allow you to record and post workouts.
Can follow friends views, like and comment on their workouts.
Unlock trophies for accomplishing challenges such as “Gym every day for a month”
Different exercises are categorised by different muscle groups and type of workout.
Sends you notifications so you don’t forget to record workouts

Applications like Strava are so successful because they are easy to use and most of the functions are automated with very little user engagement.

Therefore, the gym app must

be simple to use and intuitive
automate recording of activities because If it’s too time consuming to record then users won’t use the app.
ensure that the user data is only shared with those who are allowed access

Initial visual design

My plan is that the style of the app is very visually similar to Instagram and Strava in terms of how the feed looks.

I also need to make sure that my app is accessible to users with disabilities by following these 6 steps

Design a clear layout
Create a consistent navigation
Design for colour blindness
The right font type and size
Combine audio and visual materials
Test app with real users

(Kogitas, 2021[online])

The font I use for the app design should be clear and easy to read.

Inder is a low contrast workhorse sans serif text face design. It was inspired by German art noveau style lettering and the Amsterdam School of architecture.

I will also include an audio feature for visual impairment.

Go to Table of Contents

Sporting Apps Background Research

The first thing I needed to establish was if gym users would use this app. I asked many regular gym users what they thought of the gym app idea and the feedback was positive. I was also interested to know if non gym users would use this app if they decided to start going to the gym, and the feedback was also positive. One person did mention that they would feel insecure posting publicly how much weight they were lifting. However, I will add a privacy setting to keep progress private or share with select users.

My next step was to research other similar Apps.

Garmin Connect for Weight Training

I am a regular user of Garmin.

Strong

I used ‘Strong ‘ for a week to test out the app.

Strava

Strava is a fitness app aimed at the running, cycling and swimming market. Although not a gym app, I am reviewing it as it has many great features, and it is the market leader for its key sports. I am a regular user of Strava.

Go to Table of Contents

UX/UI Research

To conduct user experience research, I interviewed 2 people. Marcus (22M), who goes to the gym 6 times a week and Chloe (20F), who has just started going to gym. Both of these people are the apps target audience.

Interview with Marcus

Have you used any apps to track your gym progress?

“I used to use the app “Strong” but I forgot about it. I stopped using it and wasn’t motivated to record my progress and instead used my notes app to record progress

Would you be more motivated to use the app I am designing?

Yeah, I think I would be, being able to see my friends’ workouts and they see mine and being able to support or compete with my friends would motivate me more to record my workouts on the app as long as it was simple and easy to do.

Would you consider going to the gym as part of your social life?

While I was at Uni, it was a massive part of my social life. Going to the gym daily I would see my friends and have a catch up and laugh. Now that I’ve graduated and am currently living at home, I go to the gym with my brother.

What social media apps do you use, and do you enjoy using them?

Instagram and Snapchat are the main apps I use regularly. I guess that’s part of my social life.

As a regular gym user do you see any problems with my design?

Most people tend to go on their phones between sets, but I don’t. Maybe a watch would work better?

Interview with Chloe

Have you used any apps to track your gym progress?

No, I haven’t but I would be interested in using your app

Would you consider going to the gym as part of your social life?

Idk if I’d say social life, but I do go with my friends most of the time

What social media apps do you use, and do you enjoy using them?

Instagram, Snapchat and Twitter mostly. Instagram I am pretty addicted too, I like seeing what everyone else is up to as well as the validation that comes from likes. Snapchat, I use a lot to keep in contact with my friends.

Are there any problems you see my app or anything that would put you off using it?

Not that I can think of. At first, I thought I could be a bit self-conscious of friends seeing my workouts and progress photos, but now I know you can keep it private; I don’t see any issues.

Go to Table of Contents

Project Planning

Action plan

To design this app there was a series of tasks I needed to undertake which I listed here in my action plan

I created a Gantt Chart in Excel at the start of the project to enable me to plan out the high-level tasks which I needed to complete each week. I ensured I left plenty of time in the last few weeks to work on the report and for contingency

I also used Trello for a detailed list of things to do. The visual nature of Trello and that it was easy and quick to use, made it an ideal for me to track the lower-level tasks I need to complete each week. I could also move tasks between different weeks, If I decided that it would make sense to change the order.

A weekly todo list produced using Trello

Go to Table of Contents

Gym App Branding

The first step was to think of a name for the app, as the name is extremely important. My initial thought was “Strong”, only then to find that was the name of a competitor app. I was inspired by the American running app Strava, whose name is Swedish for “To strive”. I tried finding a gym related word like “Push”, which was my working title, that translated into another language and would sound inspiring like “Strava”.

I researched how brands decided upon their name and was interested that Nike named itself after the Greek God of victory. If you look at the statues of Greek Gods, they are incredibly muscular, and Greece is also where the Olympics originated. I considered naming the app “Cratos” after the Greek God of strength. However, I didn’t think the name suited. I researched ancient stories of strength and considered naming the app after one of these stories, but none of them had the right sound.

I also initially thought the name “Gym Bro” was a good choice, but after consideration decided it didn’t have the right appeal.

The bar press image shows the shape of an H, and therefore I decided to explore names beginning with H. I came up with the name ‘Hench’ which means big, strong and muscular. I felt this name suited the app and it had the right sound to it.

Go to Table of Contents

App Design

I would like the app to be visually like Instagram and Strava in terms of the User Interface.

The colour design of the app

Most fitness apps as shown in the diagram below use a red and orange colour scheme as these colours give the impression of energy and activity. However, I would like Hench to be different and stand out, and not be like the competition.

MobileAction(2020)[online]

Colour psychology is the emotional effect colours have on people. The colour emotion guide gives green as peaceful, growth and health well-being, and grey as balance and calm. I therefore have chosen green to be the primary colour of the app, and grey as the secondary colour. Grey is also the colour commonly used in gyms.

Go to Table of Contents

Logo design

I was inspired by the very simplistic design of the Strava and Strong logos

Strong and Strava Logo

I brainstormed some ideas for a logo

To design the logo, I sketched some ideas. I wanted the logo to represent what the app was about in a visual image. The image that represented this to me was someone being spotted (supported), whilst bench pressing.

The reason this image represents the app is because to bench press you need someone to help you, so you don’t get stuck under the weight. The person helping can either be a friend, a “gym bro`” or often a complete stranger in the gym, who is happy to help and encourage the bench presser. This encompasses the idea of my app - an app that captures the social side of the gym with friends and strangers all encouraging and helping each other’s gym progress.

Therefore, using the logos I sketched, I designed a logo in Figma. The logo represents a spotter helping a bench presser. It is also the shape of a “H”, which stands for the name of the app “Hench”.

Go to Table of Contents

App Wireframing

My initial sketches of the layout

Figma and first attempts at wire framing

I chose to use Figma for the wireframing because it’s a free design tool and easy to use. I had never used Figma before. Therefore, I watched some tutorials on YouTube to understand how to use the software. This is my initial attempts at wireframing whilst planning how the app will work.

Go to Table of Contents

Prototype of the Gym App

After discussion with my lecturer about the initial wireframing designs, I made improvements to the diagrams based on the suggestions made.

Now that I have decided on the basic design of the app and how it will work, I then created the high-fidelity (hi-fi) wire frames in Figma. These contain an increased level of detail and show how I would expect the app to look.

1. Creating an account scenario

Logo appears on a black screen, while the app loads, to create a stronger brand identity.

Ability to create a unique username to identify the user.

Confirmation code – Security to ensure that the account is a real person, and the account belongs to the email used to sign up.

2. Start Workout scenario

I chose to have “Start Workout” at the top of the first page of the app so that it is quick and easy for the user to start using the app.

To further make the workout out as easy as possible to record, I have the option of different muscle groups under the “Start Workout” button. Therefore, if the user was only doing a chest workout, they would select the “Chest” button which would only show them chest workouts.

“Saved workouts” is a feature designed to make recording workouts easy. This feature shows a preselected routine. I do the same 3-day routine of Chest and Triceps, Back and Biceps and then Shoulders and Legs. Therefore, by saving these workouts, I can select the pre-saved workout I require. This saves me the time of having to search through all the exercises again and check how many sets I’m doing.

I wanted the app to have a very simplistic design so that it is easy to use.

Selecting “Start Workout” displays the workout page. The workout will be timed and there will be the ability to write notes about the workout.

The “Add exercise” button will list exercises to add.

A drop-down menu will allow selection of sets, weight and reps.

The plus button will allow a copy of the previous set to save the user time.

The tick button will confirm completion of that set and the buttons will turn green instead of grey.

The icons on the bottom toolbar of the app will always be visible and give quick links to other pages.

Once the user clicks ‘Add exercise’, a list of exercises will be displayed alphabetically. Alternatively, the option to select the “Muscle” button can be selected which will then sort the exercises via muscle group. The “Type” button will sort exercises by the type of workout. Once the user has selected an exercise, they will have the option to read a description of the exercise and view a video showing the correct form. Selecting an exercise will also give the user the option to see their recent history of that exercise and their PB’s.

Most gym users use their phone between sets. The app will send notifications throughout the workout. The user can choose how many notifications and how often they are sent.

The notification will allow the user to type the weight and number of reps, without having to unlock their phone and use the app.

3. Posting Workout scenario

Once the user has finished the workout, they will press the “Finish workout” button.

The workout can be given a title and some notes added about the workout. A summary of the workout will be shown along with any PBs achieved.

Pressing “Post workout’ causes the workout to be posted to the “Feed” page.

4. Feed Section

Posting will show a summary of the workout and whether the user hit a new PB. The post will show the date, length of workout and the users notes. There will be the option to save the workout and view the full workout.

The user will also be able to post progress photos.

There is a button to upload, delete, like, comment and share posts.

5. Follow and following requests and notifications scenario

The “Feed” section of the app shows follow requests and notifications such as likes and comments. A search for other users via the icons at the top of the page can also be made here.

6. The "You" section

The trophy button will show what trophies the user has achieved by completing challenges.

The user will be able to keep track of who they follow and their followers.

The “My activities” button will show the user a feed of only their activities.

The “My PB’s” button will enable the user to search for a workout and select it to show PB’s and history of the workout, as shown earlier.

The “MY Progress” section shows the progress per exercise and improvements. Plus, bodyweight gains and losses can be logged.

Progress photos can be viewed, allowing comparisons with previous photos.

7. Groups section

The groups section will allow the user to search and join public or private groups as well as taking part in challenges.

8. Settings section

The setting section will allow users to choose the following:

Allow the app to send notifications.

Set the account to public or private.

Change password,

Turn on text to speech to make the app accessible to users with visual impairments.

Block accounts

Delete account - this will send an email confirmation for the user to confirm.

Sign out.

Go to Table of Contents

User Testing

In order to test the gym app I came up with the idea to create a flow process of all of the paths in the app. (user flows) By going through this exercise, I was able to determine if I had missed anything, or if there were any dead ends.

Here are my sketches of the test procedure for the flow process.

Go to Table of Contents

App Marketing

Product

The product is an app which records your gym progress, while bringing the social side aspects of the gym into one space online.

Place

The product will be available through the available app store on the user’s smartphone.

People

The main demographics of the app, will be so called “Gym rats” who go to the gym at least 5 times a week, as well as gym newbies and regulars.

Price

The app will be free to use but will generate revenue through adverts in the feed.

Process

The app can be downloaded through the available app store on the user’s phone, where they can then log in or create an account

Promotion

Promotion: Hench will use above the line promotion, advertising the app using gym influencers such as CBUM and Joey Swoll who heavily influence the gym community. Additionally, promoting the app could be through social media campaigns using sites such as TikTok and Instagram. Billboards outside popular and famous gyms such as “Golds Gym” and using below the line promotion such as leaflets in gyms could also be used to promote the app.

App SWOT analysis

Go to Table of Contents

Reflection

I did not fully understand the scope of the project from the beginning of term and got off to a slow start. This meant that I had limited time to finish the project or make further enhancements. I also spent longer on some sections than I should have done. However, I have learnt new skills and have enjoyed creating this app. I was really excited about this project because I am an avid gym user and I hope I have created a dedicated and useful app which will appeal to gym users.

Future Considerations

A great way to improve this app would be to design an interface accessible for a digital watch in the same way Garmin watches automatically upload to Strava and Garmin Connect. Users could easily record their work out on a smart watch and then post their workout, all from their watch. It would save time and make the app more appealing to users who don’t use their phone in the gym

Go to Table of Contents

Conclusion

This project was to design a protype of an app. I decided to develop a gym app which I called ‘Hench’. The project took me through the design process to the eventual creation of the prototype.

Hench” is an app that combines social media with fitness apps. It was created to emulate the social aspects of going to the gym and bring the gym community online into one space, whilst also allowing the user to track their gym workouts and progress. The app allows a user to record and then post workouts to friends, who can view, like and comment on the workout.

The project allowed me to explore how the gym community functions and thus design the app to suit the current market of committed gym users. I was also able to research the competition. From my own experience of using the gym regularly, I have incorporated the features which are lacking in the competitor apps. I also concentrated on producing a simplistic design which is quick and easy to use.

Go to Table of Contents