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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Notas do Editor
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.
Interview in person or skype/ phone
They must speak english or your language
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.
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