Moving Minds and Moving Code - Understanding, Exploring and Defining SMB Website Requirements. Presented to the International Institute of Business Analysis (IIBA), a professional association for business analysts and the business analysis profession. This session will provide an overview of Michael’s requirements process and design methodology at Pixelpunk Creative for building small business websites that are manageable, extensible and most importantly, provide a positive return on your marketing investment.

1. Moving
Minds
&
Moving
Code
Understanding,
Exploring
and
Defining
SMB
Website
Requirements
PRESENTED
BY
MICHAEL
JOHNSON
www.pixelpunk.com

2. www.pixelpunk.com
A
Li@le
About
Me
• I
design,
code,
and
market
websites
that
are
simple
and
elegant,
with
a
focus
on
the
user
experience
• Providing
a
posiLve
return
on
my
clients’
online
markeLng
investment
is
key
• I
began
my
career
in
AdverLsing
and
MarkeLng,
and
then…
– Art
Director
and
PublicaLon
Designer
– Web
Designer
and
Online
Marketer
– Product
Manager
/
Web-­‐Based
SoSware
as
a
Service
– One-­‐Man
Show
@
PixelPunk
CreaLve

3. www.pixelpunk.com
Philosophy
• Understand
the
problem
– Understand
the
organizaLon’s
industry
and
audience
– Understand
the
organizaLon’s
core
goals
and
objecLves.
– EvaluaLng
project
needs
and
establishing
a
strategy
for
execuLon
– Define
and
measure
the
success
of
the
project
• Recognize
that
visitors
are
on
a
mission
– Help
customers
on
their
mission,
design
for
usability
• Plan
for
the
future
– Knowing
what
needs
to
be
taken
into
account
for
future
growth
– Design
for
extensibility
so
that
the
site
can
grow
with
changing
client
needs

4. MarkeLng
Department's
Role
(Small
Business)
• SomeLmes
limited
to
simple
“look-­‐and-­‐feel”
decisions
and
the
“policing”
of
current
brand
guidelines
– (Insert
Lred
and
overused
“LipsLck-­‐on-­‐a-­‐pig”
analogy
here.)
www.pixelpunk.com
• Under
pressure
to
“own”
the
Website
and
are
held
accountable
for
performance
but
may
not
know
what
quesLons
to
ask
or
what
features
to
implement
– “What
do
you
mean
we
can’t
make
updates?”
– “What
do
you
mean
we
can’t
test
new
markeLng
tacLcs?”
– “What
do
you
mean,
‘it
will
take
weeks’
to
make
this
simple
change?”
– “Is
our
site
opLmized?”

5. www.pixelpunk.com
Requirements
• A
requirement
is
defined
as
a
condiLon
or
capability
that
must
be
met
or
fulfilled
by
a
system
to
saLsfy
a
contract,
standard,
specificaLon,
or
other
formally
imposed
documents
(IEEE
Standard
610.12-­‐1990).
• MarkeLng
Requirements
– Express/Predict
the
customer's
wants
and
needs
for
the
product
or
service
– Requires
soSer
skills,
analysis
– Access
to
data
and
the
ability
to
quickly
test
and
adjust
to
market
changes
• FuncLonal
Requirements
– More
tradiLonal
occupaLonal
skills
(wireframes,
documentaLon,
etc.)

6. Current
Performance
/
FoundaLonal
Metrics
• Current
www.pixelpunk.com
analyLcs
data
– What
are
the
current
strengths
and
weaknesses
based
on
data
we
already
have
access
to?
– Fix
what’s
broken,
but
don’t
break
what’s
currently
working.
e.g.
Don’t
break
current
SEO
and
referring
sources
of
traffic
(301
redirects).
– (Insert
the
Lred
and
overused,
“throw-­‐out-­‐the-­‐baby-­‐with-­‐the-­‐bathwater”
idiomaLc
expression
here.)
• Sales
/
Lead-­‐Conversion
Results
– Are
there
clear
goals
and
points
of
conversion?
Is
it
working?
• Install
Crazy
Egg
“Heat
Mapping”
SoSware
– Visually
understand
user
behavior.
Visualize
the
user
experience.

7. www.pixelpunk.com
Crazy
Egg
Quickly
see
how
people
are
actually
using
your
site.
Invest
5
minutes
for
instant
customer
insight.

8. www.pixelpunk.com
Google
AnalyLcs
Site
Overlay

9. www.pixelpunk.com
Google
AnalyLcs
Provides
insight
into
your
current
website
traffic
and
markeLng
effecLveness.

10. www.pixelpunk.com
• Install
Google’s
Webmaster
Tools
– Site
VerificaLon
– DiagnosLcs
– Crawl
Stats
– Site
Maps

11. www.pixelpunk.com
My
Process
• CompeLLve
Analysis
and
Research
• Usability
Review/Analysis
• CreaLve
ExploraLon
&
Design
Development
• ProducLon
Management
&
ImplementaLon
• Search
Engine
OpLmizaLon
• Outcome
EvaluaLon

12. CompeLLve
Analysis
&
Research
• Great
design
starts
by
understanding
the
problem
www.pixelpunk.com
• Basic
analysis
of
the
current
business
landscape
• Understand
the
demographic
– Get
into
their
heads.
Create
personas.
What
would
“Jane”
do?
– Design
a
site
for
“Bob”
and
“Jane”
and
people
like
them,
and
not
your
CEO.
• Analyze
compeLtor’s
relaLve
strengths
and
weaknesses
– Compile
a
“wish-­‐list”.
E.g.
“If
we
had
a
million
dollars,
we’d
like
to….”
– It
doesn't
all
have
to
be
done
at
once…you
just
have
to
plan
for
it.

13. Usability
Review/Analysis
• Analyze
navigaLonal
schemes
and
link
structures
www.pixelpunk.com
– A
user-­‐centered
approach
which
translate
users’
navigaLonal
requirements
into
system
representaLons
• Ease
of
use
is
vital
to
success
– The
goal
is
increased
user
producLvity
• Sepng
and
meeLng
user
expectaLons
– Users
are
on
a
mission
• “Don’t
Make
Me
Think”
–Steve
Krug
– Usability
tesLng
on
10
cents
a
day

14. CreaLve
ExploraLon
• Begins
the
problem
solving
process
www.pixelpunk.com
• Start
developing
ideas
to
visually
express
the
core
message
• What’s
the
“big”
idea?
• Pixel-­‐perfect
Prototypes
(The
Apple
Method)
• Refine.
Rinse,
wash,
repeat.
Complete.

15. www.pixelpunk.com
Prototype
Example
• Pixel-­‐Perfect
• Photoshop
Layers
for
easy
manipulaLon
• Client-­‐owned
• WYSIWYG

16. ProducLon
&
ImplementaLon
• Execute
on
the
final
design
www.pixelpunk.com
– Approved
prototype
is
turned
into
a
fully
funcLonal
website
• XHTML
/
JavaScript
/
CSS
– Separate
structure
from
design
• Search
Engine
OpLmizaLon
– Based
on
compeLLve
analysis
data
• Browser
TesLng
– Firefox
3+,
Safari
4+,
Internet
Explorer
7+
on
PC,
Mac,
SmartPhones

17. New
Standards
For
Coding
Web
Sites
• XHTML
(1.0
TransiLonal
is
okay)
/
JavaScript
/
CSS
www.pixelpunk.com
• Separate
Style
From
Structure
– www.cssZenGarden.com
– Easier
to
Maintain
– Extensible
for
Future
Upgrades
• Accessible
to
those
with
DisabiliLes
• OpLmized
for
Search
Engines
• Designed
for
Mobile
Devices
w/o
Massive
Code
Re-­‐Write

18. Search
Engine
OpLmizaLon
• Keyword
www.pixelpunk.com
PosiLoning
– Keyword
discovery
from
the
compeLLve
analysis
– Google
Keyword
SuggesLon
Tool
– Google
Traffic
EsLmator
• InformaLon
Architecture
– Intelligent
internal
linking
schemes
– “Themed”
pages
• Page
Architecture
– Make
it
easy
for
the
Search
Engine
spiders
to
crawl
and
understand
the
importance
of
each
page.

19. www.pixelpunk.com
Google
Keyword
SuggesLon
Tool
• CompeLLon
• Monthly
Searches
• Local
Searches

20. Search
Engine
OpLmizaLon
(conLnued)
• TacLcal
On-­‐Site
OpLmizaLon
www.pixelpunk.com
– Title
Tag
Syntax
and
OpLmizaLon,
Canonical
URL/301
Redirect
Issues,
Page
File
Size,
META
DescripLons,
URL
Parameter
LimitaLons,
URL
Depth,
Heading
Tags,
Hyperlink
opLmizaLon,
ALT
Tag
Requirements,
Strong/Emphasis
Usage,
Internal
Linking
Strategies,
Keyword
Density
and
Placement
• Off-­‐Site
OpLmizaLon
– Inbound
links
determine
value
of
site
and
count
as
a
“vote”
for
that
site.
– Links
are
hard
to
get
– Start
with
relevant
directories,
local
community
sites,
trade
organizaLons,
local
professional
networks
– Offer
compelling
content
worth
linking
to

21. Monopolize
Google
Search
Results
• Organic
www.pixelpunk.com
Search
Results
– Website
design
for
search
engine
visibility
• GoogleBase
– Design
Web
to
conform
with
GoogleBase
rules
and
provide
monthly
feeds
• Pay-­‐Per-­‐Click
– Use
PPC
adverLsing
for
highly
themed
targeted
ads
that
land
to
relevant
landing
pages.
• PLUS
Box
(beta)
– Take
advantage
of
new
“Plus
Box”
feature.
• Local
Search

22. www.pixelpunk.com
• SERP
Anatomy
– Plus
Box
– PPC
– Organic
– Google
Base
– Local

23. Outcome
EvaluaLon
• How’d
www.pixelpunk.com
I
do?
• Measure
audience
response
• What’s
next?
How
do
we
move
the
needle?

24. Some
Basic
FuncLonal
Requirements
(…that
the
MarkeCng
Department
someCmes
forgets
to
ask
about)
• Header
and
footer
“Includes”
www.pixelpunk.com
– For
analyLcs,
conversion
code,
and
other
markeLng
tools
(e.g.
Crazy
Egg).
• XHTML
1.0
TransiLonal
Code
– Make
sure
it
validates
– Add
a
couple
of
empty
<DIV>
in
case
you
want
to
add
something
later
• Content
Management
System
– Avoid
proprietary
systems
-­‐
Adobe
Contribute
is
powerful
and
simple

25. Some
Basic
MarkeLng
Requirements
(or
“capabiliLes”)
• Current
Performance
Analysis
www.pixelpunk.com
• CompeLLve
Analysis
• Usability
Review/Design
with
the
User
in
Mind
• Have
Some
Tools
in
Place
– CrazyEgg,
AnalyLcs,
Webmaster
Tools
• Newsle@ers
and
Email
MarkeLng
– Access
to
FTP
and/or
network
access
• Forms
and
Lead-­‐GeneraLon
– “Freeform”
lead-­‐gen
form
creaLon
w/o
relying
on
technical
staff

26. Thanks
For
Listening!
• Any
www.pixelpunk.com
quesLons?

27. www.pixelpunk.com
Links
• Google
Keyword
SuggesLon
Tool
– adwords.google.com/select/KeywordToolExternal
• Google
Traffic
EsLmator
– adwords.google.com/select/TrafficEsLmatorSandbox
• Crazy
Egg
– www.CrazyEgg.com
• Google
AnalyLcs
– www.google.com/analyLcs/
• Google
Webmaster
Tools
– www.google.com/webmasters/tools/
• CSS
Zen
Garden
– www.csszengarden.com