The Ultimate Website Development Roadmap

1. Website Design Roadmap 1 Adina Zaiontz

2. What We Will Cover Today • Roadmap through site design/ redesign process • Best practices for project management, design and coding • Give you the tools to take on your own site redesign project. 2

3. RoadMap to a Better Site • 1: Research Competitors • 2: Make a List of Functional and Content Requirements. • 3: Assemble Team • 4: Wireframe • 5: Content Creation & Collection • 6: Design • 7: Programming • 8: Beta • 9: Live Launch • 10: SEO & Maintenance 3

4. The Web Development Journey 4

5. If your website was an employee, would you fire it? 5 Website Shame

6. 6 Getting Rid of Outdated Look

7. 7 Problems With Original Site

10. Problems With Original Site • Why Redesign? • You cant control your site or change content • Search engines cant find you • Your site has outdated technology (flash, frames) • Outdated look • No mobile • No calls to action • Slow load times • No dynamic content 10

11. The Web Development Journey 1 Research competitors 11

12. Step 1: Competitor Review 12

13. Step 1: Research Competitors • Objective: – Determine who’s the best in your category – Research ideas you can borrow and apply. • How: – Google • Local competitors • Who comes up on search & Maps • Who’s well known in your city or across Canada/ US – Look outside the GTA & your direct competitors – Don’t think about the budget and the HOW yet • Tools: – Browser Bookmarks – Powerpoint – Make a Competitor “Scrapbook”/ Swipe File – Snagit Research competitors 1 13

14. • Questions to ask/ Items to Note – What content do they have that I don’t have? – What functionality do they have? – What design elements do they have that I can apply? – What marketing strategies/ tactics are they using? – See what competitors are doing on social media & blog – Take a screenshot – Sign up for competitor enewsletters & social media channels (follow twitter/ facebook) Step 1: Research Competitors Research competitors 14 1

15. Sample Competitor Review 15 Research competitors 1

16. Sample Competitor Review 16 Research competitors 1

17. Benchmarking the Competition: Stats Research • For your own stats: • Free: Google Analytics – Install before you Re-Design to check “before and after” traffic. • Free: Quantcast – More In-Depth Demographics • For your own and competitor stats: • Free: Alexa.com and SEMrush.com – Look up relative traffic stats and search info on competitors – http://www.alexa.com/siteinfo/kumon.ca# – http://www.semrush.com/ca/info/kumon.ca?db=ca • FREE: smallseotools.com/ • Paid & Expensive: Compete.com, comscore, Hitwise 17 Research competitors 1

18. The Web Development Journey 1 Research competitors 2 Determine Requirements 18

19. Step 2: Determine Requirements 19 If You Fail To Plan, You Plan To Fail

20. Objectives: – Decide which Important functionality you need. Why: – Determine / Share business objectives of the site – Ensure you and your internal team, designer and programmer are are communicating effectively to meet the common goal of creating your website. How: – Write a requirements document. 3 different types: • Creative Brief – for the Designer • Functional Requirements – for the Programmer. • Content schedule – for the whole team Step 2: Determine Requirements Determine Requirements 2 20

21. Creative Brief – For Designer • Big Picture Business Objectives, i.e., – We need to get more leads to achieve our sales target of $$$$ – We need to project a more modern image to customers. • Website objectives, i.e., – Get readers to double the amount of time they spend/content they consume on the site – Increase the amount of leads collected online for sales. – Increase online order by 20% • Competition – URLs of Key Competitors and Other Sites You Admire – Screenshots of sites you like • Who is the audience? – Demographics and stats – Typical user profiles, i.e. “a mom in Richmond Hill, age 28-40, with kids aged 3- 12, $100K HHI” Determine Requirements 2 21

22. Creative Brief – For Designer • Unique selling proposition (USP) – Your USP must say to your audience, “use this website, and you will get this specific benefit.” – What makes you different and special compared to the competition? • Brand character – If your company was a person, who would they be? What would they wear? What would their “voice” be? • Friendly? Casual? Conservative? Serious? • Mandatory items: The New Design MUST/ MUST not have this – “Request a quote” form on every page – NO Yellow! – Must have picture of business owner • Success Metrics: What measures will help you know the redesign succeeded? – Number of visitors increase by 30% – Number of leads filling out contact form increasing – Time spent on site increasing – Bounce rates decreasing – Visitors from organic search increasing. Determine Requirements 2 22

23. Sample - Simple Requirements Document – Prioritized Wish List Determine Requirements 2 23

24. Sample – Complex Requirements Document – User Categories & Requirements Determine Requirements 2 24

25. Sample – Complex Requirements Document – Specific Functionality Requirements Determine Requirements 2 25

26. Common New Requirements for Re-Designed Sites: Blog Social Media Links Social Media Integration Embedded Twitter Stream “Like Us on Facebook” Content Management System (CMS) Google Analytics (Statistics Tracking) Contact forms with database Enews sign up SEO-ed content and structure Landing Pages for PPC Ecommerce Determine Requirements 2 26

27. Creating a Content Schedule Determine Requirements 2 27

28. The Web Development Journey 1 Research competitors 2 Determine Requirements 3 Assemble Team 28

29. Step 3: Recruit Your Web Team 29

30. Step 3: Recruit Your Web Team Roles on web team: • 1) Project Management, • 2) Front End Designer/ Graphic Designer, • 3) Developer/ Programmer • 4) Copywriter • 5) Marketing Objectives: Find people with the creative, technical communication skills you need for your project. Decide: • Agency versus Freelancer versus Self Serve Template? • What is Your Budget? • How much time/ expertise do you have to manage your project? 3 Assemble Team 30

31. 3 Assemble Team 31

32. Interview Questions • Can I see a Portfolio of completed projects? • What is your project management process? • What is your specialty? front end design, development, etc. • What CMS will you install? (Wordpress, Drupal) • How many revisions? • Timeline to completion? • Budget • What is your understanding of my business? • Are they asking you questions, or just selling you their service? 3 Assemble Team 32

33. Project Management Tools 3 Assemble Team • Project Management Sites: – Asana – Basecamp • File sharing: – Google Docs – DropBox 33

34. Asana.com Project Management 3 Assemble Team 34

35. The Web Development Journey 1 Research competitors 2 Determine Requirements 3 Assemble Team 4 Wireframe 35

36. Step 4: Wireframing 36

37. Step 4: Info Architecture and Wireframing Wireframe 4 • Objective: Create a BluePrint for the design of your site to decide how all the information will be organized. • 2 elements of this stage: • Site map • Wireframe 37

38. Sample Site Map Wireframe 4 38

39. Step 4: Info Architecture and Wireframing Wireframe 4 39

40. Step 4: Info Architecture and Wireframing Wireframe 4 • Why Wireframe? – See your website visually for 1st time – Create a more user friendly site – Place the most important elements in the most prominent positions (information hierarchy) – Get the business owner/ designer/ programmer on the same page & give feedback early on. • Tools for Wireframing: – Balsamiq – Axure – Powerpoint – Pencil and paper 40

41. The Web Development Journey 1 Research competitors 2 Determine Requirements 3 Assemble Team 4 Wireframe 5 Create/ Transition Content 41

42. Step 5: Content Creation 42

43. Step 5: Content Creation • Objective: Create and compile the copy (text), images for your site. • Activities: – Write copy – Collect photos/ videos – Organize and give to graphic designer – Upload to dropbox or asana/ basecamp • Tools: MS Word, dropbox • One of the most difficult stages! Create/ Transition Content 5 43

44. Content Schedule – Your Key Tool! Create/ Transition Content 5 44

45. Providing Copy to the Designer Create/ Transition Content 5 Indicate which photos you want & on which pages Upload high res photos to dropbox Use plain text that the designer can copy and paste. 45

46. Write Compelling Navigation Labels that will Make Sense for Your Target Audience Create/ Transition Content 5 46

47. Smart Strategies for This Stage • No photos? Buy Some – Use a stock photo/ video site like istockphoto, yaymicro • Make your content search engine friendly • Identify keywords for SEO • Incorporate keywords into About Us, Services and other pages. • Outsource the tedious tasks if possible • i.e., 200 pictures to crop or 50 scanned documents to convert to text • If you’re not a strong writer, hire one…or ask your agency • Content Marketing - Showcase Your Expertise – Ebook – Blog post – Whitepaper Create/ Transition Content 5 47

48. Build out Landing Pages • Why? • Preps for site for future marketing (Google Ads, Email campaigns) Create/ Transition Content 5 48

49. Build out Landing Pages Create/ Transition Content 5 49

50. The Web Development Journey 1 Research competitors 2 Determine Requirements 3 Assemble Team 4 Wireframe 5 Create/ Transition Content 6 Design 50

51. Step 6: Design 51

52. 52 Design 6

53. Step 6: Design • Objective: Design an attractive, contemporary “storefront” to your business. • How: – Provide a creative brief – Show the designer sites you like – Think about your preferences: colours, fonts, icons, photo treatment, logos • Tools • Study design trends on themeforest.com, webdesigndev.com • Snagit or Adobe Acrobat (for providing design feedback) • During this phase: Get design mock ups from your graphic designer – 2-3 versions 53 Design 6

54. Design Mock Ups 54 Design 6

55. Design Trends: “Windows 8 Style” Colour Blocking 55 Design 6 Rotating image panel Squares open to different sections

56. Design Trends: Responsive Web Design 56 Design 6 Adapts to small or large screens Often shows a full screen image

57. Design Trends: Muted Pastels 57 Design 6

58. Design Trends: Flat Design 58 Design 6

59. Good Resources • http://themeforest.com/ • http://webdesignledger.com • http://www.webdesigndev.com/inspiration • http://youroldcrapwebsite.wordpress.com/ • http://www.smashingmagazine.com/ 59 Design 6

60. The Web Development Journey 1 Research competitors 2 Determine Requirements 3 Assemble Team 4 Wireframe 5 Create/ Transition Content 6 Design 60 7 Code/ Build

61. Step 7: Build 61

62. Good Resources Objective: • Take the approved design (PSD) from the designer, and put all the HTML code behind it. • Add CMS, database, ecommerce and other functionality onto your site. What You Need To Know: • Build your site on a common CMS • Look up plugins and software-as-a-service (SAAS) solutions to save time and money programming 62 Code/ Build 7

63. What’s Changed in Web Design? Custom coding vs CMS (Content Management Systems) OLD WAY: old sites hand coded with HTML and PHP (programming languages). Problem: hard for average user to update their site. You need programmer intervention for everything. NEW WAY: CMS, plug ins, templates, CSS style sheets 63 Code/ Build 7

64. Raw Coding Versus CMS 64 Code/ Build 7

65. Content Management Systems The Big 3 Content Management Systems • Joomla • Drupal • Wordpress Wordpress – most popular – ease of use… Many plug ins 65 Code/ Build 7

66. The Web Development Journey 1 Research competitors 2 Determine Requirements 3 Assemble Team 4 Wireframe 5 Create/ Transition Content 6 Design 66 7 Code/ Build 8 Beta/ QA

67. Step 8: Beta and QA 67 God is in the Detail!

68. Step 8: Beta testing and QA Objective: • Test the site for bugs, copy errors, and browser issues • Get final approvals What You Need To Know: • Launch on a “secret” web page • Launch to small group • Consider outsourcing your beta testing – http://www.thebetafamily.com – www.youth4work.com • Go through your site page by page. Look at: – Functionality: Broken links, missing images, forms working – Content: typos, contact info, terms, privacy – Browser Compatibility: Test on firefox/ explorer/ chrome/ safari (iPad/ iPhone/ Android/ BB) – Site speed – SEO 68 Beta/ QA 8

69. Bug Tracking Sheet 69 Beta/ QA 8

70. The Web Development Journey 1 Research competitors 2 Determine Requirements 3 Assemble Team 4 Wireframe 5 Create/ Transition Content 6 Design 70 7 Code/ Build 8 Beta/ QA 9 Launch

71. Step 9: Launch and Marketing 71

72. Step 9: Launch and Marketing Objective: • Let the world know about your site • Get trained on how to use your site • Ongoing Maintenance How: • Social Media launch • Blog • Email campaign • Paid Ads – PPC, traditional marketing • Let Search Engines Know You Exist – Google Webmaster Tools and Google Analytics – Citation sites 72 Launch 9

73. 1 2 Research competitors 3 4 6 5 7 8 9 The Web Development Journey Determine Requirements Assemble Team Create/ Transition Content Wireframe Design Code/ Build Beta/ QA Launch 73 SEO & MAintenance 10

74. Step 10: SEO & Maintenance 74

75. Step 10: SEO & Maintenance Objective: • Rank high on search engines • Keep up with Wordpress and Plug in updates – important for security of site! • Site backups • Ongoing content updates How: Maintenance • Close monitoring of website, outage reports, Wordpress security updates • Backups SEO • Link Building • Submitting site to search engines • Directory submissions • Social Media bookmarking • Content Marketing • And much more! 75 SEO & Maintenance 10

76. 1 2 Research competitors 3 4 6 5 7 8 9 The Web Development Journey Determine Requirements Assemble Team Create/ Transition Content Wireframe Design Code/ Build Beta/ QA Launch 76 SEO & MAintenance 10

77. No Guts. No Glory 77

78. No Time for All This? • Don’t have time to become a web design ninja? We can help! • napkin marketing is a digital marketing agency which manages the whole 9-step process for you. • For a free estimate, call Adina Zaiontz 289.597.6600 | adina@napkinmarketing.com 78