Effective Website Planning | PodCamp Toronto 2013

HASHTAG #WPTO ON TWITTER

Toro

nto

Wor

dPre

ss G

roup

Effective Website PlanningToronto WordPress Group @ Podcamp Toronto 2013February 23, 2013

Feb

ruar

y 23

, 201

3


Toro

nto

Wor

dPre

ss G

roup

Introduction• Andy McIlwain (@andymci)

• Sales & Marketing, Kobayashi Online

• Account Management, WordPress Training, Customer Support

• Organizer, Toronto WordPress Group, Toronto WordPress Developers Group, WordCamp TO

• WordPress Advocate, Website Administrator, Web Enthusiast

Feb

ruar

y 23

, 201

3


Toro

nto

Wor

dPre

ss G

roup

What are we talking about?

Feb

ruar

y 23

, 201

3


Toro

nto

Wor

dPre

ss G

roup

Planning your Website• On the fly? It works sometimes.

• Define in advance for accountability & timeliness.

• Create something tangible to present.

Feb

ruar

y 23

, 201

3


Toro

nto

Wor

dPre

ss G

roupStep 1: Mapping

Visualize your plan.

Feb

ruar

y 23

, 201

3


Toro

nto

Wor

dPre

ss G

roup

Map it out!• One of the best things taught in elementary school.

• Example: Creating a story. What’s involved?

• Visual aid helps communicate your ideas.

Feb

ruar

y 23

, 201

3


Toro

nto

Wor

dPre

ss G

roup

Mapping your Website• Three Things: Design, Features, Content

• Design: What does it look like?

• Features: What can you do on your website?

• Content: What pages, categories, images, videos, etc...?

Feb

ruar

y 23

, 201

3


Toro

nto

Wor

dPre

ss G

roup

Example: A Standard Small Business Site Design

• Clean• Blues & Whites

Features• Forms• Sharing Buttons

Content

• About• Services• Contact• Testimonials• Blog

A (very) generic example of what a small business site might include.

Feb

ruar

y 23

, 201

3


Toro

nto

Wor

dPre

ss G

roup

Some tools to help you…• MindMeister.com

• Text2Mindmap.com

• Bubbl.us

• Draw (Google Docs)

• SmartArt (MS Office)

Feb

ruar

y 23

, 201

3


Toro

nto

Wor

dPre

ss G

roupStep 2: Documenting

Tying it all together.

Feb

ruar

y 23

, 201

3


Toro

nto

Wor

dPre

ss G

roup

Requirement Documents• Organizes your thoughts.

• Can be followed for guidelines.

• An excellent appendix for larger planning docs.

Feb

ruar

y 23

, 201

3


Toro

nto

Wor

dPre

ss G

roup

Example: Website Requirements Document

Description Requirements Comments

Design

Colour Scheme Blues & Whites

Layout MinimalistClear Navigation

Features

Forms Contact FormLead CaptureJob Application

Sharing Buttons TwitterFacebookLinkedInEmail

Content

About Staff Bios

Blog No Comments

A simplified version of what we use at Kobayashi Online.

Feb

ruar

y 23

, 201

3


Toro

nto

Wor

dPre

ss G

roup

A Living Document• Requirement documents are just the starting point.

• Adjust it to serve different needs.

Feb

ruar

y 23

, 201

3


Toro

nto

Wor

dPre

ss G

roup

E.g. Defining ScopeWhat will and won’t be done?

Feb

ruar

y 23

, 201

3

Description In Scope Out of Scope

Design

Colour Scheme Colours finalized before launch.

Colour changes by administrator.

Layout Navigation can be updated by site admin.

Layouts modified by site visitors.

Features

Forms Can be created by administrator.

Conditional Logic

Sharing Buttons Custom Icons Placement on per-page basis.

Content

About Content provided by HR dept.

Content editing by web designer.


Toro

nto

Wor

dPre

ss G

roup

E.g. Setting DeadlinesWhen will things be completed? Who is responsible?

Feb

ruar

y 23

, 201

3

Description Due Date Responsibility

Design

Colour Scheme March 1, 2013 Marketing Dept.

Layout March 15, 2013 Designer

Features

Forms March 18, 2013 Developer

Sharing Buttons March 21, 2013 Designer (Icons)Developer (Code)

Content

About March 28, 2013 HR Department


Toro

nto

Wor

dPre

ss G

roupStep 3: The Solution

We know our requirements. What about the deliverables?

Feb

ruar

y 23

, 201

3


Toro

nto

Wor

dPre

ss G

roup

Tying your Planning to WordPressIn your Requirements WordPress Dependency

Design Requirements Theme Requirements

Feature Requirements Theme Function RequirementsPlugin Requirements

Content Requirements PagesCategories(Sometimes) Plugins/Themes

Feb

ruar

y 23

, 201

3


Toro

nto

Wor

dPre

ss G

roup

Requirements to SolutionsHow do the requirements correlate to WordPress?

Feb

ruar

y 23

, 201

3

Description WordPressDependency

Solution

Design

Colour Scheme Theme Child Theme

Layout Theme Genesis Framework

Features

Forms Plugin Formidable Pro

Sharing Buttons Plugin ShareThis

Site Stats Plugin WordPress.com Stats

Content

About Page

Blog Posts

Products Plugin Shopp


Toro

nto

Wor

dPre

ss G

roupTL;DR: Summary

In closing…

Feb

ruar

y 23

, 201

3


Toro

nto

Wor

dPre

ss G

roup

What are the takeaways?Visually map out your website requirements. (Brainstorm!)

Organize your requirements in an easy-to-read document. (Tables!)

Adjust your document to serve different purposes. (Iterate!)

Relate your requirements to specific solutions. (WordPress!)

Feb

ruar

y 23

, 201

3


Toro

nto

Wor

dPre

ss G

roup

Effective Website Planning

Click icon to add picture

Toronto WordPress Group @ PodCamp Toronto 2013

Feb

ruar

y 23

, 201

3