1 (Vira-1-Class). 2 Stakeholder Overview...

1

(Vira-1-Class)

2

• 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 ……………………………………………..



• Style Guide ……………………………………………………………………….

• Homepage Mockup ………………………………………………………….

• Online Classes Mockup …………………………………………………….

• Contact Mockup ……………………………………………………………….

• Citations ……………………………………………………………………………

• Contact ……………………………………………………………………………..

34567891011131415212628293031323435363740

3

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.

4

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.

6

(Scott Pilgrim....)

7

(Harry Potter..)

8

(Forgetting Sarah...)

9

(Vector Laptop…)(Vira-1-Class)(Yoga Silhouettes)

11

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.

HOME PAGE

12

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.

13

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”.

14

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.

15

Project Feature

How will the feature be implemented

What concerns do we have about this feature

Content

Header Introduction

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.

Animated section may “slow” website load time.

CSS, HTML Coding, and video, JavaScript.

Animated boxes

Will be used in the introduction header. Boxes will appear one at 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.

Animated section may “slow” website load time.

CSS, Link, jpg.

Features Table

16

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 website. Interaction with user through clicking on section of navigation user would like to visit.

Navigation links need to fit in area and stay readable and attractive.

Links

Search Box / Search Button

Used to search site for particular information. Interaction with user through typing in requested information and clicking on the search button.

Hover effect should be clear.

CSS, HTML Coding, and JavaScript.

Sign In Used to sign in or register for full website access. Interaction with user through typing in login and password and clicking on links.

Hover effect should be clear and not easily missed. Privacy and protection should be ensured.


Features Table Continued

17


Footer Navigation

Used to navigate website. Interaction with user through clicking on section of navigation user would like to visit.

Links

Call to Action Button

Will be used to showcase a link to 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

18

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.


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.

CSS, Link

Submit Button

Link to send message to Breathe's email address.

CSS, HTML


19


Video Filter Used to filter videos shown in the video list. Interaction with user through selected from dropdown fields and check boxes.

Videos will need to be tagged properly.


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.


Video description box

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.

CSS, Link

20


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.

It should be clear to the user how to close the video when it is opened.

CSS, JS, and FLV.

Show More Button

Will be used to show 2- 3 more rows of video if clicked on.

CSS, Link

Bread-crumbs

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…)

21

Contents TableAsset Format Description Associated

Assets/Media (if any)

Other Information

Animated Background

Video Background image for Introduction header on Homepage

CSS, HTML, Javascript

Animated box Links

Jpeg, Text Boxes used to promote important pages, located in the Interlocution Header on the Homepage

CSS, HTML, Javascript

Box area should be linked to associated page.

Featured Blog Image

Image/png Featured image for Blog Post.

CSS and Javascript

Image should be linked to associated blog article

22


Article Header text Display article heading in Sidebar

CSS Text should link to associated blog article

Big Logo Image / Vector

Breath Logo. Will be used in Introduction Header.

CSS

Logo Image/ Vector Breathe logo. Will be used throughout website in header and footer.

CSS Logo should link to home page.

Search Icon Image/ Png Search icon used in sidebar and global navigation bar.

CSS

Box Image/ PNG Box used for type fields

CSS Will be used for search box and user /password boxes.

SIGN IN Text Text used in header for sign in box

CSS

23


Call to Action Text

Text Text used in Call to Action area

CSS

Call to Action Button

Button Button used to link to Contact Page in Call to Action area

CSS

About Us Background

Image

Image/JPEG Image used in background of About Us section.

CSS

About Us Text Text Text used in the About Us section

CSS

Featured Items Thumbnails

Image/JPEG Images of featured items used in Featured Items section.

CSS Images will be used for Shop Post. Images will need to be cropped or resized without losing quality.

Featured Items Header

Text Header text used for Featured Items

CSS

24


Facebook Icon Image/PNG Icon for Facebook links.

CSS

Twitter icon Image/PNG Icon for Twitter Links

CSS

LinkedIn Icon Image/PNG Icon for LinkedIn links

CSS

RSS FEED Icon Image/PNG Icon for RSS Feed links

CSS

Google+ Icon Image/PNG Icon for Google+ links

CSS

Copyright Text Text Text for Copyright information

CSS

Page Title Text Page title text CSSFilter Text Text Text used in Filter CSS

Video Thumbnails

Image/JPEG Thumbnail images used for videos

CSS

Video title Text Title for each video CSSCheckbox Image/PNG Filter checkbox CSS

Video description

Text Short description for each video

CSS

25


Videos Video Videos of online classes

HTML, CSS

Show More Button

Button Button to show 3 more rows of video

CSS

Page Title Text Page Title textLocation

DescriptionText Short Description

about Breathe and their location.

Map Image/JPEG Map to Breathe's location

Business Info Text Business InfoImage of Breathe

Image/ JPEG Image of Breathe

Social Media Icons

Image/PNG Social Media Icons

Text Field Box Image/PNG Box for text field used in Contact Form

Submit Button Button Submit Button used for sending message to Breathe

(IMD123…)

26

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.

27(A visual…)(Illustrator…)

28

NOTABLE FEATURES:

•Blog Slider in the header•Introduction Slider under Navigation

(Noisy Social)

29

NOTABLE FEATURES:

•Blog Slider in the header•Filter for video selections•Suggested videos•Dynamically shortened video list with “Show More” button

(Noisy Social)

30

NOTABLE FEATURES:

•Introduction Header with animated background and animated boxes•Suggested Scroll bottom arrow link in introduction header.•Scrolling, Sticky Sidebar

(Noisy Social)

31

NOTABLE FEATURES:

•Filter for Video Selections•Suggested Videos•Dynamically shortened video list with “Show More” button•Scrolling, Sticky Sidebar

(Noisy Social)

34

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)

35

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)

36

Image Citations:(Google Maps)(Ladies Night Out)(Kylie & Brandon …)(Handsome…)(LuluLemon-14)(Yoga Teacher)(Noisy Social)

37

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/wp-content/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/wp-content/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-yoga-swing?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/wp-content/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.

38

“Ladies Night Out”. Unknown. N.d. Digital Image. Web. 12 July 2014. < http://www.balancedlifeyoga.ca/wp-content/uploads/2013/05/Ladies-Night-007.jpg>

“LuluLemon-14”. Unknown. N.d. Digital Image. Web. 10 July 2014. <http://www.beautyandthedirt.com/wp-content/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/wp-content/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/namaskar-bracelet?color=169>

“Noisy Social”. Justin Dawson. EPS File. 25 April 2012. Web. 1 July 2014. < http://dawsoju.deviantart.com/art/Noisy-Social-Media-Icons-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-thai-fisherman-pants?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/wp-content/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-vector-laptop-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/vira-1-class.jpg>

“Without Fear”. chelsealovesyoga.com. N.d. Digital Image. Web. 10 July 2014. <http://www.chelsealovesyoga.com/wp-content/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>


39


“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/yoga-silhouettes/>

“Yoga-SS”. Unknown. N.d. Digital Image. Web. 10 July 2014. <https://zoograb.com/images/companies/b08c9gXy-ARgf-1I5c-Tm03-526ef8yuQQ5l-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>

1 (Vira-1-Class). 2 Stakeholder Overview...

Documents

Transcript of 1 (Vira-1-Class). 2 Stakeholder Overview...