1













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








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
3
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.
4
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.
5
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.
6
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.
7
8
9
10
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.
11
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.
12
The 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.
13

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 Two
By 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.
14

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.
15
 Overall
site Structure
Due 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.
16
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.
17
Members Area
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.
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.
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.
18
Non-Members Area
Fitness Info
Trainer Profile
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.
This page will give you information about the
stakeholder’s qualifications. It will be a simple html
information page.
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.
19
All Users
Contact Us
This 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 Tutorials
Here 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.
20
All Users
Contact Us
This 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 Tutorials
Here 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.
21
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.
22
Homepage
Live Stream
The homepage will have brief content
The live steam will have the live steam for
about getting the user into fitness but not in
training. This will allow the users that cannot
the typical way. It will be as if through the
have the trainer at the gym or do not have a
user has a personal trainer at home! It will
gym to bring the trainer to them. You are able
also talk about how easy it can be from any
to speak with the trainer through a chat box
fitness level or age. It is thought that what
at the bottom of the live stream.
will most likely be used above that, and
below the header is a simple flash photo
gallery with pictures of the members and Fitness Info
their testimonials of the trainer with the
paragraphs. The user will think to
A JavaScript quiz can be used to create this.
themselves, “Wow! This trainer can really
It would allow users to easily find out what
help from wherever I am!” This would bring
in the clientele and show the user how easy would be best for them. But also it is easy to
code so it cuts down on costs for the
it can be.
stakeholder. And most users have used a
quiz like this at one point or another. This
allows for familiarity and cost effectiveness.
23
Meeting Objectives
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
Adjustable text size,
videos to assist nontech 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
Concerns
Live stream,
calendar, progress
trainer chart (Your
Fitness Trainer),
contact information,
quizzes
Incompatible
browser, plug-ins,
JavaScript turned off
on browser
24
Content Requirements
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,
CSS
HTML floating DIV
layout, CSS
formatting.
25
Content Requirements (Cont.)
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
26
Interactive Features
Asset
Chart
Format
JavaScript
Description
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.
Associated
Media
.xHTML, CSS,
SQL Database,
JavaScript.
27
Interactive Features (Cont.)
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
28
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.
29
30
31
32
33
34
35
36
 Colors
Fonts
Background Color
Hex Code: # D1BECB
Header
Audiowide
Menu Colors
Hex Code:
#C381A5,#AF80A9
Menus
Arial
Content Area
Hex Code: #AF80A9
Content
Arial
Font
Hex Color:#FFFFFF
Texture
Gradient & Patterns
37
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-muscletension/article98357.ece
“Berry for Us” N.p., n.d. Web 23 Apr. 2013 <http://berry4us.net/t>
38
 Nicolle
Carbonell
 User-Centered Information Design- IMD132
 Email: smgirl825@aii.stu.edu
39