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

8.
8
Problems With Original Site

9.
9
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