What do small web design projects and puppies have in common? While both are small and cute, neither should be adopted without planning for their care and feeding. This session will cover a process for how to tackle the planning of smaller departmental websites from user experience, content inventory, and design. Learn how to get runaway projects back on a leash! What you’ll learn: A process, sample documents, and a work breakdown structure for tackling small websites The importance of authoring the user experience

1. Free as in Puppies
Nikki Massaro Kauffman, @nikkimk
The Care & Feeding of “Pet” Web Projects
& kittens
#edui_puppy
^

2. WARNING
The following presentation includes cringe-
worthy anecdotes, mild cursing, and
gratuitous cuteness that some attendees
may find upsetting, adorable, or both.

3. Nikki Massaro
Kauffman
● Manager of
Multimedia
● Front-End Developer
● Educator
● Cat Lady (sort of)

6. The Tail
of the $200
Website
Tale

9. Everyone
wants a
puppy.
website.
Image, https://cdn.pixabay.com/photo/2015/07/31/11/43/rottweiler-869013_960_720.jpg

10. Nobody
wants to take
care of one.
Image, http://maxpixel.freegreatpicture.com/static/photo/1x/Doggo-Dirty-Animal-Dog-Poop-Nature-Canine-Sign-1720673.jpg

11. People Content
Governance Design

12. People Image, https://cdn.pixabay.com/photo/2016/10/27/22/42/dog-1776721_960_720.jpg

13. User
Experience
(UX)
● Primary users
● Secondary users
● Tertiary users
Image, http://maxpixel.freegreatpicture.com/static/photo/1x/Good-Cute-Young-Dog-Face-Dog-Animal-Portrait-2189613.jpg

14. User
Experience
(UX)
● AUG members
● Penn State staff
● Other visitors
Image, http://maxpixel.freegreatpicture.com/static/photo/1x/Good-Cute-Young-Dog-Face-Dog-Animal-Portrait-2189613.jpg

15. Authoring
Experience (AX)
● Contributors
● Authors
● Editors
Image, https://static.pexels.com/photos/26511/pexels-photo-26511.jpg

16. Authoring
Experience (AX)
● AUG members
● AUG committees
● Volunteer editors
Image, https://static.pexels.com/photos/26511/pexels-photo-26511.jpg

17. Empathy Mapping
Speaks
Thinks
Feels
GainsPains
Sees
Image, http://maxpixel.freegreatpicture.com/static/photo/1x/Landscape-Cute-Animal-Puppy-Dog-Domestic-Adorable-1903013.jpg

21. User Stories

22. User Stories
● As __________________,
● I want ______________
● so that ______________.
a dog
ball
I can chase it
Image, http://maxpixel.freegreatpicture.com/static/photo/1x/Cute-Black-Play-Dog-White-Ball-Pet-1583499.jpg

23. User Stories
● As __________________,
● I want ______________
● so that ______________.
Image, http://maxpixel.freegreatpicture.com/static/photo/1x/Cute-Black-Play-Dog-White-Ball-Pet-1583499.jpg
a group member
event info
I can attend

24. More AUG User Story Examples
● As a visitor, I want to join so that I can attend meetings.
● As the AUG web team, we want to post events so that
members know about them.
● As the AUG leadership team, we want to know which
topics interest members, so that we can plan events.

25. People
✓ Identify visitors and authors.
✓ Create empathy maps.
✓ Create user stories.

26. Content https://c1.staticflickr.com/8/7462/15604625407_ce7bc72cfd_b.jpg

27. Content
Inventory
Image, https://c1.staticflickr.com/8/7408/9651668338_f08fc0270d_b.jpg

28. Quick & Dirty Inventory
Type Contains Last
Updated
Author or
Source
Audience
About Us Rich Text Never Leadership Visitors
News Rich Text,
Images
Last month Leadership,
Members
Members,
Visitors
Tips &
Tricks
Rich Text,
Links to
Files
Last week Members Members,
Visitors
https://commons.wikimedia.org/wiki/File:Dog_paw_prints_in_the_sand_-_Lagos_-_The_Algarve,_Portugal_(1470423402).jpg

31. Content
Sorting

32. Content Sorting
1. Color-coded for posts,
pages, & terms.
2. Sort posts & pages.
3. Add in-demand terms
to sort.

33. Project Glossary
Image, “Max the Brown Tabby Cat with Books 2” by Found Animals Foundation https://c1.staticflickr.com/9/8170/8055191654_c93f9c9257_b.jpg

34. A project glossary defines the...
● Content types
● Content components
● Features & functions
● Users
● Systems
Image by LUNARIX-PIX http://flickr.com/photos/31527375@N03/4497531493

35. MicrocopyMenus
Links
Sidebars
Widgets
Name ALL THE THINGS!!!
https://static.pexels.com/photos/12162/Puppy-time-free-license-CC0.jpg

36. Content
✓ Do informal content inventory.
✓ Sort content pages, posts, & terms.
✓ Create project glossary.

37. Design Image, https://cdn.pixabay.com/photo/2016/09/21/07/36/cat-1684255_960_720.jpg

38. The Fluffy Dog Rule:
A fluffy dog is perfect for
you if you’re not the one
who has to vacuum.
Complex HTML & JS
Update it.
^
http://cdn2-www.dogtime.com/assets/uploads/gallery/akita-dogs-and-puppies/akita-dogs-puppies-2.jpg

39. The Fluffy Dog Rule:
● Don’t make contributors
have to know HTML. Use
forms or email.
● Keep HTML for authors
simple and rare.
http://cdn2-www.dogtime.com/assets/uploads/gallery/akita-dogs-and-puppies/akita-dogs-puppies-2.jpg

40. This page requires JS and
CSS. Could authors update it?

41. This form automatically
populates member
directory pages.

42. Content Templates

45. Contributors are answering
questions based on the
templates.

46. Design
✓ Define template types.
✓ Consider forms/email for contributors.
✓ Keep HTML for authors simple & rare.

47. GovernanceImage, http://maxpixel.freegreatpicture.com/static/photo/1x/Black-Dog-Collie-Dog-Harness-Border-Collie-Guide-1888980.jpg

48. Workflows

49. Determine Content
Responsibilities
What? Content type
Who? Contributors, authors, & editors
When? Frequency for new & revised
How? Workflow from contributor to
author to editor to publication

50. Workflows, Schedule & Ownership
Type Updates Contributors Authors Reviewers
About
Us
Yearly Leadership Web team Editor
News Monthly Leadership,
Members
Web team Editor
Tips &
Tricks
Biweekly Members Web team Editor
https://commons.wikimedia.org/wiki/File:Dog_paw_prints_in_the_sand_-_Lagos_-_The_Algarve,_Portugal_(1470423402).jpg

51. Documentation & Training

52. Documentation & Training
● Who updates what?
● When do we update it?
● How do we update it?

53. How do we
update our
content?
Who
updates
what?
When do
we
update
it?

56. Metrics &
Iteration

57. Metrics & Iteration
● What does success look like?
● How will success be measured (user
testing & analytics)?
● How often will metrics be reviewed?
● How will we use metrics to improve?

58. Yearly Website Goals Measurement
Increase meeting attendance
by 15%.
Taking attendance at
meetings.
Increase access to shared
resources by 20%.
Web analytics on
resource pages.
Get 10 more tip contributions
from members.
Counting entries for
contributions form.
Increase the number of satisfied
& extremely satisfied members
by 10%.
Annual member
survey data.

59. Governance
✓ Identify content workflows, schedules
and ownership.
✓ Create documentation & training.
✓ Define success & establish metrics.

60. Summary
✓ Identify people.
✓ Inventory content.
✓ Design templates.
✓ Establish governance.

62. Questions
nikkimk@psu.edu