Website Design
When & Why Do We Re-‐Design
•
no mobile — BoxcarMarke6ng.com
•
aesthe6c update — Raincoast.com
•
legacy CMS — ABCBookWorld.com
Who or What Is Involved?
Website
Redesign
Purpose Visitor Needs Domain name, Analy4cs, Behaviour, Conversions Programming: CSS, Plugins, Func4onality Design Content & SEOWho or What Is Involved?
Website
Redesign
Purpose Visitor Needs Maintenance Domain name, hos4ng, email Analy4cs, Behaviour, Conversions Programming: CSS, Plugins, Func4onality Design Content & SEORoles 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
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.
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
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
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
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
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
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)
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
Who or What Is Involved?
Website
Redesign
Purpose Visitor Needs Maintenance Domain name, hos4ng, email Analy4cs, Behaviour, Conversions Programming: CSS, Plugins, Func4onality Design Content & SEORoles & Perspec>ves
Design: How it looks Content / MarkeEng: How it’s organized Technology: How it works Business needs Personas
Feelings to evoke, aesthe>cs, branding, style Conversions; audience, product, service assump>ons Tech exper>se, maintenance Expecta>ons, aesthe>cs, branding
Tasks, topics, needs/ wants, page elements Tech skill, func>onality expecta>ons, usability Website Redesign Purpose Visitor Needs Maintenance Domain name, hos>ng, email Analy>cs, Behaviour, Conversions Programming :CSS, Plugins, Func>onality Design Content & SEO
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
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)
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)
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
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?
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
What should be in a Project Brief?
•
Client Info
•
Audience Info
•
Brand Info
•
Content Info
•
Features & Scope
•
Time & Budget
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
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/
