(Vira-1-Class)
1
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Stakeholder Overview
………………………………………………………
User Demographics and Needs Assessment …………………….
User Preferred Features
……………………………………………………
User Persona 1
…………………………………………………………………
User Persona 2
…………………………………………………………………
User Persona 3
…………………………………………………………………
User Scenario
……………………………………………………………………
Meeting the Objectives
…………………………………………………….
Functional/Content Specifications : Homepage ………………..
Functional/Content Specifications: Online Classes ……………
Functional/Content Specifications: Contact ………………………
Features Table
………………………………………………………………….
Content Assets Table
………………………………………………………..
Architectural Map
……………………………………………………………..
Homepage Wireframe 1
……………………………………………………
Online Classes Wireframe 1
……………………………………………..
3
4
5
6
7
8
9
10
11
13
14
15
21
26
28
29
30
31
32
34
35
36
37
40
2
Breathe is a yoga studio located in the art district of Memphis, TN. Their goal is to make yoga fun and
accessible to all persons passionate about yoga. Since they are located so close to the local art
school, they have attracted quite a few art students. Several of their clients expressed a great
fondness of their services, but wanted more classes offered at odd schedules. Because Breathe
values their clients highly, they grouped up to create a solution for their client's requests. That
meeting resolved with the idea for online classes. Breathe hopes the creation of online classes will
create a new and exciting way for clients to experience their service, as well as, offer the flexibility for
clients to enjoy their services whenever they want.
COMMISSIONING THE WEBSITE
After a successful second year in business, Breathe has decided it is time to see their idea come into
a reality. They have commissioned a website in hopes to increase brand awareness, customer loyalty,
and revenue. The website should feature online classes, class information, contact information, a
blog, and a shop.
3
Breathe's clients are mainly female however they do have quite a few male
clients. Their client age group is 17 - 50. Due to the location of their studio,
most of their clients are art students and teachers. Their clients are
passionate about healthy and clean lifestyles. Many are involved in
environmental causes, animal rights, and equality causes. Clients are
typically average computer users, with knowledge of internet and Microsoft
Office products. Most clients have taken at least one online class. An easy to
use navigation and quick links would ease their use of the website. The most
attractive feature of the website would be the online classes. Clients would
like to be able to access their classes anywhere and anytime. Clients would
also like to view in studio class times on the go.
4
5
(Scott Pilgrim....)
6
(Harry Potter..)
7
(Forgetting Sarah...)
8
(Vector Laptop…)
(Vira-1-Class)
(Yoga Silhouettes)
9
10
HOME PAGE
The homepage's main two functions will be to welcome the user and
introduce Breathe as an exciting and innovative company. The homepage will
be designed to continue the idea that Breathe is in touch with today's
interactive technology. The design will be modern and layout will be slightly
different from the standard layout.
The header of Breathe's homepage should be divided into two sections. Both
sections will be stacked on top of each other horizontally.
The first section of the Header area will set aside for suggesting different
pages of the website. It should have interactive links to important pages of the
website.
The second section of the Header area will show the Breathe logo, global
navigation, a search box, and a sign-in area. The logo will function as a link to
the homepage and be displayed in the far left hand corner of the page. Across
for the logo, the global navigation will be displayed : “Home”, “Schedule”,
“Online Classes”, “Blog”, “Contact”, and “Shop”. Followed behind the global
navigation the search box and sign-in box will be displayed. Both the search
box and sign-in box will be interactive. When the user hovers over either of
them, a box will appear under them. In the search box, the hover effect will
display a text box for search phrase. In the sign-in area, the hover effect will
display a text box for email address, text box for password, a submit button,
and a “register” link.
11
The body of the website will be divided into two areas, content and sidebar.
Both sections will be listed next to each other horizontally.
The content section of the homepage will be used to tell more about
Breathe as a company and the services they offer. It will be located directly
under the global navigation bar. It will feature an About Us section, Call to
Action Box, and Featured Shop Items.
The footer will be located under the content section. It will be used to
display legal information, a navigation area, and quick links to social media.
The footer navigation will be used to direct users to important pages of the
website, : “Site Map”, “RSS Feed”, “Contact Us”, “Terms of Use”, “Privacy
Policy”, and “FAQ”.
The Sidebar area of the website will be sticky, in that it follows the user as
they scroll through the content section of the website. It will be scrollable
itself. It will list featured blog articles, and the global navigation.
12
ONLINE CLASSES
The function for the Online Classes page will be to display the online classes
available. Since there are so many videos it will feature a filter and
recommended videos. It is important not to overwhelm the user with so many
videos, but to also engage the user and invite them to explore the videos
offered.
To continue consistency with the homepage, the global navigation bar,
sidebar, and footer will be the same as the homepage.
The content area of the Online Classes page will start with breadcrumbs and
social media links. Followed by the Page Title. Directly below the Page Title, a
filter area will be available to the user. The filter will feature interactive media
such as drop down boxes and check boxes.
Under the filter box, a suggested videos area will be displayed. It will be
dynamic and offer choices of “Featured Videos” and “Free Videos”. When the
user clicks on either of the tabs 5 videos for that category will be displayed.
The default active tab will be the “Featured Videos” tab.
Below the suggested videos, a dynamically shorten video list will be
displayed. It will list 2-3 rows of videos and a show more button that will add
2-3 rows of videos to the page with each click.
All of the videos listed on the page will increase in size when the play arrow is
clicked. They will also feature the basic functions, “full screen”, “play”,
“pause”, and “volume controls”.
13
CONTACT
The function for the Contact page will be to offer contact information,
Company information, map and directions, and a contact form.
To continue consistency with the homepage, the global navigation bar,
sidebar, and footer will be the same as the homepage.
As with the Online Classes page, the content area of the Online Classes page
will start with breadcrumbs and social media links. Followed by the Page Title.
Directly below the Page Title, an “About Section” will be listed next to the map
with directions information. They will be displayed horizontally from each
other.
Below the About Section, Studio information will be displayed. This
information will provide studio hours, phone number, and address. Followed
by an image and social media links.
Across from the Studio Information section, a contact form will be displayed. It
will provide text boxes for : “Name”, “Subject”, “Email”, and Subject”. Under
the text boxes there will be a “Submit” button. After the user clicks submit, a
“Thank you” text will appear where the contact form was located.
14
Features Table
Project
Feature
Header
Introduction
How will the feature be
implemented
Will be used to showcase
important links. Will feature an
animated background and
animated boxes. Interaction with
user by clicking on links. Static
location in the header above the
navigation on the homepage only.
What concerns do we have Content
about this feature
Animated section may “slow” CSS, HTML Coding,
website load time.
and video,
JavaScript.
Animated
boxes
Will be used in the introduction
Animated section may “slow” CSS, Link, jpg.
header. Boxes will appear one at website load time.
a time on the page. Interaction by
darkening when the user hovers
of the section. Will link to page on
the website that matches
description of box.
15
Features Table Continued
Logo
Will be used as a quick link to
homepage. Interaction by clicking
on link to direct user to homepage.
Link
Global
Navigation
Used in header to navigate
Navigation links need to fit in Links
website. Interaction with user
area and stay readable and
through clicking on section of
attractive.
navigation user would like to visit.
Search Box / Used to search site for particular
Search
information. Interaction with user
Button
through typing in requested
information and clicking on the
search button.
Hover effect should be clear.
CSS, HTML Coding,
and JavaScript.
Sign In
Hover effect should be clear
and not easily missed.
Privacy and protection
should be ensured.
CSS, HTML
Coding, and
JavaScript.
Used to sign in or register for full
website access. Interaction with
user through typing in login and
password and clicking on links.
16
Features Table Continued
Footer
Navigation
Used to navigate website.
Interaction with user through
clicking on section of navigation
user would like to visit.
Links
Call to Action Will be used to showcase a link to
Button
the contact page. Interaction with
user by linking to the contact
page upon clicking on it and
hover effects.
CSS, Link
Read More
Link
Will be used to link to the Contact
Page. Interaction with user by
directing user to the contact page
when the link is clicked on.
CSS, Link
Description
box link for
Featured
Items
Will be used in the Featured
Items section to link items to the
item in the store. Interaction with
user by clicking on link to be
directed to shop post and hover
effects.
CSS, Link
17
Features Table Continued
Social Icons
Used to link to associated social
media sites. Interaction with user
through use of clicking on icon to
be directed to social media site.
Link
Sticky
Sidebar
Used to display navigation and
featured articles. Interaction with
user through staying with the user
while they scroll through the body
content.
CSS, HTML Coding,
and JavaScript.
Description
box link for
Featured
Blog Articles
Will be used in the Sidebar for
Featured Blog Articles to link
images to the matching blog
article. Interaction with user by
clicking on link to be directed to
shop post and hover effects.
Link to send message to
Breathe's email address.
CSS, Link
Submit
Button
CSS, HTML
18
Features Table Continued
Video Filter
Used to filter videos shown in the
video list. Interaction with user
through selected from dropdown
fields and check boxes.
Video
Category
Selection
Will sort featured videos into two
categories. Only the videos under
the category selected will be
shown. The user will interact with
it by clicking on one of the
options.
Will be used in the Featured
Videos section to link videos to
the videos in the video post.
Interaction with user by clicking
on link to be directed to video
post and hover effects.
Video
description
box
Videos will need to be
tagged properly.
CSS, HTML
Coding, and
JavaScript.
CSS, HTML
Coding, and
JavaScript.
CSS, Link
19
Features Table Continued
Video
Videos will be located on the
Online Class page and video
posts. They will increase in size
and allow the user to select from
video options, such as play,
fullscreen, resolution, etc.
Show More
Button
Will be used to show 2- 3 more
rows of video if clicked on.
CSS, Link
Breadcrumbs
Will be featured under the
navigation bar. Will show user the
hierarchical navigation of the
page the user is viewing.
CSS, Link
Map
Will link to Google Maps
CSS, HTML
Contact
Form
User will be able to input info into
the text fields of the contact form.
After clicking submit, it will send
the message to Breathe's email
address.
CSS, HTML
(IMD123…)
It should be clear to the user
how to close the video when
it is opened.
CSS, JS, and FLV.
20
Contents Table
Asset
Format
Description
Video
Background image for CSS, HTML,
Introduction header
Javascript
on Homepage
Animated box
Links
Jpeg, Text
Featured Blog
Image
Image/png
Boxes used to
promote important
pages, located in the
Interlocution Header
on the Homepage
Featured image for
Blog Post.
Animated
Background
Associated
Other
Assets/Media (if Information
any)
CSS, HTML,
Javascript
Box area should
be linked to
associated page.
CSS and
Javascript
Image should be
linked to
associated blog
article
21
Features Table Continued
Article Header
text
Display article
heading in Sidebar
CSS
Big Logo
Image / Vector
CSS
Logo
Image/ Vector
Breath Logo. Will be
used in Introduction
Header.
Breathe logo. Will be
used throughout
website in header
and footer.
Search icon used in
sidebar and global
navigation bar.
Box used for type
fields
Text used in header
for sign in box
CSS
Search Icon
Box
SIGN IN
Image/ Png
Image/ PNG
Text
CSS
Text should link to
associated blog
article
Logo should link
to home page.
CSS
CSS
Will be used for
search box and
user /password
boxes.
22
Features Table Continued
Call to Action Text Text
Call to Action
Button
Button
About Us
Background
Image
About Us Text
Image/JPEG
Text
Featured Items
Thumbnails
Image/JPEG
Featured Items
Header
Text
Text used in Call to
Action area
Button used to link to
Contact Page in Call
to Action area
Image used in
background of About
Us section.
Text used in the
About Us section
Images of featured
items used in
Featured Items
section.
CSS
Header text used for
Featured Items
CSS
CSS
CSS
CSS
CSS
Images will be
used for Shop
Post. Images will
need to be
cropped or
resized without
losing quality.
23
Features Table Continued
Facebook Icon
Image/PNG
Twitter icon
LinkedIn Icon
Image/PNG
Image/PNG
RSS FEED Icon
Image/PNG
Google+ Icon
Image/PNG
Copyright Text
Text
Page Title
Text
Filter Text
Text
Video Thumbnails Image/JPEG
Video title
Text
Checkbox
Image/PNG
Video description Text
Icon for Facebook
links.
Icon for Twitter Links
Icon for LinkedIn
links
Icon for RSS Feed
links
Icon for Google+
links
Text for Copyright
information
Page title text
Text used in Filter
Thumbnail images
used for videos
Title for each video
Filter checkbox
Short description for
each video
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
CSS
24
Features Table Continued
Videos
Video
Show More
Button
Page Title
Location
Description
Button
Text
Text
Map
Image/JPEG
Business Info
Image of Breathe
Social Media
Icons
Text Field Box
Text
Image/ JPEG
Image/PNG
Submit Button
(IMD123…)
Image/PNG
Button
Videos of online
classes
Button to show 3
more rows of video
Page Title text
Short Description
about Breathe and
their location.
Map to Breathe's
location
Business Info
Image of Breathe
Social Media Icons
HTML, CSS
CSS
Box for text field used
in Contact Form
Submit Button used
for sending message
to Breathe
25
The architectural map of the Breathe website is listed below. The primary navigation structure of
the Breathe website will be a hierarchical design with some linear branching. A global navigation
will be offered at the top of every page of the website. This will help decrease dead ends, keep a
persistent menu and menu arrangement/ order, create a consistency of terminology, and increase
the availability of the menu options. A search function and sign in function will be offered in the
global navigation, so as to help increase availability and “searchability” of help screens. Linear
branching will be used in the check out process and user registration. Linear branching for those
areas will help ensure users do not skip important steps by mistake. Filters will be offered in
catalogs to enable shortcuts to cataloged items. Breadcrumbs, highlighting active menu pages,
and proper page titles will make sure that users have a clear sense of what a page is and what it is
not. Thank you pages and error pages will be available when needed, to make certain that
informative feedback is offered to users. The main focus of the navigational process is to assure
that the stakeholders and the users will have easy access to the information offered on the
website.
26
(A visual…)
(Illustrator…)
27
(Noisy Social)
NOTABLE FEATURES:
•Blog Slider in the header
•Introduction Slider under Navigation
28
NOTABLE FEATURES:
•Blog Slider in the header
•Filter for video selections
•Suggested videos
•Dynamically shortened video list
with “Show More” button
(Noisy Social)
29
NOTABLE FEATURES:
•Introduction Header with animated
background and animated boxes
•Suggested Scroll bottom arrow link
in introduction header.
•Scrolling, Sticky Sidebar
(Noisy Social)
30
NOTABLE FEATURES:
•Filter for Video Selections
•Suggested Videos
•Dynamically shortened video
list with “Show More” button
•Scrolling, Sticky Sidebar
(Noisy Social)
31
32
33
Image Citations:
(Arya Yoga…)
(Hammock…)
(Handsome Bare…)
(Harem Pants …)
(LuluLemon-14)
(Kylie & Brandon …)
(NAMASKÁR
BRACELET)
(ON SALE Two …)
(Vira-1-Class)
(Without Fear)
(Yoga Mat Bag…)
(Yoga Silhouettes)
(Yoga-SS)
(Noisy Social)
34
Image Citations:
(Yoga Workout…)
(Yoga SS Abs…)
(Valerie…)
(Yoga 3)
(Yoga 1)
(Disi 3)
(Yoga 4)
(Clasefondo)
(Yoga 6)
(Fondo Yoga)
(Kylie & Brandon …)
(Handsome…)
(LuluLemon-14)
(Yoga-SS)
(Yoga Teacher)
(Noisy Social)
35
Image Citations:
(Google Maps)
(Ladies Night Out)
(Kylie & Brandon …)
(Handsome…)
(LuluLemon-14)
(Yoga Teacher)
(Noisy Social)
36
Works Cited
"A visual vocabulary for describing information architecture and interaction design". Jesse Garrett. JJG.net. 6 March 2002. Web. 5 July
2014. < http://www.jjg.net/ia/visvocab/>
“Arya Yoga Asymmetrical Shorts/ Bikram Yoga Shorts/ Casual Trendy Shorts“. AryaSense. N.d. Digital Image. Web. 10 July 2014.
<https://www.etsy.com/listing/183898433/arya-yoga-asymmetrical-shorts-bikram?ref=related-2>
“Clasefondo”. Unknown. N.d. Digital Image. Web. 11 July 2014. <http://reiki.impactapublicidad.eu/wpcontent/uploads/2014/05/clasefondo.png>
“Disi 3”. Unknown. N.d. Digital Image. Web. 11 July 2014. <http://cms.elle.com.tr/editor/HaberResimleri/00-EBRUKA/di%C5%9Fi-3.jpg>
“Fondo Yoga”. Unknown. N.d. Digital Image. Web. 11 July 2014. < http://puntoverdeleon.com.mx/wpcontent/uploads/2013/09/FondoYoga.jpg>
Forgetting Sarah Marshall. Dir. Nicholas Stoller. Perf. Kristen Bell, Jason Segel, Paul Rudd, Russell Brand. Universal Pictures. 2008.
Film.
Google Maps. Google.com. N.d. Web. 13 July 2014.
“Hammock, yoga props, Yoga sling, Yoga swing, Aerial Yoga, Antigravity Yoga, camping, Aerial silk, Fitness”. MonkeyPodHammocks.
N. d. Digital Image. Web. 10 July 2014. <https://www.etsy.com/listing/186014003/hammock-yoga-props-yoga-sling-yogaswing?ref=sr_gallery_22&ga_search_query=yoga+swing&ga_ship_to=US&ga_search_type=all&ga_view_type=gallery>
“Handsome Bare-Chested Man Doing Yoga”. Ollyy. N.d. Digital Image. Web. 10 July 2014. <http://www.whitehorsedigital.co.uk/wpcontent/uploads/2014/02/shutterstock_87761869.jpg>
“Harem Pants / Baggy Pants / Aladdin Pants / Yoga Pants”. AsianCraftShop. N.d. Digital Image. Web. 10 July 2014.
<https://www.etsy.com/listing/163292305/harem-pants-baggy-pants-aladdin-pants?ref=related-0>
Harry Potter and the Prisoner of Azkaban. Dir. Alfonso Cuarón. Perf. Daniel Radcliffe, Emma Watson, Rupert Grint. Warner Bros, 2004.
Film.
Illustrator EPS file. n.d. EPS File. < http://www.jjg.net/ia/visvocab/files/garrett_ia_aieps.zip>
IMD123 Features Content Table Example 2. n.d. Doc File.
37
“Ladies Night Out”. Unknown. N.d. Digital Image. Web. 12 July 2014. < http://www.balancedlifeyoga.ca/wpcontent/uploads/2013/05/Ladies-Night-007.jpg>
“LuluLemon-14”. Unknown. N.d. Digital Image. Web. 10 July 2014. <http://www.beautyandthedirt.com/wpcontent/uploads/2014/04/etc_lululemon14__01__630x420.jpg
“Kylie & Brandon Sutton Modo Yoga”. Kevin Trowbridge. N.d. Digital Image. Web. 10 July 2014. <http://www.seattleyoganews.com/wpcontent/uploads/2014/05/Kylie-Sutton-Brandon-Sutton-Modo-Yoga-Seattle-Green-Lake1.jpg>
“NAMASKÁR BRACELET”. Yogasmoga.com. N.d. Digital Image. Web. 10 July 2014. <http://yogasmoga.com/women/namaskarbracelet?color=169>
“Noisy Social”. Justin Dawson. EPS File. 25 April 2012. Web. 1 July 2014. < http://dawsoju.deviantart.com/art/Noisy-Social-MediaIcons-298318155>
“ON SALE Two Tone Thai Fisherman Pants Short 3/4 in Olive and Brown, Wide Leg pants, Yoga pants, Maternity pants, Wrap pants,
Unisex pants“. Mathayom8. n.d. Digital Image. Web. 10 July 2014. <https://www.etsy.com/listing/159724042/on-sale-two-tone-thaifishermanpants?ref=sr_gallery_24&ga_search_query=maternity+yoga&ga_ship_to=US&ga_page=2&ga_search_type=all&ga_view_type=gallery
>
Scott Pilgrim Vs The World. Dir.Edgar Wright. Perf. Michael Cera, Mary Elizabeth Winstead, Kieran Culkin. Universal Studios, 2010.
Film.
“Valerie Goodman Yoga Bride”. Unknown. N.d. Digital Image. Web. 11 July 2014. <http://store.aikidojournal.com/wpcontent/themes/shopperpress/thumbs/valerie-goodman-yoga-bridge.jpg>
“Vector Laptop With Keyboard Map 73185 Picture 1” . Pic Ideas. N.d. Vector File. Web. 12 July 2014. <http://www.picideas.net/52458-vectorlaptop-with-keyboard-map/vector-laptop-with-keyboard-map-73185-picture-1>
“Vira-1-Class”. Unknown. N.d. Digital Image. Web. 10 July 2014. <http://prenatalyogacenter.com/blog/wp-content/uploads/2013/01/vira1-class.jpg>
“Without Fear”. chelsealovesyoga.com. N.d. Digital Image. Web. 10 July 2014. <http://www.chelsealovesyoga.com/wpcontent/uploads/2012/09/without-fear.jpg>
“Yoga 1”. Unknown. N.d. Digital Image. Web. 11 July 2014. <http://www.wedress.com.br/image/data/Blog/Yoga/1.jpg>
“Yoga 3”. Unknown. N.d. Digital Image. Web. 11 July 2014. <http://www.wedress.com.br/image/data/Blog/Yoga/3.jpg>
38
“Yoga 4”. Unknown. N.d. Digital Image. Web. 11 July 2014. <http://www.wedress.com.br/image/data/Blog/Yoga/4.jpg>
“Yoga 6”. Unknown. N.d. Digital Image. Web. 11 July 2014. < http://www.wedress.com.br/image/data/Blog/Yoga/6.jpg>
“Yoga Mat Bag, Funky, Organic Leaf Pattern, Purple, 1/8 Thick Yoga Mat, Zipper Pocket, Ready to Ship”. coosNcai. N.d. Digital Image.
Web. 10 July 2014. <https://www.etsy.com/listing/177360281/yoga-mat-bag-funky-organic-leaf-pattern?ref=related-0>
“Yoga Silhouettes”. DownloadFreeVector.com. 23 August 2011. Vector. Web. 10 July 2014. <http://downloadfreevector.com/yogasilhouettes/>
“Yoga-SS”. Unknown. N.d. Digital Image. Web. 10 July 2014. <https://zoograb.com/images/companies/b08c9gXy-ARgf-1I5c-Tm03526ef8yuQQ5l-yoga_ss.jpg>
“Yoga SS Abs 1a”. Unknown. N.d. Digital Image. Web. 11 July 2014.
<http://www.womenshealthmag.com/files/wh6_uploads/images/yoga-ss-abs-1a.jpg>
“Yoga Teacher”. Unknown. N.d. Digital Image. Web. 11 July 2014. < http://teryoga.ru/wp-content/uploads/yoga-teacher.jpg>
“Yoga Workout Halasana”. Unknown. N.d. Digital Image. Web. 11 July 2014.
<http://images.idiva.com/media/photogallery/2012/Mar/yoga_workout_halasana.jpg>
39
40