An information design website plan for a mock company called " Basements and Barbells." This presentation covers everything from the stakeholder and user demographics to user personas.

1. BASEMENTS &
BARBELLS
WEBSITE PLAN
Information architecture
11/07/18

2. TABLE OF CONTENTS
Stakeholder Overview……………………………………3-6
User Demographics……………………………………....7-8
User Personas/scenario…………………………..........9-12
Content Specifications…………………………..........13-18
Features/Content Tables………………………...........19-20
Architectural Map…………………………………………..21
Wireframes……………………………….....................22-23
Style Guide…………………………………………………..24
Mock-ups………………………………………………...25-27
Sources……………………………………………...............28

3. STAKEHOLDER ID, HISTORY,
& REASON FOR PROJECT
Jim Ferdaise is a fitness professional and the CEO of Basements
and Barbells, a local fitness center. He loves working out and
running his gym but loves helping others achieve their fitness
goals even more. Jim does a great job at running his gym with
profits rising and plenty of members to fill the fitness center
every day, but he feels like something is missing.One night Jim
was sitting on his couch watching late nightTV and stumbled
upon an infomercial for some home fitness equipment.This is
when he realized that there are so many potential members for
Basements and Barbells out there that he’s currently not
reaching.

4. STAKEHOLDER ID, HISTORY,
& REASON FOR PROJECT
(CONT.)
Basements and Barbells is a typical gym with all of the
equipment and staff that a member would need to accomplish
his/her fitness goals. It offers memberships, personal training,
and in-house fitness classes, but that’s about it. After seeing that
informercial Jim realized that he was just scraping the surface
when it came to the fitness industry, and decided he wanted to
update the website with an available app that could help with
his new marketing plan.

5. STAKEHOLDER ID, HISTORY,
& REASON FOR PROJECT
(CONT.)This app will feature ways for members to incorporate their workout experience at
the gym and at home including:
• Live feed during scheduled workout sessions at Basements and Barbells
• Nutrition plans tailored for the specific user
• Many different workout programs
• The option to choose a professional trainer that will assist in achieving the user’s
goals
• Available times to meet with his/her trainer on site
• Q & A feedback in case the user has any questions for their trainer
• Communicate with fellow members of Basements and Barbells via a message
board

6. STAKEHOLDER OBJECTIVES
• Attract new users to the gym
• Increase interactivity with the gym and its members
• Reach out to users looking for a new workout experience
• Make it easier for anybody to create a healthier lifestyle for
themselves

7. USER DEMOGRAPHICS &
NEEDS
Target User/Group: fitness enthusiasts, active/energetic
individuals, anyone looking to improve his/her quality of life
• Age: 18 – 50
• Gender: male/female
• Education: diploma and higher
• Computer Experience: moderate – high
• Previous Knowledge: some experience with mobile apps
• Income: $25,000 - $100,000

8. USER DEMOGRAPHICS &
NEEDS (CONT.)
Consumers would use this app because it’s convenient, it offers
many different ways for a member at Basements and Barbells to
stay active, and offers fewer excuses to be inactive.This app is
engaging and enticing.There is always the potential for activity to
be happening in real time with this app. A user can check in to see
what fitness classes are currently being held and join in through the
app via live video, speak with a trainer, check out nutrition plans,
and even after hours, a member can reach out to fellow members
via the message board. A user may request:
• Fitness class video be more engaging
• List of restaurants/grocery stores that align with each nutrition
plan
• Fitness tracker

9. USER
PERSONA
#1

10. USER
PERSONA
#2

11. USER
PERSONA
#3

12. USER SCENARIO
Jess decided to change things up and did some research on
finding a new gym. After plugging in a few keywords she
stumbled upon a link to Basements and Barbells. She was
intrigued by the photos of the gym and decided to stop in to
check out the place.After a quick tour she decided to join and by
her surprise she was notified of a cool new app that the gym
recently implemented. She downloaded the app and was
instantly hooked. Now, Jess can’t wait to workout and see what
fun new activities the app has to offer every day! She loves
utilizing the message board to connect with her workout
buddies and speaking with her personal trainer to see how she
can improve.

13. CONTENT SPECIFICATIONS:
HOME PAGE
Header:
Within the header (from left to right) will lie the logo/company
name, main navigation, login icon, and search directly below the
login icon. The logo will rest in the top left of the page and the
navigation centered in the header with the login and search
right justified. The logo will also act as a home page link. The
navigation links will include a hover feature with each link
transitioning with a red background that will fade in over .75
seconds when hovered over.

14. CONTENT SPECIFICATIONS:
HOME PAGE (CONT.)
Navigation:
Again, the navigation will be rested in the center of the header
and links will have the hover feature previously stated. The
navigation links will include (from left to right) “About Us,
Available Classes, Workout Programs, Trainers, Memberships,
Sign Up.”

15. CONTENT SPECIFICATIONS:
HOME PAGE (CONT.)
Content:
The content will begin with an automated carousel including 5
different large images of the gym overlaid by links to different
pages of the website that will offer their own specific content.
Directly below these links will rest a “search” feature. Below the
carousel will include 3 informative features of the website/gym that
will entice the user to join. This will be displayed in 3 different
equally sized vertical rectangles aligned side-by-side. Below this
section will include 2 large illustrations of barbells with weights on
them. They will be stacked vertically 1 above the other. Each will
also include a hover feature that expand an image along with
promotional information displayed next to it when the barbell is
scanned over by the mouse. Below this content will rest the footer.

16. CONTENT SPECIFICATIONS:
HOME PAGE (CONT.)
Footer:
This reiterates all of the links included in the header. It will also
include quick links to every other page of the website and a site
map. It will also display the logo again and available social
icon links.

17. CONTENT SPECIFICATIONS:
TRAINERS PAGE
This page will include all of the trainer’s photos displayed in a
vertical order, left justified with detailed personal and
professional information about the trainer written out to the
right of each photo.

18. CONTENT SPECIFICATIONS:
ABOUT US PAGE
This page will include a large group photo of the team at the top
followed by a brief history of the company and what they are
currently about. Below this will include a quick optional form for
a user to fill out to join the gym. Below this will rest a map of
where the gym is located and functional capabilities for the user
to scroll in and out and move the map around if he/she so
chooses.

19. FEATURES
TABLE:
Project Feature How is the feature implemented What concerns do we have about
this feature
Content
Main
Navigation
The main nav of the home page displays
global links to other pages of the website
and collapses these links when the screen
is shrunk to a smaller size. Another
feature rested inside of the navigation is a
search feature, where the user can search
anything they would like.
The main concern with the main
nav is to get all of the typeface,
colors and logo to match and be
homogenous with the rest of the
site.
• Helpful links to pertinent
information about the website
• Search feature allowing users to
find information that is not
currently displayed
Logo The logo at the top left of the page
informs the user of the website that they
are on and offers a global link for the
to click on to direct them to the home
page no matter where they may be in the
site.
An inexperienced user may not
know about the logo being a
feature of the website to direct
them to the home page.
• Company logo
• Will read out he company name
below the logo
Image Links Throughout the home page there will be
various images with links that will direct
the user to the related page on the
website.
Getting all of the images to match
in size and quality, and for each
to function properly every time
no errors.
• large images with written
content/titles next to them to
inform users of the image content
Carousel Offers five different image links to scroll
through that directs the user to its related
page with specific content
Finding the right content/images to
place within the carousel
• large images of the gym with
related content portrayed over
each image
Inner page1:
About Us
Will display image of faculty at the top
followed by a brief history of the
company. Below this, will display a sign
up form and map of gym location below
that.
Getting all of the content and form
functioning properly with no errors
• large image of faculty
Inner page2:
Trainers
Photos of each trainer displayed in
vertical order with descriptions of each
trainer displayed to the right of each
photo
Getting all of the information on
each trainer written out properly
and accurately
• large images of each trainer

20. CONTENT
ASSETS
TABLE:
Asset Format Description Associated
Assets/Media (if any)
Other Information
Logo .png The Basements and
Barbells logo and
business name below it
Link to home page none
Carousel Text and .png links Carousel offering five
options of images and
related content to choose
from
CSS/HTML/
Javascript
Some javascript
implemented to
control functionality
of the carousel
Informative
Features
Text and .png links “Classes” written out with
3 image links below to
the 3 most popular
classes offered
CSS/HTML none
Barbell Image
Promotions
Text and .png links Image of barbell with a
hover feature that
expands into a
promotional image and
its related content beside
it
CSS/HTML Image expands from
the most inner
weight on one side of
the barbell and
related text content
will expand from the
bar
Inner Page1:
About Us
Text, .png, and text boxes Information of company
followed by a small sign
up form and a map
pinning the gym location
CSS/HTML/
Javascript
Some javascript
implemented to
control functionality
of the form and map
Inner Page2:
Trainers
Textr and .png Information about each
personal trainer available
at the gym
CSS/HTML none

21. ARCHITECTUR
AL
MAP:

22. SITE
WIREFRAMES:
SET #1 –
HOMEPAGE AND
TRAINERS PAGE

23. SITE
WIREFRAME
S:
SET #2 –
HOMEPAGE AND
TRAINERS PAGE

24. STYLE
GUIDE:

25. MOCK-UP:
HOMEPAGE

26. MOCK-UP:
TRAINERS PAGE

27. MOCK-UP:
ABOUT US PAGE