Download to read offline
Uploaded bysomisguided
Tech 802: Web Design Part 1
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.
More Related Content
Similar to Tech 802: Web Design Part 1
Tech 802: Web Design Part 1
- 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.
- 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