1 / 40

(Vira-1-Class)

(Vira-1-Class). Stakeholder Overview ……………………………………………………… User Demographics and Needs Assessment ……………………. User Preferred Features …………………………………………………… User Persona 1 ………………………………………………………………… User Persona 2 ………………………………………………………………… User Persona 3 …………………………………………………………………

damian-lott
Télécharger la présentation

(Vira-1-Class)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 …………………………………………….. • Homepage Wireframe 2 …………………………………………………… • Homepage Wireframe 2 …………………………………………………… • Style Guide ………………………………………………………………………. • Homepage Mockup …………………………………………………………. • Online Classes Mockup ……………………………………………………. • Contact Mockup ………………………………………………………………. • Citations …………………………………………………………………………… • Contact …………………………………………………………………………….. 3 4 5 6 7 8 9 10 11 13 14 15 21 26 28 29 30 31 32 34 35 36 37 40

  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'sclients 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.

  5. (Scott Pilgrim....)

  6. (Harry Potter..)

  7. (Forgetting Sarah...)

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

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

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

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

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

  13. Features Table

  14. Features Table Continued

  15. Features Table Continued

  16. Features Table Continued

  17. Features Table Continued

  18. Features Table Continued (IMD123…)

  19. Contents Table

  20. Features Table Continued

  21. Features Table Continued

  22. Features Table Continued

  23. Features Table Continued (IMD123…)

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

  25. (A visual…) (Illustrator…)

  26. (Noisy Social) • NOTABLE FEATURES: • Blog Slider in the header • Introduction Slider under Navigation

  27. NOTABLE FEATURES: • Blog Slider in the header • Filter for video selections • Suggested videos • Dynamically shortened video list with “Show More” button (Noisy Social)

  28. NOTABLE FEATURES: • Introduction Header with animated background and animated boxes • Suggested Scroll bottom arrow link in introduction header. • Scrolling, Sticky Sidebar (Noisy Social)

  29. NOTABLE FEATURES: • Filter for Video Selections • Suggested Videos • Dynamically shortened video list with “Show More” button • Scrolling, Sticky Sidebar (Noisy Social)

  30. 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)

  31. 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)

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

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

  34. “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> “Yoga 3”. Unknown. N.d. Digital Image. Web. 11 July 2014. <http://www.wedress.com.br/image/data/Blog/Yoga/3.jpg>

  35. “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/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>

More Related