information design web planning mockup
DESCRIPTION
course work. project to present style guide and mockup to fictional client as a proposal to develop a website.TRANSCRIPT
PPBA
Puppy Parenting Baedeker AllianceInformation Design Strategy
IMD 320February 14, 2014
TA
BL
E O
F C
ON
TE
NT
S Stakeholder identification (3)
Stakeholder “herstory” (4)
Stakeholder objectives (5)
Stakeholder goals (6)
User demographic (7)
User personas (8)
User scenario (11)
Functional content specs (12)
Features table (17)
Assets table (18)
Architecture Map (19)
Wireframes (20)
Styles Guide (21)
Mockups (25)
References (28)
Contact information (29)
STAKEHOLDERS
Stacy Brady (center) and her two
adopted daughters, Iris and Cecelia
Website design staff, and any
outside consultants.
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.
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.
OBJECTIVES
Train people how to care for puppies!
Provide secure login and preserve user
progress
Use multimedia to provide an engaging
experience: animation, audio, etc.
GOALS
The site would need to attract first time dog
owner, particularly puppy parents.
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 short-
changed.
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
site.
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!
FUNCTIONALCONTENTSPECIFICATIONS
FOR
PUPPY PARENTING
HEADERSPECIFICATIONS
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.
1.
NAVIGATION SPECIFICATIONSBelow 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.
2.
CONTENTSPECIFICATIONSBelow 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.
3.
FOOTERSPECIFICATIONSThe footer will be small. It will contain the
information and help links, social networking
links, and site copyright information.
4.
Project FeatureHow will the feature be
implemented?
What are concerns about the
feature?Content
Header Logo
The site logo will be located
at the very top of every
page. It is a quick link to
the home page.
none Png image of the brand logo
Slideshow buttons
When each slide changes, it
will have a custom designed
button that will navigate to
related information.
If scripting is disabled then
the slideshow will not
function, but a default image
will display instead.
HTML, Javascript, Jquery
Jpeg images, png or gif
button images
Social media buttonsButtons such as Facebook
icon, google+ iconnone HTML and CSS
Login
Clicking the login will cause
a pop-in window to display
that contains buttons login
with either Facebook or
Google+ ( or other )
If the user is not ‘social’,
a login cannot be created.
Facebook API, Google API,
other social media API
Main navigation
Progress Map
Lessons
Products
Videos
Pictures
Hangulga (to translate
the site to another
language)
none HTML, CSS, PHP
ModulesRounded boxes will display
images with text below
Direct links to lessons and
progress map must be disabled
for users who are not logged
in.
Images, html, css, php
Asset Format Description Coding Other Info
Logo Png n/a Html, css
Menu Text Bold, dark Html, css
Text Web safe fontBold, minimum
1.3emHtml, css
SlideshowJpeg or other web
format imagesFull page width
Jquery or Javascript
With html and css
Module images Jpeg or png Various sizes Html, css
IconsStandard icons,
custom colored
Circular with the
corresponding
pictogram within it
Image
manipulation
software and open
source files
VideosStandard media
player
Embedded from
YouTubeHtml, 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.
