BodyFit MOBILE APPLICATION PLAN IMD 123: User-Centered Information Design Instructor: Natalie Hruska...

BodyFitMOBILE APPLICATION PLAN

IMD 123: User-Centered Information DesignInstructor: Natalie Hruska

3/28/2014by Justin Helms

TABLE OF CONTENTS

1 Stakeholder ID & History

2 Stakeholder Goals & Objectives

3 User Demographics

4 User Goals & Needs

5 User Persona 1: Kristina

6 User Persona 1: Mike

7 User Persona 1: Dillon

8 User Scenario

9 Meeting the Objectives

10-11 Functional/Content Specifications

Splash/Log-in/Home Screens

12 Feature Table - Splash/Log-in Screens

13-14 Content Table - Splash/Log-in Screens

15-16 Feature Table - Home Screen

17 Content Table - Home Screen

18 Functional/Content Specifications

Inner Screen 1: Home

19-20 Feature Table - Inner Screen 1: Home

21-22 Content Table - Inner Screen 1: Home


Inner Screen 2: Events

24-25 Feature Table - Inner Screen 2: Events

26-27 Content Table - Inner Screen 2: Events


Sub Screen 1: Profile

29-30 Feature Table - Sub Screen 1: Profile

31-32 Content Table - Sub Screen 1: Profile

33 Architectural Chart/Sitemap

34 Wireframe (2 Versions)

35 Mock-Ups (2 Versions)

36 Style Guide

37 Final Mock-up: Splash Screen

38 Final Mock-up: Log-in Screen

39 Final Mock-up: Home Screen

40 Final Mock-up:

Inner Screen 1: Home

41 Final Mock-up:

Sub Screen 1: Profile

42 References

43 Contact Information

STAKEHOLDER ID & HISTORY

• The stakeholder is Finesse Fitness, a fitness gym located in Raleigh, NC. They opened their doors to the fitness community in 2005. They have recently moved to a new location to accommodate their growing number of members. They began to develop an idea for a mobile application exclusively for their gym members because they wanted to gain a foothold in the fitness community and enhance customer experience.

BodyFit mobile application project

1

STAKEHOLDER GOALS & OBJECTIVES

• The name of the mobile application is called “BodyFit”. The main idea behind “BodyFit” is to allow Finesse Fitness gym members a solid, well-rounded workout experience. It offers members an opportunity to stay connected with events, cardio classes and local sport tournaments hosted by the gym. It will give members access to personal training videos posted by staff members to enhance each workout. A chat room would be available where members could communicate with each other regarding workout related matters.

• On a more personalized level, it allows for members to create a profile based on their physical attributes, such as height, weight, and age. Through the member profile, the “BodyFit” application allows members to achieve personal goals, whether it be to lose weight, tone up or gain muscle. It tracks daily workout progress based on information entered by the user. Information gathered allows members to track their progress toward their personal fitness goals.


2

USER DEMOGRAHICS

• “BodyFit” for Finesse Fitness targets males and females, ages 18-65, who are serious about their appearance and physical conditioning. Having a high school education or higher would be ideal for users of this application. While the application aims to be user friendly and simple to use, it would, nevertheless, require at least a moderate degree of smartphone and mobile application literacy.


3

USER GOALS & NEEDS

• Members of Finesse Fitness would use this mobile application to monitor and track their gym exercises and workouts. Through tracking, they would be able to see their progression over a period of time. It would allow users to view graphs and other visual content to quantify their progress. Members would have the option to submit their results into a challenge-board page accessible to all members for the purpose of comparing results and improvement with others on a daily, weekly and monthly basis. At the close of each cycle, the app would identify and rank members based on their improvement toward reaching their personal fitness goal.


4

USER PERSONA 1

BodyFit mobile application

project 5

USER PERSONA 2

6


project

USER PERSONA 3

7


project

USER SCENARIO

Dillon Kaiser

“I have been a member of Finesse Fitness for three years. I first heard about their “BodyFit” app in the monthly flier sent out by the gym; however, what really got me interested in using it was when I heard several of my friends at the gym talking about how helpful it was to them. I have been hooked ever since. This application, exclusive to Finesse Fitness, allows me to track my workout progress, as well as to access personal trainer videos to help me through each workout inside and outside of the gym. Another quality this app has is its ability to suggest daily exercises I can perform each day to burn a specific amount calories to help me achieve my goal weight. I especially enjoy the ability to compare my progress with or against others. It helps me push harder to achieve my personal fitness goals. It has surpassed my expectations and continues to be my go to workout app.”


8

MEETING THE OBJECTIVE

• The “BodyFit” application meets the expectations and objectives for both the stakeholder and the user. For the stakeholder, this mobile application will be the first of its kind for any gym within a 60 mile radius; thereby helping them to gain a stronger foothold in the local fitness community. In turn, the app will help FINESSE FITNESS gym to attract new member clientele, as well as, giving existing members a fresh, new outlook on their own workouts.

• For the user, this app will provide a forum that will allow users remote access to the gym and all of its amenities; such as scheduling a racquetball court or signing up for a cardio class. For the user, having an application that provides connectivity to the gym anywhere at anytime allows flexibility for users to have a solid, well-rounded workout on their own schedule. Use of the “BodyFit” mobile application would give members an overall greater satisfaction with their workout experience while FINESSE FITNESS gym gains more loyal, satisfied clients.


9

FUNCTIONAL/CONTENT SPECSIFICATIONS

SPLASH/LOG-IN SCREEN & HOME SCREEN

• The “BodyFit” mobile application opens up to a splash screen containing the Finesse Fitness gym’s logo, application version information, and the name and copyright of the company by which it was created, Appologics. Underneath all of this information, but on top of the blue background is a translucent image of weights After 5 seconds pass, the splash screen fades into a sign-in page where members can enter their username and password to gain access to the amenities of the “BodyFit” app. The “BodyFit” logo is included on this page and is located right above the username and password boxes. Both of these pages have a cool blue background with gray and black text; the username and password text is black and the entry boxes are white. When an information box is tapped by the user, a virtual keyboard emerges to allow for numbers and letters to be entered for username and password. After signing in, the user is taken to the homepage page. At the top of the page is a light gray header housing a small version of the “BodyFit” logo followed by black text “by Finesse Fitness”.


10


SPLASH/LOG-IN SCREEN & HOME SCREEN

• If the “BodyFit” logo is tapped, the homepage flips over to show information about the app, including version, creator, etc. Directly under the header, and on the right side of the homepage screen, is a button to allow for the user to access zoom capability. Once tapped, a small translucent box appears, allowing users to alter the size of text either one size larger or one size smaller than original text size. Below the header, and centered on the homepage screen, are links encapsulated in light gray rectangular boxes with rounded edges in front of the cool blue background seen in the splash page and the username/password page. The links on this page are as follows: 1) “BodyFit” User Profile”, 2) “Workout Overview”, 3) “Personal Trainer”, 4) “Challenge Yourself”, 5) “Events”, 6) “Manage Account”. On the right side of the homepage, there are directional arrows on upper and lower portions of the page to allow for scrolling to links that do not appear via altered zoom view. The splash page, username/password page, and homepage all incorporate

a blue background with a minimal color palette of gray, black and white.

…CONTINUED


11

FEATURE TABLESPLASH/MEMBER LOG-IN SCREENS

PROJECT FEATUREHOW WILL THE FEATURE BE

IMPLEMENTED?

WHAT CONCERNS DO WE HAVE ABOUT THIS FEATURE?

CONTENT

Intro/Splash

Screen.jpg, .psd, .png, Text

Is a five second timing interval set too long or too

short?

Text, .psd, .jpg, .png, CSS, HTML, Flash

Member Log-in

Screen

.jpg, .psd, .png, Text,

Text Box

Will this screen display correctly? Will username

and password work? Will it pull up the correct user information and profile?

Text, .psd, .jpg, .png, CSS, HTML, Flash

Virtual Keyboards for Member Log-in

Screen


Text BoxWill keyboard show up and

work correctly?Text, HTML, CSS

“Go”

Submit Button.jpg, .psd, .png

Functionality of the link. Will it work correctly?

Text, HTML, CSS


12

CONTENT TABLESPLASH/MEMBER LOG-IN SCREENS

ASSET FORMAT DESCRIPTIONASSOCIATED

MEDIA/ASSETSOTHER

INFORMATION

Intro/Splash

Screen Image.jpg, .psd, .png

Translucent image of weights above blue

background and under text and logo.

.jpg, .psd, .png

“BodyFit”

Logo for

Splash Screen

.jpg, .psd, .png, TextLogo and name

appear in the middle of the screen.

.jpg, HTMLLets users know

what app they are using.

Splash Screen

TextText

Text will be located under logo and show

the version of the app, as well as, app

creator.

HTML, CSS

Allows for visual transition to the member log-in

screen.

“BodyFit”

Logo for

Member Log-in Screen

.jpg, .psd, .png, Text

The logo and name will appear above the

username and password boxes.

.jpg, HTML

Lets users know what app they are

using. Allows users to sign into app.


13

CONTENT TABLESPLASH/MEMBER LOG-IN SCREENS


MEDIA/ASSETSOTHER

INFORMATION

Member Log-in

Screen:

Username & Password Text

Text, Text box

Allows users to input personal information to gain access to the

app.

HTML, CSS

Image for

Virtual

Keyboard

.jpg, .psd, .png, Text

The virtual keyboard, once a text box is

tapped, will appear in the bottom of the

screen.

.jpg, HTML, CSS

The virtual keyboard allows users to type in letters, numbers,

etc.

“Go”

Button Text

Text, Text box,

Text w/hyperlink

Button will be located under the password text box and allow

users to access the application

.jpg, HTML, CSS

Body Text

On

Both Pages

Text, Text BoxWill it display

properly in the correct position?

Text, HTML, CSS

…CONTINUED


14

FEATURE TABLEHOME SCREEN


IMPLEMENTED?


CONTENT

Logo in the Header.jpg, .psd, .png, Text, Text

w/hyperlink

Proper display. Does Embedded hyperlink work

properly?.psd, .jpg, .png, HTML

“Zoom”

Button


Text w/hyperlink

Link properly working to allow translucent window to pop up. When popped

up, will the “zoom” controls work properly?

Text, HTML, CSS, Flash

“Zoom”

Pop-Up Box


Text Box

For the controls inside to increase and decrease text

and image size properly.Text, HTML, CSS, Flash

Navigation LinksText, Text Box, Text

w/hyperlinks

Links to work properly and to take the user to the

corresponding screen as linked.

Text, HTML, CSS


15

FEATURE TABLEHOME SCREEN


IMPLEMENTED?


CONTENT

Navigation Link Boxes .jpg, .psd, .pngProper display. Does

Embedded hyperlink work properly?

.psd, .jpg, .png, HTML, Flash

Scrollbar Arrows .jpg, .psd, .png



. psd, .jpg, .png, Text, HTML, Flash

…CONTINUED


16

CONTENT TABLEHOME SCREEN


MEDIA/ASSETSOTHER

INFORMATION

Header .jpg, .psd, .pngProper display of

header image..psd, .jpg, .png,

HTML

Text in header for “by Finesse

Fitness” Text, Text Box

Text located in the right bottom of the logo to label the

company who owns the “BodyFit” app.

Text, HTML, CSS

“Zoom”

Button TextText, Text Box, Text

w/hyperlink

Allows users to change size of

content and words on each screen.

Text, HTML, CSS

Navigational Link Text

Text, Text Box, Text w/hyperlink

Text inside each navigational button to label each link.

Text, HTML, CSSLets users know what each link is.


17


INNER SCREEN 1: “BODYFIT USER PROFILE”

• The “BodyFit User Profile” screen begins with the same header as the “Homepage”. Below the header and to the left is a “home” and “back” button. The “home” button allows users to the home screen. The back button allows users to return to the previous screen; in this case, the user would return to the homepage. The “zoom” button is located on the top right of the screen under the header. The “BodyFit User Profile” page has the same overall visual look as the “Homepage” with a blue background and gray rectangular link boxes with rounded edges. The links on this page are also centered on the screen. The links are as follows: 1) “Profile”, 2) “Measure Up”, 3) “Calculations” (for Heart Rate, Calories, Blood Pressure, etc.).


18

FEATURE TABLE INNER SCREEN 1: “HOME”


IMPLEMENTED?


CONTENT


w/hyperlink



“Home”

Button


Text w/hyperlink

Link properly working to allow the user to return to

the “homepage”.Text, HTML, CSS, Flash

“Back”

Button


Text w/hyperlink


the previous screen.Text, HTML, CSS, Flash

“Zoom”

Button


Text w/hyperlink




“Zoom”

Pop-Up Box


Text Box




19

FEATURE TABLE INNER SCREEN 1: “HOME”


IMPLEMENTED?


CONTENT


w/hyperlink

Links to work properly and to take user to the

corresponding screen as link.

.psd, .jpg, .png, HTML

Navigation Link Boxes.jpg, .psd, .png, Text,

Text w/hyperlinkTo display image properly. Text, HTML, CSS, Flash

Scrollbar Arrows.jpg, .psd, .png, Text,

Text w/hyperlink

Proper display of images. That the arrows scroll

properly.Text, HTML, CSS, Flash

…CONTINUED


20

CONTENT TABLE INNER SCREEN 1: “HOME”


MEDIA/ASSETSOTHER

INFORMATION



HTML





Text, HTML, CSS

“Home”


w/hyperlink

Link properly working to allow the user to return to the

“homepage”.

Text, HTML, CSS


21

CONTENT TABLE INNER SCREEN 1: “BODYFIT USER PROFILE”


MEDIA/ASSETSOTHER

INFORMATION

“Back”


w/hyperlink


previous screen.

Text, HTML, CSS

“Zoom”


w/hyperlink



Text, HTML, CSS




Text, HTML, CSS

…CONTINUED


22


INNER SCREEN 2: “EVENTS”

• The Events screen begins with the same header as the “Homepage”. Below the header and to the left is a “home” and “back” button. The “home” button allows users to the home screen. The back button allows users to return to the previous screen; in this case, the user would return to the homepage. The “zoom” button is located on the top right of the screen under the header. The “Events” page has the same overall visual look as the “Homepage” with a blue background and gray rectangular link boxes with rounded edges. The links on this page are also centered on the screen. The links are as follows: 1) “Volunteer”, 2) “Classes”, 3) “Tournaments”, and 4) “Facility FAQ”.


23

FEATURE TABLE INNER SCREEN 2: “EVENTS”


IMPLEMENTED?


CONTENT


w/hyperlink



“Home”

Button


Text w/hyperlink



“Back”

Button


Text w/hyperlink



“Zoom”

Button


Text w/hyperlink




“Zoom”

Pop-Up Box


Text Box




24

FEATURE TABLE INNER SCREEN 2: “EVENTS” …CONTINUED


IMPLEMENTED?


CONTENT


w/hyperlink







Text w/hyperlink




25

CONTENT TABLE INNER SCREEN 2: “EVENTS”


MEDIA/ASSETSOTHER

INFORMATION



HTML





Text, HTML, CSS

“Home”


w/hyperlink


“homepage”.

Text, HTML, CSS


26

CONTENT TABLE INNER SCREEN 2: “EVENTS” …CONTINUED


MEDIA/ASSETSOTHER

INFORMATION

“Back”


w/hyperlink


previous screen.

Text, HTML, CSS

“Zoom”


w/hyperlink



Text, HTML, CSS




Text, HTML, CSS


27


SUB SCREEN 1: “PROFILE”

• The Profile screen begins with the same header as the “Homepage”. Below the header and to the left is a “home” and “back” button. The “home” button allows users to the home screen. The back button allows users to return to the previous screen; in this case, the user would return to the homepage. The “zoom” button is located on the top right of the screen under the header. The “Profile” page has the same overall visual look as the “Homepage” with a blue background. There are scrollbar arrows on the upper and lower right hand side that allow for users to scroll for information not initially seen on the screen. To the left of the scroll arrows and under the “home”, “back”, and “zoom” boxes is the user profile. In the user profile is an image of the users choosing along with body text containing personal body statistics and a section about the user.


28

FEATURE TABLE INNER SCREEN 2: “EVENTS”


IMPLEMENTED?


CONTENT


w/hyperlink



“Home”

Button


Text w/hyperlink



“Back”

Button


Text w/hyperlink



“Zoom”

Button


Text w/hyperlink




“Zoom”

Pop-Up Box


Text Box




29

FEATURE TABLE INNER SCREEN 2: “EVENTS” …CONTINUED


IMPLEMENTED?


CONTENT


w/hyperlink







Text w/hyperlink




30

CONTENT TABLE INNER SCREEN 2: “EVENTS”


MEDIA/ASSETSOTHER

INFORMATION



HTML





Text, HTML, CSS

“Home”


w/hyperlink


“homepage”.

Text, HTML, CSS


31

CONTENT TABLE INNER SCREEN 2: “EVENTS” …CONTINUED


MEDIA/ASSETSOTHER

INFORMATION

“Back”


w/hyperlink


previous screen.

Text, HTML, CSS

“Zoom”


w/hyperlink



Text, HTML, CSS




Text, HTML, CSS


32

ARCHITECTURAL CHART/SITEMAP


33

WIREFRAME(TWO VERSIONS)


34

MOCK-UPS(TWO VERSIONS)


35

STYLE GUIDEFINAL VERSION


36

FINAL MOCK-UPSPLASH SCREEN


37

FINAL MOCK-UPLOG-IN SCREEN


38

FINAL MOCK-UPHOME SCREEN


39

FINAL MOCK-UPINNER SCREEN 1: USER PROFILE


40

FINAL MOCK-UPSUB SCREEN 1: PROFILE


41

REFERENCES

• Splash Screen Image

LocalFitness.com.au. “Free weights.” 2007. Commons.wikimedia.org. Web. 24 March 2014.

http://commons.wikimedia.org/wiki/File:Free_Weights.jpg

• Kristina’s User Persona #1 Image

Helms, Justin. “Kristina.” 2013. JPEG file.

• Mike’s User persona #2 Image

XM7. Defense Attorneys. 2009. Commons.wikimedia.org. Web. 24 March 2014.

http://commons.wikimedia.org/wiki/File:TPB_attorneys.jpg

• Dillon’s User Persona #3 Image

Helms, Justin. “Dillon.” 2013. JPEG file.

• User Profile Image (Sub Screen 1: Profile Image)

Stroup, Matthew. Digital Image. 2013. Commons.wikimedia.org. Web. 24 March 2014.

http://commons.wikimedia.org/wiki/File:U.S._Navy_Chief_Hospital_Corpsman_Josh_Ives,_an_individual_augmentee_assigned_to_the_Farah_Provincial_Reconstruction_Team_%28PRT%29,_provides_a_spot_for_Hospital_Corpsman_3rd_Class_Brian_Mays_during_a_workout_in_130509-N-LR347-297.jpg


42

http://commons.wikimedia.org/wiki/File:Free_Weights.jpg

http://commons.wikimedia.org/wiki/File:TPB_attorneys.jpg

CONTACT INFORMATION

Justin Helms8372 Windemere Ln

Somewheresville, GA 28674

[email protected](374) 897-3478


43

mailto:[email protected]

BodyFit MOBILE APPLICATION PLAN IMD 123: User-Centered Information Design Instructor: Natalie Hruska...

Documents

Transcript of BodyFit MOBILE APPLICATION PLAN IMD 123: User-Centered Information Design Instructor: Natalie Hruska...