Mapping Your Way To Site Success: Site Plans for Proj
1. Mapping Your Way To Site
Success:
Site Plans for Sites at Every Level of
Development, from Idea to Postlaunch
Lisa Williams
lisa@placeblogger.com
placeblogger
4. Lisa on LinkedIn:
linkedin.com/in/lisawilliams
Lisa on Twitter:
@lisawilliams
I am learning to love Facebook, so
friend me I need the support to
stick with it
placeblogger
5. Who this is for
• Non-programmers who want to build a new website or
add features to/extend an existing website
• Project leaders who will be working with others on
their team to set up and run a website and web
strategy for a project
• Site editors and admins who have a day-to-day role in
building and running a community information project.
• If you ever want to step up to design, launch and run
another project.
• This was originally prepared to share with project
leaders for Knight Community Information Challenge
projects. For info on how you can get funding for your
project, see infoneeds.org
6. Phase 1 Write a Site Plan
Planning for Success
Phase 2 Define roles to build out your team and begin recruiting and
Teambuilding networking. Let others read appropriate parts of your site
plan.
Phase 3 Technical development on your project begins. Begin writing
Site Development your Launch, Social Media, Content, and Metrics plans!
Phase 4 Launch! Use your launch plan to have a great Day One. Keep
Launch a log of the first day, and begin a bug tracker.
Phase 5 Start writing down your performance against operational
Operations goals – are you getting the number of posts you want per day?
Comments? Twitter followers?
Phase 6 What are your standards and goals for community building?
Community building What are you doing each day to interact with your
community, on your site and elsewhere? What about in-
person, one on one and events?
8. Because if you tell a developer
Or an editor, or a journalist, or a
volunteer…
placeblogger
9. “I want a site with citizen journalism
where local businesses can buy their
own ads and I want people to blog but
I want to be sure that nothing gets
onto the front page that we don’t
want there and oh we want our twitter
feed to appear somewhere and we
need to link our Facebook fan page
and we want people to be able to rate
comments and share links and upload
photos and maybe we need something
that works on mobile phones…”
10.
11. You won’t get the site you want.
You’ll get whatever the developer
feels like giving you.
placeblogger
12. Resistance to writing things
down
I haven’t convinced many people to
write site plans
But the ones I have convinced aren’t
driven crazy and their projects succeed
placeblogger
13. Not writing a site plan
• Is the single biggest risk you can take with your
project.
• Is entirely unnecessary.
• Keeps you from really digging into your project
and finding out what it’s about – writing a site
plan is about THINKING IT THROUGH and
DISCOVERY.
• Keeps you from building the kind of project
momentum that is crucial in winning over board
members, community organizations, partners,
and volunteers.
14. Without a site plan you can only
succeed by accident
Succeeding on purpose is SO much
more fun. Here’s how.
placeblogger
15. Entry points
• Pitch
• Team Bios/Project Inspiration
• Influences
• User Stories
• Tree Diagram/Sitemap
• Wireframes
• Feature List
16. Write a pitch
One sentence that describes your
project in a clear, concise, and
compelling way.
placeblogger
17. Team Bios/Project Inspiration
Developers want to know who
they’ll be working with, and why
this project is cool and important
placeblogger
18. Influences
List other websites that have been influential
in your thinking about your project as well as
sites you use everyday, and sites whose
design you like
placeblogger
19. User Stories
3-4 one paragraph descriptions of
typical users of your site, why they
come there, why they’d stay
placeblogger
20. Tree Diagram/Sitemap
A tree diagram showing your main page
and the major landing pages of your
site (don’t forget admin pages!)
placeblogger
21. Feature List
The big long list of features. Some people
start with the list and then do wireframes,
others do wireframes first and then list
everything you can click on and write down
what it does.
placeblogger
23. What is a wireframe?
• A wireframe is a grid with boxes suggesting the layout of
a web page.
• Inside each grid is a UI element called a “design pattern.”
• We encounter familiar design patterns on the web every
day:
• Search bar, calendar picker, search results, tabs, login
box.
• You can present the same data in different ways – stories
could be in a list or in a carousel (one story is shown,
with left and right buttons to scroll through stories)
24. I ♥ Wireframes
They give you an excuse to go out
and buy cool office supplies
placeblogger
25. Chopin Liszt
• Gridded paper 11X17 (Staples sells them)
• Mechanical pencils
• Package of fine-line multicolored pens
• Twizzlers
• Diet Coke
26. UI pattern sites show you examples of
common web design patterns
27. QUICK GET A PEN!
• UI-patterns.com
• UIPatternFactory.com
• Welie.com/Patterns
• Yahoo! Design Library
• Flickr.com/groups/ilovewireframes
• Share back – put your wireframes and
design patterns out there
36. Accessories for the fashionable site plan
• Launch plan – what will you do on Day One?
• Content plan (how many items per day, what
type, how many tweets, FB posts, who will do
what)
• Metrics plan (you should share this with your
developer up front so they can build in whatever
analytics you’ll be using)
• Support/Operations How often do you back up?
Who removes spam? Who moderates content on
what days of the week? Etc.
37. Resources
• “Painless Functional Specifications,” by Joel
Spolsky (READ THIS IT’S GREAT)
• Original site plan for Placeblogger (14 pages
plus 8 wireframes)
38. Thanks!
Lisa Williams
lisa@placeblogger.com
twitter.com/lisawilliams
placeblogger
