GAINS
WORKOUT APP Samuel Fu Jared Knapp Tiffany Soohoo 1
Table of Contents
ProblemS Objectives Solution Competition Apps user scenarios Experience maps Ideation Features of the app First pop prototype Version 1 - Visual Design Version 1 - Style Guide Version 1 - wireframe user testing Directions for user testing user testing analysis & solution storyboard Scenarios ios guidelines flow diagram Inspiration Final Wireframe final visual design Final style guide In context photos
3 4 5 6 7 8-10 11 12 13 14 15 16 17 18 19 20-21 22-24 25 26-27 28 29-31 32 33 2
Problems with other Fitness Apps:
-Not aesthetically pleasing -Do not meet the needs of the user -Trying to do too much (ex: connect with friends) -Too complex to navigate 3
Objectives: -User Friendly -Aesthetically Designed -Works with iOS -Personal Health -Tracks Workouts -Pinpoints Weaknesses -Shows Progress -Customizable 4
Solution Creating an APP that focuses on Personalized workouts for weightlifting that makes it easy for the user to keep track of
5
Problems with competitor apps
Body Space -Hard to find information needed -Too social oriented -Interface is too complicated -Information is lost in the app
Fitness Buddy -Too simple -Completely lacks information -Confusing interface -No in app tracking feature
iMUSCLE 2 -Difficult to find information -Provides too much information once found -App is not originally for working out -More medically oriented
6
User Scenarios The Daily Workout Users The Daily Workout Users go to the gym regularly and workout because they like it.
The Weight loss Users The weight loss users go workout because they want to loose weight and be healthy.
The body builder Users The body builder users spend most of their time at the gym to keep improving and getting stronger. 7
LOW AXIETY
HIGH AXIETY
The Daily Workout Users
GO TO GYM
ENTER GYM
CHECK PROGRESS
GETS STARTED
FIRST EXERCISE
RECORD DATA
CHECK NEXT EXERCISE
CONTINUES
8
LOW AXIETY
HIGH AXIETY
The WEight loss Users
GO TO ENTER CHECK GETS FIRST RECORD CONTINUES FINISH CHECK LEAVE GYM GYM GYM PROGRESS STARTED EXERCISE DATA BODYWEIGHT PROGRESS
9
LOW AXIETY
HIGH AXIETY
The body builder Users
GO TO ENTER GETS FIRST RECORD GYM GYM STARTED EXERCISE DATA
CHECK CONTINUES FINISH TAKE TAKE CHECK NEXT WORKOUT SELFIE PROTEIN OVERALL EXERCISE GRAPHS 10
Ideation
Created multiple different flow charts of how the app would work and figured out which information was important for the app 11
Use a calender to keep track of the different workouts for each day
Graph that show the progress of the different body weight and cardio workouts
Can take pictures and show the pictures Graph that shows your bodyweight progress
12
First POP Prototype
This version of our prototype was quick. We wanted to make sure that our app made sense and all the paths worked together. The prototype also made it easier to make sure that all three of us understood how the app would be used.
13
Visual Design V.1
The first version of the visual design featured orange and gray. We used this version of the visual design to test our users so that they could understand what the functions of the app. We wanted to stick with the typeface Helvetica Neue because that is one of the typefaces of iOS. We wanted to keep the visual design simple for the users.
Overview
Overview
Body weight
Settings
Progress Pictures
S
4
+ weight
Calender
Overview
cardio
Body Weight
weight
Calender
Photos
Overview
M
5
T
Settings
Calendar
6
W
7
T F Oct.
S
1
2
3
8
9
10
11 12 13
14 15
16
17
18 19 20
21
22
23
24
25 26
28
29
30
31
27
cardio
Body Weight
Photos
Calender
Overview
Body Weight
Photos
+
+ Dumbells
Bicep
45
Overview
weight
Body Weight
cardio
Photos
Calender
+
Overview
Body Weight
Photos
+
Dumbells
Workout Distance
+
Tricept
Calender
Time
Muscle Group
weight
cardio
+
Workout Distance Time Calender
Overview
Body Weight
Photos
Calender
Overview
Body Weight
Photos Calender
Overview
Body Weight
Photos
14
Visual Design V.1 Style Guide Mood/Style
Color Palette
Energetic Sporty Clean Fun Happy Motivated
Logo Typography
icons
Helvetica Neue Light ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()_+{}[]:”<>?;’,./
15
Auxer Wireframe
This is the initial wireframe that we made on auxer. We created it, to help us understand the different paths. This also helped us to make sure that each path made sense and was able to connect and loop back with each other. We want an app that is easy for the users to use. The wireframe also showed the different paths that a user could take and we wanted to make sure all of them worked.
16
User Testing
We tested three different users who all have three different workouts and schedules. We wanted to see the different ways that this app could be used. We used the first visual design in POP to create the prototype. Our goal was to give the user testers the closest experience with the app as we could with the information we had on how we wanted to make the app. The users gave advice but also responded positively to the app.
Gabby Lucivero | 7:30 p.m.
JiangFen Chen | 6:00 p.m.
Zack Lord | 6:00 A.M
17
Steps Users Took
These are the steps that we wanted the user to take while using the prototype of our app. We wanted each of the users to take the same steps so that we are able to acurately analysis and make conclusions based on what each user did. We made sure all the user testers did this so that they all did the same steps and did them in the same order.
Explore the app for 1 minute
Figure out your overall weight lifting progress
What muscle groups are planned for the 12th?
What are the exercises planned for those muscles?
Get to the graph that shows you the cardio progress
Go back to the main screen
Show me your physical body weight progress Show me how to take a selfie 18
User Testing Analysis and Solutions Analysis -Fast Paced Maneuver through the App -Confused about spelling mistake and focused on that -Tricept (no T at the end) -After a minute, pretty clear on how the app works -Wished there were more options (constrained by Pop) -Required explaining for adding exercises -Enjoyed idea and found it useful for people who workout -App was user friendly that there was not much explanation of the App -Wanted a simpler visual design of the app -Confused why it tracks both cardio and weightlifting
Solutions -Fixed visual design to match the iOS standards -Fixed spelling errors to make sure that users would not get distracted -Re-designed the icons -Created more options -got rid of cardio to only focus on weightlifting
19
Storyboard Scenario 1
Heading to the gym to begin workout.
Enters Gym at 6:00 A.m.
Uses the opliticals for his legs.
Looks at Gainz app to checkout the workout for the day. Learns that he needs to do both leg and back workouts.
Uses rowing machine for his back. 20
Storyboard Scenario 2
Heading to the gym to begin workout.
Enters the Gym at around 8:00 A.m.
Sets up the machine.
Next workout is tricep Pull ups.
Record progress and check next workout.
Uses the cable files for his chest workout.
21
iOS GUIDELINES Clear font- Text is legible at every size Apple used the Helvetica Neue family of typefaces to provide a beautiful, consistent typographic voice and reading experience across all platforms. Negative space makes important content and functionality more noticeable and easier to understand. Borderless buttons-borderless button uses context, color, and a call-to-action title to indicate interactivity Simple graphic layout that provides friendly experience Camera layout- simple to comprehend icons to allow the manipulation through the camera interface Photo gallery slide- Showing three images with hierarchy to allow the user to view one image and know which image is previous or next in the gallery order Calendar- iOS Calendar is a uniformed minimal graphical template that allows users to view with ease at all sizes and maneuver its interface smoothly List- iOS listing uses negative space, type hierarchy, and simple provided icons to allow for maximum usability. It allows users to understand how to use its service without instruction iOS provides a lot of small icons that are user friendly and easy to comprehend such as the add button and the back chevron Use terminology that youâ&#x20AC;&#x2122;re sure your users understand. 22
iOS GUIDELINES Navigation and Tab bar- Bars contain contextual information that tells users where they are and controls that help users navigate or initiate actions. A navigation bar enables navigation through an information hierarchy and, optionally, management of screen contents. The status bar displays important information about the device and the current environment. Use a navigation bar to give users an easy way to traverse a hierarchy of data. Use a tab bar to display several peer categories of content or functionality Themed colors- highlights important state information and subtly indicates interactivity. It also gives an app a consistent visual theme. A key color gives users a strong visual indicator of interactivity, especially in apps that donâ&#x20AC;&#x2122;t use an abundance of other colors. Donâ&#x20AC;&#x2122;t let color distract users. Unless color is essential to your appâ&#x20AC;&#x2122;s purpose, it usually works well to use color as a subtle enhancement Pay attention to color contrast in different contexts.
23
iOS GUIDELINES Get as much information as possible from other sources. If you can use any of the information people supply in built-in app or device settings, query the system for these values; donâ&#x20AC;&#x2122;t ask people to enter them again. Graphs from health app allow maximum provided information without cluttering page with information Users should always know where they are in your app and how to get to their next destination. The back button uses several cues to indicate its interactivity and convey its function: It appears in response to navigation, it displays a back-pointing chevron, it typically uses a key color, and it can display a title that describes the previous screen.
24
Flow Diagram
The flow diagram shows the different paths that the app can take. The app is made up of four main paths. The main paths are Calendar, Overview, Body Weight and Photos. Each of these tracks a different part of the workout progress. We included all four because we believed that it gave a distinct workout and the user will be able to customize their workout to that path.
Gains App
Calendar
Overview
Body weight
Photos
Workouts
Weight graph
Body weight Graph
Picture Progress
Add workouts
Camera
Exercises
Add Exercises 25
Inspiration
As we created the final visual design, we were inspired by the Facebook Messenger App. The Facebook Messenger app uses one accent colors and different grays and whites. We based our design off of this app because it is easily understandable and users will not have to learn different command. The navigation and tab bar are used as the main navigation in both apps.
Simple back button with accent color
List different things with a simple gray line to break it up
Used the â&#x20AC;&#x153;+â&#x20AC;? sign to add more
Simple navigation bar with one accent color
26
Inspiration
As we created the final visual design, we were inspired by the iOS Health App because of the clean aesthetic and how it follows the iOS guidelines. We used gradient graphs to show both the Overview and the Body Weight. The gradient graphs gives the app more color besides the orange and is also aesthetically pleasing.
Based our workout and overview graphs on these
27
Final Auxer Wireframe
This is the final auxer wireframe of our app. We changed the Overview to only graph weight lifting. We took out cardio graph and decided to only focus our app on weight lifting. We also added another path in the photo section. Now the user can go from the picture gallery of progress to the camera so that it is easier for the user to take a picture.
28
Final Visual Design
These are the final visual designs for the schedule path of the app. The schedule is the way that tracks what day it is and what workouts the user needs to do. This is the place where the user is able to add any workouts or exercises and is able to fully customize the app. We based the design off of iOS apps to make the app user friendly. The app keeps all the specific information on the specific user. This makes it easier for see improvements.
29
Final Visual Design
These are the final visual designs for the Overview, Body Weight and Photos section of the app. The Overview and Body Weight both shave graphs that showcase the progress of each. Just incase people do not want to visually see their progress, we included the weight they are or lifted and their improvement or difference in numbers. This helps show a numerical value to their progress. We decided to take out the cardio option in the Overview. We felt that it was best for the app to only focus on weight lifting because both variables were hard to measure together. For the photos we have a photo gallery. The user can swipe across to see all the different photos. Users can also add photos to the photo progress by taking pictures with the built in camera.
30
31
Final Visual Design Style Guide Mood/Style
Color Palette
Energetic Sporty Clean Fun Happy Motivated organized simple
Typography Helvetica Neue Light
Logo
icons
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()_+{}[]:”<>?;’,./ archive abcdefghijklmnopqrstuvwxyz 0123456789 !@#$%^&*()_+}{:”<>?;’,./ 32
33