1

PROPOSAL AND STRATEGY TO: “BRING THE WORKOUT TO WHEREVER YOU GO”

Melly’s Personal Training

TABLE OF CONTENTS Table of Contents…………………………………...………………..…...2,3 Project Overview……………………………………….……………….…..4 The Stakeholder and Their Goals…………………….……………….….5 Target Users………………………………………………………………...6 User Needs and Goals………………………………………………........7 User Personas………………………………………………….…....8,9,10 Market Needs………………………………………………………..….…11 User Scenario….………………………………………………..…….......12 Reaching Project Goals…………………………………….…………….13 Reaching Project Objectives…………………………………………14,15 Site Function…………….………………………………16,17,18,19,20,21 Content Requirements………………………………………………..22,23 Meeting Objectives Table………………………………………….…….24

2

3

TABLE OF CONTENTS (CONT.)

Content Specifications Table……………………………………….…25,26 Interactive Features Table…………………………………………….27,28 Site Architecture…………………………………………………………...29 Wire-Frames………………………………...……………….…30,31,32,33 Flow Chart………………………………………………………………….34 Mockups……………………………………………………………..….35,36 Style Guide…………………………………………………………………37 Citations…………………………………………………………………….38

4

The aim of this project is to create a fitness website where the user can bring the trainer to their home or make appointments with the trainer to have sessions at the users’ local gym. Alongside that they would have various tools to keep track of their progress and alert the trainer of any changes in their schedule. The tools that could be used for contacting the trainer could be the following: instant messaging services, phone numbers, and email. The information for such methods of communication would be on a “Contact Us” page. This would give member users and non-member users alike to reach the trainer.

PROJECT OVERVIEW

5

The stakeholder is a local personal trainer student that wishes to launch a website upon graduation. The stakeholder’s goals in this project would be to bring in clientele and make it easier to have them as their trainer. The stakeholder would like to see the maximum amount of interactivity between them and the clients with the best web browser compatibility. Another of the goals intended to be achieved with the project is that they can have a large demographic. The final goal that the stakeholder wishes to achieve is client loyalty through this site and its services.

THE STAKEHOLDER(S) AND THEIR GOALS

6

TARGET USERS

The intended target demographic group for this site would be in the 18-40 range. The site would have different views for the several subgroups within that age. For example, there would be a page set for the groups 18-24, 25-32, and 32-40. The main features of the site would be there, but its particular content for the online only features would differ. For all clients there would be the need to easily contact the trainer, enter a personal live stream for online workouts, a method to pay for the trainer online, and have a calendar to track meals and workout days. In the younger age group, there would have to be a more fresh set of exercise offerings along with the more traditional kinds they might seek. The oldest age group will need more accessibility features for viewing the site and offerings more tailored to them. In the case that the user is a first time visitor, there would be just general information and quizzes to see the offerings that are right for them.

7

USER NEEDS AND GOALS

The user needs to be able to use the website, despite of age and technological skill. The site’s information must also be clear and easy to understand to any user. Registration, if the user becomes a member should be easy and bug free. The goals for the user while visiting the site is learning about fitness and how to get fit and as a member of the site; the user’s goal is to lose weight while making it easy to do from the comfort of the user’s local gym or the comfort of the user’s home.

8

USER PERSONAS

9

USER PERSONAS (CONT.)

10

USER PERSONAS (CONT. 2)

11

MARKET NEEDS

More and more users on the internet these days are leading busy lives. And it is becoming harder and harder to find a way to be healthy. Aside from that, many people cannot afford to have a personal trainer at the gym. The stockholder is willing to reach out to many people for an affordable rate and be completely flexible with the person’s lifestyle and needs. This is where the project would come in. It would allow those busy people or people that cannot afford the everyday personal trainer to have one.

12

USER SCENARIO

A user would hypothetically most likely find the site through a search engine such as Google. After coming across the site; the user would come to the home page speaking about fitness in the main page, it would be a pep-talk if you will. From there, if the user is convinced want to go further in the site; can go to the quizzes, the contact information, and even sign up to become a member of the site. Once a member of the site the features previously mentioned would open up with their emailed login information. After becoming a member, the user would first see a short profile information page with links to their account as a member. There they can edit their public information to the trainer such as weight, height, and other information needed of a fitness website. After, the stakeholder would get ahold of them via the information provided so they could do a live stream to determine what is best for them via the chatbox. As time goes on as a member of the site, they will check their calendar for session dates, the “Your Fitness Trainer” page to see their progress, and if they are really hard working; go over previous workouts from the same live stream page.

13

REACHING PROJECT GOALSThe firm’s primary goals in making the “Melly’s Personal Training” will

be reached by:

Making the website accessible by users of any age. Bringing in a cost effective way the service to the user and the

stakeholder Re-inventing the idea of how an online personal trainer works so that all

age groups can accept it as legitimate.

14

REACHING OBJECTIVES

Goal One

In all areas of the site, the user will be able to resize the font text and site colors in the case they are hard of seeing or have color-blindness. The login and registration process will ask only the bare essentials in information for joining. Every section of using the site will be covered in a page that has step-by-step videos on how to do anything and everything on the site. The site layout is streamlined for any user to be able to use and take advantage of. All of this combined will allow any age group to use the site.

Goal TwoBy using interactive features that are hosted by other companies such as Google, we can bring down the cost and time of creating the site. That which would in turn, become lower costs for the stakeholder and the user. These companies already have effective, free ways to bring in the features we need. All these features will help the user use the site with ease, which ties into goal one. The most simple coding techniques that bring the effect we want would also cut down on costs and time used on the site.

15

REACHING OBJECTIVES (CONT.) Goal Three

Bringing in a new level of interactivity to personal training would allow for the online personal trainer to be re-invented. Features like a calendar to keep track of meals and sessions, quizzes for the new user to find out what they are looking for through the service, live stream training, and other things would make sure that the trainer comes to where you wish for it to be. With what was previously mentioned in the previous two sections, it is believed that all age groups can accept that this is a legitimate way to have their own personal trainer. All the features within this site are functional and accessibility will help them find what they need. This is how the final goal will be reached.

16

SITE FUNCTION

Overall site StructureDue to a popular structure design, a lot of fitness pages are either a top or side menu, and a side menu is more easily used by the user. We shall use a left side menu that expands as you hover over it, revealing the submenus. The menu would have the following links: Login/Sign Up, Home, Fitness Info, Trainer Profile, and Contact Us. Where the Login/Sign Up link appears, the user may click on it to have it open up a screen to log into the site within the same menu, or if the user are a new member; join.

17

SITE FUNCTION (CONT.)

Homepage When the user first comes to the site, there will be in the main content area some paragraphs to entice the user into joining. It is thought that what will most likely be used above that and below the header is a simple flash photo gallery with pictures of the members and their testimonials of the trainer with the paragraphs. Most of the pages will be in this fashion besides from the multimedia sections. Upon logging in the “Login” area will turn into a mini profile of the member, or as simple as a “Hi __________!”. The content in the site menu will be also different. The links will go in this order: Home, Your Fitness Tracker, Calendar, Live Stream, Site Tutorials, and Contact Us.

18

SITE FUNCTION (CONT. 2)

Your Fitness Tracker The “Your Fitness Tracker” page will contain the

information on how well you have progressed so far. It will have a time and weight line chart that updates whenever the stakeholder logs the fitness progress into the system. It will be simple and easy to use. Although another part of the members’ area will address the functioning of the tracker. A very simple JavaScript chart can achieve this. This feature will help motivate users to keep working out, thus keeping clientele.

Calendar

The user on this page can schedule workouts with the stakeholder, plan meals, and jot down anything else they would like related to their fitness program. This feature will most likely be a Google Calendar. Again, another page will address how to use this function. This feature is for the user to track down their workout schedule so they do not work out excessively.

Live Stream This will be the user’s interactive area with

the stakeholder via webcam. You can get training here and also speak with the trainer to get tips. Most likely a YouTube live stream would be used due to its user-friendliness and ease of saving video steams for later viewing. This is the most interactive feature of the site. It is due to the stakeholder’s interaction with the viewer that they will be able to work with the stakeholder at the best time for them through their scheduling on the calendar.

Members Area

19

SITE FUNCTION (CONT. 3)

Fitness Info

Here the non-member user can take a quiz to see what workouts would be best for them. A JavaScript quiz can be used to create this. Aside from that, users will be able to find other information about different workouts and things such as one’s body mass index that will provide information to the user.

Calendar

The user on this page can schedule workouts with the stakeholder, plan meals, and jot down anything else they would like related to their fitness program. This feature will most likely be a Google Calendar. Again, another page will address how to use this function. This feature is for the user to track down their workout schedule so they do not work out excessively.

Trainer Profile

This page will give you information about the stakeholder’s qualifications. It will be a simple html information page.

Non-Members Area

20

SITE FUNCTION (CONT. 4)

Contact UsThis page will contain all the contact information on the stakeholder. There will be a link to their email, a Skype contact addition button, their phone number, and other information. HTML coding can add the links and the page will be a basic page within the site’s main design.

Site TutorialsHere the user will be able to find videos that will show them how to use the site. Here it will be simple videos to view that explain all of the functions of the site. The user will just click on a video to view it.

All Users

21

SITE FUNCTION (CONT. 4)

Contact UsThis page will contain all the contact information on the stakeholder. There will be a link to their email, a Skype contact addition button, their phone number, and other information. HTML coding can add the links and the page will be a basic page within the site’s main design.

Site TutorialsHere the user will be able to find videos that will show them how to use the site. Here it will be simple videos to view that explain all of the functions of the site. The user will just click on a video to view it.

All Users

22

CONTENT REQUIREMENTS

The users should be able to feel as a workout should always be at arms reach, or even at the reach of a personal computer. The user should also feel as if their trainer is their friend, and assistant. The website should be a tool and means of encouragement for them to continue working out, and finally these should be able to use it with ease. This would let the user reach their end goal.

23

CONTENT REQUIREMENTS(CONT.)Homepage

The homepage will have brief content about getting the user into fitness but not in the typical way. It will be as if through the user has a personal trainer at home! It will also talk about how easy it can be from any fitness level or age. It is thought that what will most likely be used above that, and below the header is a simple flash photo gallery with pictures of the members and their testimonials of the trainer with the paragraphs. The user will think to themselves, “Wow! This trainer can really help from wherever I am!” This would bring in the clientele and show the user how easy it can be.

Live Stream

The live steam will have the live steam for training. This will allow the users that cannot have the trainer at the gym or do not have a gym to bring the trainer to them. You are able to speak with the trainer through a chat box at the bottom of the live stream.

Fitness Info

A JavaScript quiz can be used to create this. It would allow users to easily find out what would be best for them. But also it is easy to code so it cuts down on costs for the stakeholder. And most users have used a quiz like this at one point or another. This allows for familiarity and cost effectiveness.

24

Goal One Goal Two Goal Three Concerns

Making the website accessible by users of any age.

Bringing in a cost effective way the service to the user and the stakeholder

Re-inventing the idea of how an online personal trainer works so that all age groups can accept it as legitimate

Not all users might like the service as is.

Features Concerns

Adjustable text size, videos to assist non-tech savvy users, ability to change color format for color blind users.

xHTML/CSS coding for majority of site, JavaScript for smaller interactive features, out of server calendar and live stream hosting

Live stream, calendar, progress trainer chart (Your Fitness Trainer), contact information, quizzes

Incompatible browser, plug-ins, JavaScript turned off on browser

Meeting Objectives

25

Asset Format Description Associated Media

Adjustable Text PNG, xHTML, CSS There will be buttons above the website indicating different font sizes. Text size will have will have three adjustments in size for easier viewing? The site will adjust in size accordingly.

HTML floating DIV layout, CSS formatting.

Side Menu HTML links, CSS formatting

There will be various HTML links that will reveal a drop down menu once you hover over them if there are any subsections. If they are not, they are links within a DIV layer which will contain the links.

HTML links, CSS formatting

Php Account Page Php, PNG, xHTML, CSS

Here the user is able to set some of the previously mentioned settings.

Php, PNG, xHTML, CSSHTML floating DIV layout, CSS formatting.

Content Requirements

26

Asset Format Description Associated Media

Ability to change color format for color blind users.

HTML links, CSS formatting

There will be a color blind scheme for each major type of color blindness.

HTML links, CSS formatting

Slideshow Adobe Flash FLV Here you will see pictures of clients that have something to say about the stakeholder’s services. It will go from slide to slide in intervals of about a minute between slides.

Embedded FLV, Action Script, Clientele Images, Clientele testimonials

Logo PNG An eye appealing image that lets the user know the site’s name and purpose without using multiple images.

PNG

Side Menu xHTML, CSS, MySQL

Here users can navigate to other pages of the site, log in, or register.

xHTML, CSS, MySQL

Content Requirements (Cont.)

27

Asset Format Description Associated Media

Chart JavaScript There would be a chart that would allow on the user-end side to see how much weight they have lost. The average of how much weight is being lost a week, month, 6 month, and yearly basis is shown; it would depend on the settings that the user sets when entering the page. The user can also note how much weight they lose on their own scale. The stakeholder would be able to add notes about the user’s progress and the weight lost. Here, the user can input their height and weight to see where their Body Mass Index is.

.xHTML, CSS, SQL Database, JavaScript.

Interactive Features

28

Asset Format Description Associated Media

Prerecorded Videos HTML link, Embedded FLV

For the non-member user there will be videos so the user can see how the trainer does workouts. For the member user, they will be able to watch a larger amount of videos.

HTML link, Embedded FLV

Previous Workout Videos HTML link, Embedded FLV

The user will be able to find previous workouts done via live stream to repeat workouts when the stakeholder is not present.

HTML link, Embedded FLV

Fitness Quiz Javascrtipt, xHTML, PNG Here users can find out what can do with the trainer.

Images, HTML links

Interactive Features (Cont.)

29

The hierarchical and linear are most appropriate as the site has two different sides to it. Once you enter login information on the non-member side of the website, the web-site becomes completely different. Aside from that one portion of the non-member page has two separate sections for potential clientele to look though. Primarily, there is hierarchical branching due to how the site is laid out. Then, it goes down into linear branching mostly since the majority of pages take you to an interactive feature on the member side.

SITE ARCHITECTURE

30

WIRE FRAMES (DESIGN ONE)HOME PAGE

31

WIRE FRAMES (DESIGN ONE)LIVE STREAM

32

WIRE FRAMES (DESIGN TWO)HOME PAGE

33

WIRE FRAMES (DESIGN TWO)LIVE STREAM

34

FLOWCHART

35

MOCKUP (HOMEPAGE)

36

MOCKUP (LIVE STREAM)

37

STYLE GUIDE

Colors

Background ColorHex Code: # D1BECB

Menu ColorsHex Code: #C381A5,#AF80A9

Content AreaHex Code: #AF80A9

FontHex Color:#FFFFFF

Fonts

HeaderAudiowide

MenusArial

ContentArial

TextureGradient & Patterns

38

CITATIONS Local Fitness- AU. N.p., 2009. Web. 1 Apr. 2013. <www.localfitness.com.au>.

Mel. "Misc Headshot 6 by ~evilcorgi on DeviantART." Misc Headshot 6 by ~evilcorgi on DeviantART. Mel, 8 July 2005. Web. 01 Apr. 2013. <http://evilcorgi.deviantart.com/art/Misc-Headshot-6-20368748>

Kxhara, and Max. "Introducing Maxwell - Male Stock Model by =Kxhara on DeviantART." Introducing Maxwell - Male Stock Model by =Kxhara on DeviantART. KxHara, 18 Sept. 2012. Web. 01 Apr. 2013. <http://kxhara.deviantart.com/art/Introducing-Maxwell-Male-Stock-Model-327925088>

Baran, Chris. "Older Woman by ~cabaran on DeviantART." Older Woman by ~cabaran on DeviantART. Www.inyourhousephotography.cjb.net, 25 Feb. 2007. Web. 01 Apr. 2013. <http://cabaran.deviantart.com/art/Older-Woman-49653873>.

"Optimum Nutrition: True Strength." Optimum Nutrition News RSS. N.p., n.d. Web. 19 Apr. 2013. <http://www.optimumnutrition.com/>

"Exercise Can Help Prevent Painful Muscle Tension." The Hindu. N.p., n.d. Web. 19 Apr. 2013. http://www.thehindu.com/features/metroplus/fitness/exercise-can-help-prevent-painful-muscle-tension/article98357.ece

“Berry for Us” N.p., n.d. Web 23 Apr. 2013 <http://berry4us.net/t>

39

CONTACT PAGE

Nicolle Carbonell User-Centered Information Design-

IMD132 Email: smgirl825@aii.stu.edu