28
| Date post: | 12-Jan-2015 |
| Category: |
Education |
| Upload: | somisguided |
| View: | 357 times |
| Download: | 0 times |
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
Who or What Is Involved?
3
Website Redesign
PurposeVisitor Needs
Maintenance
Domain name,
hos4ng, email
Analy4cs, Behaviour, Conversions
Programming:CSS, Plugins, Func4onality
Design
Content & SEO
Who or What Is Involved?
4
Website Redesign
Purpose
Visitor Needs
Maintenance
Domain name,
hos4ng, email
Analy4cs, Behaviour, Conversions
Programming:CSS, Plugins, Func4onality
Design
Content & SEO
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
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
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
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
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
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
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
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
No>ce there are 5 weeks in the tech project?
1. Kick-‐off, crea6ve brief, compe6tor reviews2. Content architecture, wireframes, SEO3. Design & Func6onality4. Programming, add-‐ons, smm setup5. Migra6on, tes6ng (prototype presenta6on)6. Documenta6on, training
14
15
Who or What Is Involved?
16
Website Redesign
PurposeVisitor Needs
Maintenance
Domain name,
hos4ng, email
Analy4cs, Behaviour, Conversions
Programming:CSS, Plugins, Func4onality
Design
Content & SEO
Roles & Perspec>vesDesign: How it looks
Content / MarkeEng: How it’s organized
Technology: How it works
Business needs
Personas
CompeEtor sites
Assets
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
Style, layout Naviga>on, content Features, pla_orm, func>onality
logos, brand colours, style guides
Images, text, video, audio, site logins, content migra>on plan
FTP, CPanel, DB, registrar
Website Redesign
PurposeVisitor Needs
Maintenance
Domain name, hos>ng,
Analy>cs, Behaviour, Conversions
Programming:CSS, Plugins, Func>onality
Design
Content & SEO
Content (Marke>ng) TasksContent 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
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
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
On Wed: Tech ProjectContent 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
Resources you already have
MarkeEng Plan1. 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
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
What should be in a Project Brief?
• Client Info• Audience Info• Brand Info• Content Info• Features & Scope• Time & Budget• Technology Requirements
24
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
Tech PapersDue 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
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
See you in the lab tomorrow
