Published on February 23, 2014
PPBA Puppy Parenting Baedeker Alliance Information Design Strategy IMD 320 February 14, 2014
(3) Assets table (18) Stakeholder “herstory” (4) Architecture Map (19) Stakeholder objectives (5) Wireframes (20) Stakeholder goals (6) Styles Guide (21) User demographic (7) Mockups (25) User personas (8) References (28) User scenario (11) Contact information (29) Functional content specs (12) Features table (17) TABLE OF CONTENTS Stakeholder identification
STAKEHOLDERS Stacy Brady (center) and her two adopted daughters, Iris and Cecelia Website design staff, and any outside consultants.
Stacy gained her knowledge of canines through 10 years experience as a veterinarian and her husband owns a dog training facility in California. Their daughters often get questions from their friends in the neighborhood and at school about caring for a new puppy. The constant interest showed that creation of an online source of information was urgently needed. HISTORY If not for the vision of her two daughters, the Brady’s would not have the determination to create a website. With the new technology so wide spread and so many animal shelters full of dogs, why not make it easier for eager new puppy parents to learn everything they need to know. What they see on the web now is only schools for dogs to be trained.
Provide secure login and preserve user progress Use multimedia to provide an engaging experience: animation, audio, etc. OBJECTIVES Train people how to care for puppies!
The site needs to provide enough information for the user to feel comfortable and confident in their parenting skills. The site should provide various levels of knowledge so that users are not limited to the basics and do not leave feeling shortchanged. The site should provide a rewarding experience by providing a certificate of completion at the end. The site will also include retail for puppy accessories so users do not have to leave the GOALS The site would need to attract first time dog owner, particularly puppy parents.
USER DEMOGRAPHICS Age: Child – Adult Gender: Male or Female Education: Elementary – College and beyond Computer Experience: Intermediate level user; no programming knowledge needed Previous knowledge of the subject matter: None Functionality: Present the information in a fun way. Make it easy to understand and remember. No information overload
Scenario Scenario: Elma went to the PetSmart website to research how much items cost for a new puppy. She saw an ad for free Puppy Parenting tutorial for new parents. She clicked the link/ ad and it brought her to the website. She explored the home page and found that the site was free for the first two levels of the course. She could sign in with her current Facebook or Google+ account. After logging in, she was given a random account ID and began to watch the instructional animation. The course had a delightful map resembling a dog park; as Elma progressed past the first lesson, she received a virtual doggie treat for her success. Also, the second spot on the map lit up showing that she was now able to move forward. The game-like feel aroused her interest and made her want to continue!
FUNCTIONAL CONTENT SPECIFICATIONS FOR PUPPY PARENTING
1 HEADER . SPECIFICATIONS The header will have a background png image that spans the full width of the screen. The image will be centered and repeat along the x-axis. It will be 80 pixels in height and at top. Within that header will be the site logo (left aligned). Login button and language selector are aligned right, all sitting within a responsive full-width framework. Puppy parent trainees will be able to save their work/progress. The login process will be done with a Facebook or Google+ account. This saves the verification process, since these organizations have already done that. After the initial social connection, an alternate username and id will be generated. Below the header, a slideshow will display some of the site features and some images will have buttons within the slide that the user can click to go directly to the feature that interests them.
2 NAVIGATION . SPECIFICATIONS Below the slideshow will rest the main navigation. Although it is below the slider at first, the navigation is sticky so that when scrolling below the fold, the navigation will remain at the top of the page. The navigation consists of All; Pix (pictures); Videos; Shop; and Course Map. Navigation is horizontal in bold, black text. Active or selected navigation will be highlighted in our custom orange while text color is bone-white.
3 CONTENT . SPECIFICATIONS Below the navigation will be various modules or <divs> of one of three sizes. It will look like a grid layout. Each module will contain images representing different courses within the puppy parenting course, images from the gallery, or different products puppy parents may find of interest (to buy). Each module/div will have a description below, just in case the image does not speak for itself. Also an icon will let the user know which menu category the modules coordinate.
4 FOOTER . SPECIFICATIONS The footer will be small. It will contain the information and help links, social networking links, and site copyright information.
REFERENCES "Chelsea Dresser." Flickr. Yahoo!, n.d. Web. 7 Feb. 2014. <http://www.flickr.com/photos/orangesugar/4720837321/in/photostream/>. "Dog House 8." Flickr. Yahoo!, n.d. Web. 7 Feb. 2014. "Dog House 8." Flickr. Yahoo!, n.d. Web. 7 Feb. 2014. <http://www.flickr.com/photos/netherlandart/5680484484/in/photostream/>. "Estate Sale Finds." Flickr. Yahoo!, n.d. Web. 7 Feb. 2014. "Henry." Flickr. Yahoo!, 25 Aug. 2009. Web. 7 Feb. 2014. <http://www.flickr.com/photos/13895571%40N04/3776742127/in/photostream/>. "Pike's Bed." Flickr. Yahoo!, n.d. Web. 14 Feb. 2014.
ANGELA Y SMITHERS firstname.lastname@example.org me
... professional web designers take advantage of mockup tools to analyze ... Invision is another online tool aimed at helping you design, ...
This comprehensive guide to mockups in web design explains ... spent with ample planning, ... information about mockup in web design, ...
The website wireframe connects the underlying ... Information design is the presentation—placement and prioritization of information ... Web design ...
With a mock building tool can greatly reduce the planning time and get a clear picture of what information will be needed on each page. Here are a few of them:
... choosing to proceed from the information architecture and design brief ... conceptual site planning the ... designer design a mockup site ...
Learning how to make a website mockup is key to ... beginning to design your website mockup. The planning stage is the ... WEB DESIGN SERVICES MARKETING ...
Some of these prototyping tools for web design ... http://makiapp.com/ – A free web design mockup ... Information Architecture and Usability » Web ...
Transform your Web & Mobile (iOS, Android) designs into clickable, ... and that's where InVision helps." Joshua Taylor, Design Director at Evernote ...
Your whole team can come together around the right design using ... Praise for Balsamiq Mockups. ... hands-down over-the-top new favorite mockup tool is ...
Jumpchart takes the pain out of website planning. Jumpchart gets all of your website ... Information Architects love it because it ... Track design ...