1. The Key to Conversions
2016 Web Design Checklist
“The key to creating a standout campaign is data.” ~ Google

2. Jane Clark
Creative Director of multi award-winning design studio Teakettica
I’m a multi-discipline graphic designer and front-end developer.
I’ve been making websites for over 15 years for small, large, and
celebrity clients.

3. Let’s talk...
1. Purpose
2. Planning
3. Content
4. Web Design & Development
5. Search Engine Optimization (SEO)
6. Google Analytics & Search Console
7. Follow up

4. Purpose
Why are you making this website?

5. What do you want your
website to do for you?
 Sell products or services
 Generate leads
 Establish credentials
 Become an authority in your industry

6. Which of these sites has a clear purpose?

7. “
”
Users often leave web pages in 10-
20 seconds, but pages with a clear
value proposition can hold people's
attention for much longer…
The average page visit lasts a little less than a minute.
~ Jakob Nielsen

8. Planning
If you fail to plan, you plan to fail. What makes your company unique?

9. Don’t skip these steps…
 Research: What are your competitors doing? What is conventional for the
industry? Dos and Don’ts. A good designer will help you avoid pitfalls.
 Content Outline: What content do you want to feature? What order should it be
in? What is the most important information your users need to know?
 Mood Board: An arrangement of images, materials, pieces of text, etc.,
intended to evoke or project a particular style or concept.
 Wireframe: A sketch or simple image that serves as a skeleton or blueprint of
your site.
 Mockup: The design comes to life. This is exactly how it’s going to be coded.

10. Research

11. Mood Board Wireframe

12. Old siteMockup

13. “
”
Building a website without a
plan is like constructing a
building without blueprints.
Things end up in the wrong place, features are overlooked, and the situation is
ripe for miscommunication between website builder and client.
~ Taylor Hawes

14. Content
Information Architecture

15. What it’s all about.
 Content Outline: Create a simple outline of your website pages.
 Voice: Your brand personality should be expressed here to separate you form
your competitors and reinforce your brand.
 Quality over Quantity: Keep your pages short & sweet, to 300 words (for SEO),
and break it up with pictures and call to actions.
 Have clear call to actions: Don’t give everything away – offer an incentive for
them to contact you for more information to capture the lead.

16. Example Content Outline
 Home
 About
 Our Team
 Jane Clark
 Jayne Bayquen
 Josette Boettcher
 Emily Martin
 Mission & History
 Services
 Web Design
 Logo Design
 SEO
 Contact Us
 Blog

17. Brand Voice
 If your brand was a person, how would you describe its personality to
someone? Examples:
 Passionate
 Quirky
 Authentic
 Sincere
 Rugged
 This is important for your content strategy. You are positioning yourself as an
easily identified and authoritative source for your area of expertise.

18. 300 words looks like:
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas luctus risus in nisl tincidunt gravida.
Curabitur ullamcorper dolor massa, eu imperdiet lacus eleifend quis. Mauris sed risus felis. Vivamus
vitae nibh vel orci posuere posuere id et quam. In vel diam venenatis, venenatis lacus id, imperdiet
urna. Nullam sodales erat ipsum, at tincidunt lorem feugiat eu. Aenean sit amet vulputate ligula. Donec
vulputate eros ac justo pulvinar, vitae hendrerit enim dapibus. Proin augue velit, aliquam sed velit vel,
aliquam posuere urna. Pellentesque a gravida ligula.
 Proin eget arcu tellus. In a efficitur lorem. Sed lectus neque, semper commodo ultricies pellentesque,
tempus in felis. Donec tempor lectus eu sodales viverra. Suspendisse ullamcorper dolor orci, ac varius
lorem lacinia molestie. Pellentesque id eros in enim blandit consectetur vitae eu neque. Sed feugiat
congue porta. Sed luctus tellus at dictum convallis. Curabitur condimentum non dui vitae fermentum.
 Integer nec neque risus. Suspendisse dapibus, tortor in laoreet ultricies, nulla nunc aliquam dui, sed
dignissim felis libero consectetur lacus. Nullam eget quam eu nisi condimentum euismod ac non mauris.
Cras id dolor justo. Duis tincidunt lectus a libero lacinia sagittis. In purus enim, facilisis eu semper nec,
euismod ut neque. Vivamus efficitur lorem nec leo tempor, ut sollicitudin dolor pharetra. Phasellus
viverra placerat nunc, a placerat lectus aliquam quis.
 Quisque id elementum tortor, a consequat quam. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Cras urna tortor, consequat a augue vel, fermentum dictum ipsum. Mauris porttitor gravida
est ac eleifend. Vestibulum et justo lacinia, euismod diam non, placerat sapien. Morbi dui magna,
mollis et quam at, interdum lacinia purus. Proin magna tellus, elementum nec commodo in, pharetra
eget nibh. Nam ultrices mauris in sagittis elementum. Nam risus nibh, pharetra id mollis non, aliquet
eu arcu. Ut aliquet vehicula nibh, eget auctor ex. Ut.

19. Call to Actions (CTAs)
Sometimes all you have to do is ask.
 Examples
 Buy buttons/“Add to cart”
 Information-gathering forms
 Subscription signups
 “Read More”
 “Try it Now”
 Help
 Social media share buttons/widgets
 In order to easily spot the CTA, it has to be placed correctly and designed
well. It should also be crystal clear and compelling.

20. Great call to action examples

21. More…

22. More…

23. Above the fold
All important content should go above the
fold, right?
Not necessarily. As more and more devices
were created, the fold kept changing.
Don’t worry. People will scroll.

24. Web Design & Development
The good stuff.

25. Web Design Donts
 Don’t over do it: 1-3 fonts are usually perfect for a website. Stick to a
limited color palette, under 5 colors.
 Don’t use sliders: I know, they look awesome. But they seriously hurt your
conversions because they divide your users attention
 Don't use background music on your web pages.
 Don’t forget to test what your website looks like on mobile before launch
 Don’t skimp on copywriting and SEO
 Don’t expect to get to home base on the first date: Just like you, consumers
do their research and check for negative experiences before purchasing
 Don’t use illegal content

26. Web Design Dos
 Use landing pages instead of sliders
 Make sure your website is compatible with all major browsers
 Matter to your users: Enough about you, let’s talk about your soon-to-be-clients
and their pain points.
 Be User-friendly & User-centric: Good usability helps to provide a seamless
experience for visitors and improves your chances of success. Do they use the
same verbiage you do to reference your products?
 Be Mobile friendly: Displays correctly on smartphones & tablets. Mobile phone
screens are roughly 1/5th the size of desktop computers.
 Track: Track the effectiveness of your campaigns and call to actions with coupon
codes, forms, and Google analytics.
 Optimize your load times: Visitors are impatient. Your website should load in
about 1-3 seconds. Resize your images! Data plans are getting smaller.
 Target your audience: What age are they? What is their experience with
technology?

27. Internet Users

28. Education & Income

29. Ethnicity & Community

30. Desktop vs. Mobile Users

31. Conversion rates
and visit share for
Ecommerce sites
Smartphone add-to-cart
and conversion rates are
much lower than for
desktop
90% of Time on Mobile is
Spent in Apps (chrome,
firefox, games, news, etc)

32. 80% of
internet
users own a
smartphone

33. Test, test, and test again
Look for the following issues….
 Browser bugs
 Functionality issues
 Accessibility issues
 Error tolerance

34. Search Engine Optimization (SEO)
Help Google find your site.

35. What the heck is SEO?!
 SEO stands for Search Engine
Optimization.
 SEO is a bunch of strategies, and
techniques to increase your
placement in the search results of
Google, Bing, etc.
 SEO is not a black-hat tactic. It is a
checklist of things you can do to
make your site as relevant as
possible to your visitors so they can
find you. Some items are worth
more points than others. Content is
still #1.

37. How to edit your web page for SEO

39. title
Meta desc

40. What else can you do to improve your
rankings?
 Register your domain for at least 5 years
 Forward relevant domains to appropriate content. Example: Forward
webdesignerdelaware.com to Teakettica web design page
 Create a google plus business page and get verified (also on bing places)
 Update your content often, like a blog
 Connect on social media and directories: yelp, manta, angie’s list, bbb,
chamber sites, twitter, facebook, linked in, state directories, etc
 Install an SSL certificate, even if you don’t sell anything online – NEW
 Analyze your focus keyphrase. Ie, Web design vs. web design Newark,
Delaware.
 Make sure you have a site map

41. Google Analytics & Search Console
Don’t forget!

42. Tracking your results
Google Analytics
 Will show you who your users are
by location, sex, age, how many
users per day, and more.
Google Search Console
 Helps you monitor and maintain
your site's presence in Google
Search results. Will show you
broken links and other errors.

43. More tools of the trade
 Google PageSpeed Insights: Check the speed and usability of your site on
multiple devices
 Is your website mobile friendly? Find out:
https://www.google.com/webmasters/tools/mobile-friendly/
 Keywordtool.io: 700+ keyword ideas based on a single keyword
 Google Keyword Planner: Enter a keyword or group of keywords into the
tool, and Google will return all sorts of helpful stats to guide your keyword
strategy
 XML Sitemaps: Build a Sitemap
 Link to all tools provided On references slide.

44. Follow up.
The most neglected marketing principle

45. The difference between you and the
competition is that you are going to follow
up. That is how you stand out.
 When you get a lead from your site, email or call right away.
 After the call, send a short bullet point list confirming the next steps
 Send a handwritten thank you note
 A brief phone call a few days later
 Try to connect with them every quarter if appropriate.
 Add them to your newsletter (with their permission)

46. You can have the best site in the galaxy,
but if you don’t follow up, there is no ROI.

47. How can we help?
We can design you a stunning website that generates leads.
Visit us at www.teakettica.com or call Jane at 302-525-8195.

48. References
 https://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/
 http://contentmarketinginstitute.com/2015/10/define-brand-voice/
 http://marketingland.com/power-call-action-strength-boosts-conversions-145845
 http://www.wordstream.com/blog/ws/2014/10/20/call-to-action-examples
 https://www.hostgator.com/blog/2013/09/26/9-practical-steps-planning-website/
 http://iampaddy.com/lifebelow600/
 http://www.socialmediatoday.com/content/web-design-11-characteristics-user-friendly-website
 http://www.seascapewebdesign.com/blog/what-mobile-friendly-website
 https://webdesignledger.com/20-dos-and-donts-of-effective-web-design/
 http://www.webs.com/blog/2015/12/02/10-small-business-website-dos-donts/
 https://www.jeffalytics.com/your-website-sucks/
 http://www.pewinternet.org/2015/06/26/americans-internet-access-2000-2015/
 http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
 https://blog.bufferapp.com/free-seo-tools

49. Join our mailing list @ www.teakettica.com
302-525-8195
jane@teakettica.com
© 2016 Teakettica LLC. All rights reserved.