Post on 01-Jul-2015
description
Design begins before you “design.”
@john_gough
PHXDW WordPress Wisdom John Gough Skyhook Marketing
Good process prevents sadness.
Design before you “design” | @john_gough
So, what about WordPress?
Design before you “design” | @john_gough
Design before you “design” | @john_gough
WordPress is a CMS.Emphasis on the C.
Design before you “design” | @john_gough
Information Architecture
unsplash.net
The Process: 1. Asking Why 2. Understanding Who 3. Planning How
Design before you “design” | @john_gough
The most important question: “Why do you want a website?”
The $1,000,000 Question
Features & Functionality
Visual Design
Analytics
Marketing Campaigns
Bad reasons to build a website:
The $1,000,000 Question
“Everyone else has one.” “My spouse/partner/friend/voice-in-my head says I need one.” “To look cool.” “So I can get rich and retire. (Sign this NDA)”
Grumpy mom test.
Explain it to your mom.
Avinash Kaushik Blog: Occam’s Razor
The Digital Marketing & Measurement Model
http://bit.ly/PHXDWmeasurement
WEBSITE OBJECTIVES
INCREASE AWARENESS
GENERATE LEADS
WEBSITE OBJECTIVES
INCREASE AWARENESS
GENERATE LEADS
Reserve a cab online
Reinforce offline/ online advertising
Generate repeat business
WEBSITE OBJECTIVES
INCREASE AWARENESS
GENERATE LEADS
Reserve a cab online
KPI: CONVERSIONS (RESERVATION FORM)
TARGET: 120/MO
Reinforce offline/ online advertising
KPI: BRANDED TRAFFIC
TARGET: 1K VISITS/MO
Generate repeat business
KPI: LOYALTY/RECENCY
TARGET: 30% REPEAT VISITS
WordPress Google Analytics Plugins
The next question: “Who is going to look at your website?”
The $999,999 Question
Protip: The answer is not “everyone.”
#protip
It’s easy as ABC.
Audience… Behavior… Conversion.
http://bit.ly/PHXDWabc
BEHAVIORSPotential customers Current customers Potential employees Competitors Press
Lead gen form
Support
Careers info
Deception Releases and media
AUDIENCES CONVERSION
“Things not to have.” -Amanda Blum
About Me page (use author info in WP) Testimonial page (use the sidebar) Too many pages (use dynamic content!) Advertising
http://bit.ly/PHXDWabc
Planning How. The sitemap.
Sitemaps should:
Show clear connections for where Audiences meet Goals. Represent one main idea/purpose per page. Be a tool for communication.
http://bit.ly/PHXDWabc
Design before you “design” | @john_gough
Design before you “design” | @john_gough
Design before you “design” | @john_gough
How do I make a sitemap?
Pen and paper Bulleted, nested lists Omnigraffle/Visio (w/ outline view and styles) Illustrator EightShapes Indesign templates (http://unify.eightshapes.com/)
http://bit.ly/PHXDWabc
Why not use WordPress?
WordPress to create sitemaps.
Planning How. The wireframes.
How do I make cool wireframes?
http://bit.ly/PHXDWabc
Adaptive Path Sketchboards
IPEVO P2P Camera
Digital tools:
http://bit.ly/PHXDWabc
Omnigraffle/Visio Webflow Balsamiq Illustrator EightShapes Unify + InDesign Advanced: Bootstrap prototypes
In Real Life: Client work.
Sketches to clients.
High fidelity wireframes.
Mockups in browser.
Style guide.
Look at your theme.
Good process prevents sadness.
Design before you “design” | @john_gough
Thank you!
Design before you “design” | @john_gough