mapping your way to site success: site plans for proj

38
placeblogger Mapping Your Way To Site Success: Site Plans for Sites at Every Level of Development, from Idea to Postlaunch Lisa Williams [email protected]

Upload: lisa-williams

Post on 27-Jan-2015

113 views

Category:

Documents


4 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Mapping Your Way To Site Success: Site Plans for Proj

placeblogger

Mapping Your Way To Site Success:

Site Plans for Sites at Every Level of

Development, from Idea to Postlaunch

Lisa Williams

[email protected]

Page 2: Mapping Your Way To Site Success: Site Plans for Proj

Screenshot of Placeblogger

Page 3: Mapping Your Way To Site Success: Site Plans for Proj

Placeblogger World HQ!(now with free coffee)

Cambridge, MA

Page 4: Mapping Your Way To Site Success: Site Plans for Proj

placeblogger

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

Page 5: Mapping Your Way To Site Success: Site Plans for Proj

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

Page 6: Mapping Your Way To Site Success: Site Plans for Proj

Start writing down your performance against operational

goals – are you getting the number of posts you want per day?

Comments? Twitter followers?

Phase 5

Operations

Launch! Use your launch plan to have a great Day One. Keep

a log of the first day, and begin a bug tracker.

Phase 4

Launch

Technical development on your project begins. Begin writing

your Launch, Social Media, Content, and Metrics plans!

Phase 3

Site Development

What are your standards and goals for 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?

Phase 6

Community building

Define roles to build out your team and begin recruiting and

networking. Let others read appropriate parts of your site

plan.

Phase 2

Teambuilding

Write a Site PlanPhase 1

Planning for Success

Page 7: Mapping Your Way To Site Success: Site Plans for Proj

placeblogger

Why have a site plan?

Page 8: Mapping Your Way To Site Success: Site Plans for Proj

placeblogger

Because if you tell a developer

Or an editor, or a journalist, or a

volunteer…

Page 9: Mapping Your Way To Site Success: Site Plans for Proj

“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…”

Page 10: Mapping Your Way To Site Success: Site Plans for Proj
Page 11: Mapping Your Way To Site Success: Site Plans for Proj

placeblogger

You won’t get the site you want.

You’ll get whatever the developer

feels like giving you.

Page 12: Mapping Your Way To Site Success: Site Plans for Proj

placeblogger

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

Page 13: Mapping Your Way To Site Success: Site Plans for Proj

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.

Page 14: Mapping Your Way To Site Success: Site Plans for Proj

placeblogger

Without a site plan you can only succeed by accident

Succeeding on purpose is SO much

more fun. Here’s how.

Page 15: Mapping Your Way To Site Success: Site Plans for Proj

Entry points

• Pitch

• Team Bios/Project Inspiration

• Influences

• User Stories

• Tree Diagram/Sitemap

• Wireframes

• Feature List

Page 16: Mapping Your Way To Site Success: Site Plans for Proj

placeblogger

Write a pitch

One sentence that describes your

project in a clear, concise, and

compelling way.

Page 17: Mapping Your Way To Site Success: Site Plans for Proj

placeblogger

Team Bios/Project Inspiration

Developers want to know who

they’ll be working with, and why

this project is cool and important

Page 18: Mapping Your Way To Site Success: Site Plans for Proj

placeblogger

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

Page 19: Mapping Your Way To Site Success: Site Plans for Proj

placeblogger

User Stories

3-4 one paragraph descriptions of

typical users of your site, why they

come there, why they’d stay

Page 20: Mapping Your Way To Site Success: Site Plans for Proj

placeblogger

Tree Diagram/Sitemap

A tree diagram showing your main page

and the major landing pages of your

site (don’t forget admin pages!)

Page 21: Mapping Your Way To Site Success: Site Plans for Proj

placeblogger

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.

Page 22: Mapping Your Way To Site Success: Site Plans for Proj

placeblogger

Wireframes

Simple sketches of the front page

and landing pages on your site

Page 23: Mapping Your Way To Site Success: Site Plans for Proj

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)

Page 24: Mapping Your Way To Site Success: Site Plans for Proj

placeblogger

I ♥Wireframes

They give you an excuse to go out

and buy cool office supplies

Page 25: Mapping Your Way To Site Success: Site Plans for Proj

Chopin Liszt

• Gridded paper 11X17 (Staples sells them)

• Mechanical pencils

• Package of fine-line multicolored pens

• Twizzlers

• Diet Coke

Page 26: Mapping Your Way To Site Success: Site Plans for Proj

UI pattern sites show you examples of common web design patterns

Page 27: Mapping Your Way To Site Success: Site Plans for Proj

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

Page 28: Mapping Your Way To Site Success: Site Plans for Proj
Page 29: Mapping Your Way To Site Success: Site Plans for Proj
Page 30: Mapping Your Way To Site Success: Site Plans for Proj
Page 31: Mapping Your Way To Site Success: Site Plans for Proj

placeblogger

Placeblogger’s original site plan was 14 pages long and had 8

wireframes

Page 32: Mapping Your Way To Site Success: Site Plans for Proj
Page 33: Mapping Your Way To Site Success: Site Plans for Proj

Hang it on the wall

and back up

Page 34: Mapping Your Way To Site Success: Site Plans for Proj
Page 35: Mapping Your Way To Site Success: Site Plans for Proj

Screenshot of Placeblogger

Page 36: Mapping Your Way To Site Success: Site Plans for Proj

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.

Page 37: Mapping Your Way To Site Success: Site Plans for Proj

Resources

• “Painless Functional Specifications,” by Joel

Spolsky (READ THIS IT’S GREAT)

• Original site plan for Placeblogger (14 pages

plus 8 wireframes)

Page 38: Mapping Your Way To Site Success: Site Plans for Proj

placeblogger

Thanks!

Lisa Williams

[email protected]

twitter.com/lisawilliams