This document provides an overview of website redesign. It discusses common reasons for redesigning a website such as no mobile support, outdated aesthetics, or using a legacy content management system. The document then examines the roles and perspectives of those involved in a redesign including content, design, programming, and maintenance. Next, it outlines the typical stages of a redesign process from initial research and scoping to content migration and post-launch activities. Finally, the document looks at example tasks for content, design, and technology teams in planning and executing a website redesign.

1. Website
Design
A
Crash
Course
Monique
Sherre,
monique@boxcarmarke4ng.com

2. When
&
Why
Do
We
Re-­‐Design
• no
mobile
—
BoxcarMarke6ng.com
• aesthe6c
update
—
Raincoast.com
• legacy
CMS
—
ABCBookWorld.com
• new
company,
new
project
—
NewSite.com
2

3. Who
or
What
Is
Involved?
Purpose
Visitor
Content
Needs
&
SEO
Analy4cs,
Design Website
Behaviour,
Conversions
Redesign
Programming: Domain
CSS,
Plugins,
name,
Func4onality hos4ng,
email
Maintenance
3

4. Who
or
What
Is
Involved?
Content
Purpose
&
SEO
Visitor
Needs
Analy4cs,
Design Behaviour,
Website
Conversions
Redesign
Programming: Domain
CSS,
Plugins,
name,
Func4onality hos4ng,
email
Maintenance
4

5. Roles
are
shi;ing
• What
is
a
marke>ng
func>on?
• What
is
a
design
func>on?
• What
is
a
technical
func>on?
• Who
is
responsible
for
these
func>ons?
– Website
design
– Website
maintenance
– Video,
audio,
ebook,
app
produc>on
– Asset
management
– ONIX
file
genera>on,
distribu>on
– SEO
– Domains,
email,
server
setup

6. Every
Marketer
Should
Be
Technical
• h,p://www.seomoz.org/blog/every-­‐marketer-­‐should-­‐be-­‐technical
• Whether
you’re
a
marketer,
designer,
editor,
developing
technical
skills
gives
you
the
ability
to
communicate
be,er
with
everyone
in
your
organiza4on.
If
you
know
what's
possible,
then
you'll
know
what
to
ask
for
when
you
work
with
developers,
IT,
and
analysts.
And
in
many
cases,
you'll
be
able
to
just
do
the
work
yourself.
6

7. Doing
a
Redesign:
The
Big
Picture
Stage
1:
Where
to
start?
• Client:
Kick-­‐off
Mee6ng
>
Crea6ve
brief
• Research:
current
site
review,
compe6tor
sites,
persona,
analy6cs
• Proposal,
Cos6ng
&
Scope
Document
• Exper6se
required
7

8. The
Big
Picture
Stage
2:
What’s
Involved
• Content
architecture
• Wireframes
&
Page
elements
• Asset
collec6on
• SEO
(social
cues,
external
cues,
on-­‐page
cues);
keyword
&
audience
research
• Client:
agreement
on
direc6on,
branding,
personas
8

9. The
Big
Picture
Stage
3:
What’s
It
Going
to
Look
Like
• Naviga6on
&
content
for
key
pages
• Design
mockups
• Review
func6onality
requirements
• Client:
sign
off
on
design
9

10. The
Big
Picture
Stage
4:
How
is
it
going
to
work?
• HTML,
CSS,
Plug-­‐ins
and
other
programming
• Content
migra6on
• URLs
• Backup
exis6ng
site
• Secondary
profiles
(smm)
• Tes6ng
&
QA
• Client:
Tes6ng
&
QA
10

11. The
Big
Picture
Stage
5:
When
does
it
go
live?
• Migrate
from
dev
site
to
live
server
• 301
redirects
• Analy6cs
• Final
Tes6ng
&
QA
• Client:
Final
review
11

12. The
Big
Picture
Stage
6:
What’s
le@
• Training
docs
• Closing
doc
• Client:
Sign
off
on
closing
doc
• Code
guarantee
• Post-­‐launch
checklist
(pages
indexed,
ranking,
errors)
12

13. No>ce
there
are
5
weeks
in
the
tech
project?
1.
Kick-­‐off,
crea6ve
brief,
compe6tor
reviews
2.
Content
architecture,
wireframes,
SEO
3.
Design
&
Func6onality
4.
Programming,
add-­‐ons,
smm
setup
5.
Migra6on,
tes6ng
(prototype
presenta6on)
6.
Documenta6on,
training

14. 14

15. 15

16. Who
or
What
Is
Involved?
Purpose
Visitor
Content
Needs
&
SEO
Analy4cs,
Design Website
Behaviour,
Conversions
Redesign
Programming: Domain
CSS,
Plugins,
name,
Func4onality hos4ng,
email
Maintenance
16

17. Purpose
Content
Visitor
&
SEO Needs
Design
Website
Redesign
Analy>cs,
Behaviour,
Conversions
Roles
&
Perspec>ves
Domain
Programming name,
hos>ng,
Content
/
:CSS,
Plugins,
email Design:
How
it
Technology:
How
Func>onality MarkeEng:
How
Maintenance
looks it
works
it’s
organized
Feelings
to
evoke,
Conversions;
Tech
exper>se,
Business
needs aesthe>cs,
branding,
audience,
product,
maintenance
style service
assump>ons
Tech
skill,
Tasks,
topics,
needs/
Expecta>ons,
func>onality
Personas aesthe>cs,
branding
wants,
page
expecta>ons,
elements
usability
Features,
pla_orm,
CompeEtor
sites Style,
layout Naviga>on,
content
func>onality
Images,
text,
video,
logos,
brand
colours,
audio,
site
logins,
FTP,
CPanel,
DB,
Assets style
guides content
migra>on
registrar
plan

18. Content
(Marke>ng)
Tasks
Content
Architecture
(InformaEon
Architecture)
• Users:
who
are
they,
what
informa>on
they
are
seeking
(I
need
/
I
want),
how
they
behave
– Personas
&
User
Needs,
Task
Analysis,
Usability
Tes4ng,
Documen4ng
User
Experience
Requirements
• Content:
volume,
formats,
metadata,
structure,
organiza>on
– Indexing
&
Cataloguing,
Metadata,
Site
Architecture,
Wri4ng,
Content
Management,
Naviga4on
&
Labelling
• Context:
business
model,
business
values,
resources
(and
resource
constraints)
– Defining
Business
Needs,
Project
Management
&
Client
Management,
Project
Scope
&
Technical
Requirements
18

19. Design
Tasks
(Users,
Content,
Context)
Users,
Content,
Context
=
Who,
What,
Why
• Determine
business
branding
needs
(context)
• Determine
what
elements
are
available:
logo,
brand
colours?
(content)
• Iden>fy
layout
op>ons,
compe>tor
approaches
(users,
content,
context)
• Work
with
Informa>on
Architecture
to
develop
wireframes
(content)
• Understand
on-­‐page
elements
required,
persona
needs
(users,
content)
• Test
ini>al
structure
with
users
(design
nav
elements,
homepage,
key
interior
pages)
and
re-­‐evaluate
19

20. Technology
Tasks
• Determine
technical
requirements,
features,
scope
(context)
• Iden>fy
pla_orm
op>ons,
compe>tor
approaches
(context)
• Review
Informa>on
Architecture
and
Wireframes
for
func>onality,
features,
scope
(content,
context)
• Present
pla_orm
solu>on,
scope
plug-­‐ins,
integra>on
requirements
(users,
content,
context)
• Google
Analy>cs
and
Webmaster
tools
already
installed
on
exis>ng
site?
Bing
Webmaster
tools?
(users)
• URLs,
hos>ng,
server
staying
same?
(content)
• Design
>
HTML,
CSS
>
CMS
(content)
• Tes>ng
and
QA
(users,
content)
20

21. On
Wed:
Tech
Project
Content
Group
(Jelena,
Sophie,
Mike,
KC,
Laura)
1. Content
needs
2. Compe>tor
sites
3. Personas
4. Marke>ng
plan
(Discoverability—SEO
&
Analy>cs,
Promo>ons—SMM)
Design
Group
(Braden,
Natalie,
MacKenzie,
Duany)
5. Iden>ty
needs,
Branding
6. Scope
doc
7. Wireframes
8. Design
comps
Technology
Group
(Lee,
Lauren,
Kim,
Angelina,
Jaspring)
9. Technology
needs
10. Pla_orm
op>ons
11. Tool
integra>ons
12. Coding
the
prototype

22. Resources
you
already
have
MarkeEng
Plan
1. Audience:
Who
is
it
for?
2. Hook:
What
makes
it
great?
3. So
What:
Why
should/do
people
care?
4. Goals:
Will
they
care
enough
to
do
X?
5. Strategy:
How
will
I
nudge
them
to
do
X?
6. Tools:
What
tac>cs,
technology
or
tools
will
I
use?
7. Metrics:
How
will
I
measure
success?
Persona
Worksheet
22

23. Resources
you
need:
Project
Brief
• Iden>fy
client/organiza>on:
what
they
do
and
why
• Iden>fy
business
goals
of
site;
business
needs
the
site
needs
to
address
• Iden>fy
target
audience
and
needs
• Determine
features,
func>onality
or
informa>on
to
be
provided
via
the
site
• Describe
how
users
with
interact
with
the
site
to
meet
their
needs
(user
flow
scenarios)
• Consider
what
types
of
site
structure
are
appropriate
23

24. What
should
be
in
a
Project
Brief?
• Client
Info
• Audience
Info
• Brand
Info
• Content
Info
• Features
&
Scope
• Time
&
Budget
• Technology
Requirements
24

25. Wednesday
•
Alan
will
be
here
to
talk
about
the
tech
project
•
Monique
will
ask
your
brief
quesEons
so
within
your
groups
you
can
be
taking
notes
•
As
a
class,
you’ll
have
a
chance
to
ask
further
ques4ons
•
Post-­‐Alan
we’ll
walk
through
each
week
and
deliverables
using
the
stages
discussed
today
as
a
guideline
•
The
weekly
assignments
are
specific
to
group.
You’ll
have
Thurs
to
work
on
it,
and
assignments
are
due
Fri
at
9
(noon
is
your
buffer)
• Each
week
you’ll
assign
a
project
manager
who’ll
do
a
weekly
report,
much
like
the
book
project
• There
is
a
peer
review
on
the
18th
and
Feb
1st,
which
is
a
chance
for
you
to
individually
note
any
highlights
or
lowlights
so
we
can
adjust
• Tech
papers
are
due
those
dates
as
well
25

26. Tech
Papers
Due
Jan
18
and
Feb
1.
You
will
submit
them
by
pos4ng
online
for
the
class
(and
the
internet
at
large).
New post > category Student Presentations & Papers
Each
paper
will
be
reviewed—online—by
one
of
your
classmates
before
the
following
Friday.
i.e.,
you
will
each
write
two
papers
and
comment
on
two
papers
(1-­‐2
paragraphs
of
intelligent
commentary).
The
choice
of
the
exact
topics
is
yours,
however,
the
paper
topics
need
to
be
related
to
the
topics
listed
in
the
syllabus
and
cleared
and/or
nego4ated
with
Monique
in
advance.
Papers
should
be
roughly
1500–2000
words
(about
5
pages
single
spaced
in
Word—but
you're
going
to
post
them
to
the
CCSP
website
with
links
and
references),
and
take
a
clear
posi4on
on
the
topic.
You
can
see
examples
of
previous
years
here:
h,p://tkbr.ccsp.sfu.ca/pub802/papers-­‐september/
h,p://tkbr.ccsp.sfu.ca/pub802/papers-­‐2/
h,p://tkbr.ccsp.sfu.ca/pub802/papers-­‐3/
26

27. Tomorrow:
• Work
in
the
lab
– Install
wordpress
– Work
on
por_olio
(about
page)
• Design/Tech
focus
• Wed:
please
sit
together
in
your
groups
so
you
can
coordinate/collaborate
during
the
chat
with
Alan
27

28. See
you
in
the
lab
tomorrow