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
USER PERSONA
USER PERSONA
USER PERSONA
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.
Project Feature

Header Logo

Slideshow buttons

How will the feature be
implemented?

The site logo will be located
at the very top of every
none
page. It is a quick link to
the home page.
When each slide changes, it If scripting is disabled then
will have a custom designed
the slideshow will not
button that will navigate to function, but a default image
related information.
will display instead.
Buttons such as Facebook
icon, google+ icon

Social media buttons

Login

Main navigation

none

Clicking the login will cause
a pop-in window to display
If the user is not ‘social’,
that contains buttons login
a login cannot be created.
with either Facebook or
Google+ ( or other )

Progress Map

Lessons

Products

Videos
none

Pictures


Modules

What are concerns about the
feature?

Content

Png image of the brand logo

HTML, Javascript, Jquery
Jpeg images, png or gif
button images
HTML and CSS

Facebook API, Google API,
other social media API

HTML, CSS, PHP

Hangulga (to translate
the site to another
language)
Rounded boxes will display
images with text below

Direct links to lessons and
progress map must be disabled
for users who are not logged

Images, html, css, php
Asset
Logo
Menu

Format
Png
Text

Description
n/a
Bold, dark
Bold, minimum
1.3em

Text

Web safe font

Slideshow

Jpeg or other web
format images

Full page width

Jquery or Javascript
With html and css

Module images

Jpeg or png

Various sizes

Html, css

Icons

Standard icons,
custom colored

Videos

Embedded from
YouTube

Other Info

Html, css

Image
manipulation
software and open
source files

Circular with the
corresponding
pictogram within it

Standard media
player

Coding
Html, css
Html, css

Html, css
Info
Architecture
WIREFRAMES
STYLE GUIDE
MOCKUPS
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
aysdesign@stu.aii.edu

me

Information Design Web Planning Mockup

  • 1.
    PPBA Puppy Parenting BaedekerAlliance Information Design Strategy IMD 320 February 14, 2014
  • 2.
    (3)  Assetstable (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
  • 3.
    STAKEHOLDERS Stacy Brady (center)and her two adopted daughters, Iris and Cecelia Website design staff, and any outside consultants.
  • 4.
     Stacy gainedher 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.
  • 5.
     Provide securelogin and preserve user progress  Use multimedia to provide an engaging experience: animation, audio, etc. OBJECTIVES  Train people how to care for puppies!
  • 6.
     The siteneeds 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.
  • 7.
    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
  • 8.
  • 9.
  • 10.
  • 11.
    Scenario Scenario: Elma wentto 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!
  • 12.
  • 13.
    1 HEADER . SPECIFICATIONS The header willhave 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.
  • 14.
    2 NAVIGATION . SPECIFICATIONS Below the slideshowwill 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.
  • 15.
    3 CONTENT . SPECIFICATIONS Below the navigationwill 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.
  • 16.
    4 FOOTER . SPECIFICATIONS The footer willbe small. It will contain the information and help links, social networking links, and site copyright information.
  • 17.
    Project Feature Header Logo Slideshowbuttons How will the feature be implemented? The site logo will be located at the very top of every none page. It is a quick link to the home page. When each slide changes, it If scripting is disabled then will have a custom designed the slideshow will not button that will navigate to function, but a default image related information. will display instead. Buttons such as Facebook icon, google+ icon Social media buttons Login Main navigation none Clicking the login will cause a pop-in window to display If the user is not ‘social’, that contains buttons login a login cannot be created. with either Facebook or Google+ ( or other )  Progress Map  Lessons  Products  Videos none  Pictures  Modules What are concerns about the feature? Content Png image of the brand logo HTML, Javascript, Jquery Jpeg images, png or gif button images HTML and CSS Facebook API, Google API, other social media API HTML, CSS, PHP Hangulga (to translate the site to another language) Rounded boxes will display images with text below Direct links to lessons and progress map must be disabled for users who are not logged Images, html, css, php
  • 18.
    Asset Logo Menu Format Png Text Description n/a Bold, dark Bold, minimum 1.3em Text Websafe font Slideshow Jpeg or other web format images Full page width Jquery or Javascript With html and css Module images Jpeg or png Various sizes Html, css Icons Standard icons, custom colored Videos Embedded from YouTube Other Info Html, css Image manipulation software and open source files Circular with the corresponding pictogram within it Standard media player Coding Html, css Html, css Html, css
  • 19.
  • 20.
  • 21.
  • 25.
  • 28.
    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.
  • 29.