Uploaded byAdina Zaiontz
The Ultimate Website Development Roadmap
The document outlines a 10-step roadmap for redesigning a website: 1) Research competitors to gather ideas. 2) Determine functional and content requirements. 3) Assemble a web development team. 4) Create wireframes and a site map. 5) Develop content and collect images/videos. 6) Design visual aspects like colors, fonts and layout. 7) Program the site by adding functionality. 8) Test the beta version for bugs. 9) Launch the new site and promote it. 10) Perform ongoing SEO and maintenance.
More Related Content
Similar to The Ultimate Website Development Roadmap
The Ultimate Website Development Roadmap
- 1.
- 2. What We WillCover 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 aBetter 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 DevelopmentJourney 4
- 5. If your websitewas an employee, would you fire it? 5 Website Shame
- 6. 6 Getting Rid ofOutdated Look
- 7.
- 8.
- 9.
- 10. Problems With OriginalSite • 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 DevelopmentJourney 1 Research competitors 11
- 12. Step 1: CompetitorReview 12
- 13. Step 1: ResearchCompetitors • 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 toask/ 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.
- 16.
- 17. Benchmarking the Competition: StatsResearch • 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 DevelopmentJourney 1 Research competitors 2 Determine Requirements 18
- 19. Step 2: DetermineRequirements 19 If You Fail To Plan, You Plan To Fail
- 20. Objectives: – Decide whichImportant 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 - SimpleRequirements Document – Prioritized Wish List Determine Requirements 2 23
- 24. Sample – ComplexRequirements Document – User Categories & Requirements Determine Requirements 2 24
- 25. Sample – ComplexRequirements Document – Specific Functionality Requirements Determine Requirements 2 25
- 26. Common New Requirementsfor 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 ContentSchedule Determine Requirements 2 27
- 28. The Web DevelopmentJourney 1 Research competitors 2 Determine Requirements 3 Assemble Team 28
- 29. Step 3: RecruitYour Web Team 29
- 30. Step 3: RecruitYour 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.
- 32. Interview Questions • CanI 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 Tools3 Assemble Team • Project Management Sites: – Asana – Basecamp • File sharing: – Google Docs – DropBox 33
- 34.
- 35. The Web DevelopmentJourney 1 Research competitors 2 Determine Requirements 3 Assemble Team 4 Wireframe 35
- 36.
- 37. Step 4: InfoArchitecture 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.
- 39. Step 4: InfoArchitecture and Wireframing Wireframe 4 39
- 40. Step 4: InfoArchitecture 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 DevelopmentJourney 1 Research competitors 2 Determine Requirements 3 Assemble Team 4 Wireframe 5 Create/ Transition Content 41
- 42. Step 5: ContentCreation 42
- 43. Step 5: ContentCreation • 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 – YourKey Tool! Create/ Transition Content 5 44
- 45. Providing Copy tothe 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 NavigationLabels that will Make Sense for Your Target Audience Create/ Transition Content 5 46
- 47. Smart Strategies forThis 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 LandingPages • Why? • Preps for site for future marketing (Google Ads, Email campaigns) Create/ Transition Content 5 48
- 49. Build out LandingPages Create/ Transition Content 5 49
- 50. The Web DevelopmentJourney 1 Research competitors 2 Determine Requirements 3 Assemble Team 4 Wireframe 5 Create/ Transition Content 6 Design 50
- 51.
- 52.
- 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.
- 55. Design Trends: “Windows8 Style” Colour Blocking 55 Design 6 Rotating image panel Squares open to different sections
- 56. Design Trends: Responsive WebDesign 56 Design 6 Adapts to small or large screens Often shows a full screen image
- 57.
- 58. Design Trends: FlatDesign 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 DevelopmentJourney 1 Research competitors 2 Determine Requirements 3 Assemble Team 4 Wireframe 5 Create/ Transition Content 6 Design 60 7 Code/ Build
- 61.
- 62. Good Resources Objective: • Takethe 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 inWeb 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 VersusCMS 64 Code/ Build 7
- 65. Content Management Systems TheBig 3 Content Management Systems • Joomla • Drupal • Wordpress Wordpress – most popular – ease of use… Many plug ins 65 Code/ Build 7
- 66. The Web DevelopmentJourney 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: Betaand QA 67 God is in the Detail!
- 68. Step 8: Betatesting 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.
- 70. The Web DevelopmentJourney 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: Launchand Marketing 71
- 72. Step 9: Launchand 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 DevelopmentJourney 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 DevelopmentJourney Determine Requirements Assemble Team Create/ Transition Content Wireframe Design Code/ Build Beta/ QA Launch 76 SEO & MAintenance 10
- 77. No Guts. NoGlory 77
- 78. No Time forAll 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
Editor's Notes
- #4 Step 1 Look @ functionality AND design Step 4 & 5 can be in reverse order… Are you a visual thinker or list maker? Some people sketch wireframe first, and that helps them think of content. Looking up competitors also makes you think of content.
- #33 Interview in person or skype/ phone They must speak english or your language
- #40 Wireframe: simple black and white drawings showing site navigation, main links and where everything goes on the page. Doesn’t show fonts, colors, or actual text. - helps you figure out what is the most important info/ action you want the user to take, and how to organize the website to help take them there faster.
- #66 http://www.computerworld.com/s/article/9219685/Site_builder_shootout_Drupal_vs._Joomla_vs._WordPress?taxonomyId=169&pageNumber=2 Show WP vs Joomla vs Drupal Interface. Picking between them- depends on how you like to manage your website. Everyone has a different opinion. It’s like driving different cars… or saying you like MAC vs PC. I prefer wordpress…but I havent tried the others in depth. Drupal – difficult for new users to use. OLDEST system - Joomla and WP easiest… but Wordpress is more widely used and has more plug ins. Better for customization & for a complex site. - Joomla – requires more coding to get a site to look & work how you want. Best for complex site, & for someone who will have a technical person on staff to manage the site. Plug ins cost $$ Wordpress: 1 central dashboard. Simple and intuitive. Used to be a blogging platform. BEST for beginners. Categories to think about (scorecard) - basic content management (adding articles, configuring the logo and theme and look of site) Drupal – hard learning curve. Joomla & WP easy - social tools - ecommerce (Joomla & WP) - support & developer community