This presentation describes a user-centered website design process that reduces risk and aligns your business goals with the goals of your audience. The result is a professional business website that attracts and converts valuable prospects.

1. From Awful to Awesome
Tips and Tools to Attract, Convert and Delight
Users
getlevelten.com i j k l m

2. Highly integrated, interactive & flexible
Marketing
Website
Content/User
Management
Knowledge
Base
Extra /
Intranets
Newsletters
SEO
Digital / Process
Management
Document
Management
Web Services
Landing Pages
Analytics / Reporting
CRM
Product
One-sheets
Content Delivery
Networks
Automated
Marketing Systems
Press Room
User Permissions
Blog
Wiki
Forum
Contracts
Workflow
Multiple Languages
Video Tutorials
Application/Spec
Guides
Mobile Apps

3. Houston, we have a problem.
Chaos Report by The Standish Group: Application Delivery
Average cost overrun: 45%
Time overrun: 63%
Functionality delivered on average: 67%

4. Why do projects fail?
Inability to communicate.
We are asked to estimate things that are
intangible.
We make the most important decisions when
we know the least about the product we are
creating.
Business models/requirements change often
which changes the scope of work.

5. Waterfall vs. Agile
Requirements Design Implementation Verification
Strategy Requirements
Design
Implementation
Verification
2 week cycles
Waterfall
Agile

6. Start by understanding
your business goals.

7. What is your overall marketing
strategy?

8. What are your sales goals?

9. How many leads do you need to hit
your sales goals?

10. What are your top 3 initiatives for
quarter/year?

11. What competition do you face?

12. Why is your website important for
your business?

13. Do you feel like you get enough
visitors to your website?

14. Are you happy with the rate your
website converts visitors into
leads?

15. Focusing on business
goals changes the way we
communicate with
decision makers.

16. Discovery

17. VAR
Step 1: Identify Users & Goals
5
Content
Contrib
utor
Current
Customer Prospect

18. 5
Step 2: User Needs
As a prospect, I would like
better understand how
Company Name’s
products/services will
improve my life.

19. 5
Step 2: User Needs
As a prospect, I would like
the ability to share what I
learn with my co-workers.

20. 5
Step 2: User Needs
As a prospect, I would like
the ability to download white
papers to learn more about
your technology.

21. 5
Step 2: User Needs
As a prospect, I would like
access to your learning
section so that I can
familiarize myself with your
technology.

22. 5
Step 2: User Needs
As a VAR, I would like the
ability to download sales and
marketing material so that I
can sell more products.

23. Step 2: User Needs
5
As the marketing manager of
the site, I would like the
ability to run reports to see
how many leads were
generated last month.

24. Attract. Convert.
Improve. Delight.

25. Attraction Stats
79% of links users click on are organic, not paid.
Companies that blog have 97% more inbound
links
Auto-posting to Facebook decreases likes and
comments by 70%
80% of Pinterest users are female
57% of TV viewers use the web simultaneously

26. Conversion Stats & Tips
CTAs promoting ebooks get almost twice the
click-through-rate as emails promoting webinars
Companies with 30+ landing pages generate 7x
more leads than those fewer than 10
CTAs in contrasting colors to the website
generate more clicks
Use matching action verbs on headlines and
buttons are more effective than using different
words

27. Mobile First Mentality
1024 x 768
320 x 480

30. Wireframes
 Show the structure of the
website
 Custom user paths
 Most important user
interface elements, their
position and relationships
between website pages

31. Wireframe Software
OmniGraffle
 Favorite of Mac
community
 Originally designed as a
diagram tool
 Wide range of stencils

32. Wireframe Software
Balsamiq Mockups
 For people who want a
quick and dirty layout
 Built on Adobe AIR
 Provides a variety of
hand-drawn pre-built
objects

33. Wireframe Software
Axure RP
 Available for both Mac
& PC
 Boasts a client list that
encompasses most
successful companies
around
 Very flexible with many
widgets, libraries and
master document

34. Wireframes: Things to Consider
Desktop Mobile
Focus on achieving
business goals.
Always keep the end-user
in mind.
As a developer, always,
always be involved in
the process.
Think “mobile first” and
create accordingly.

35. Mood Boards
Represent a mood,
atmosphere or feeling
as a way to research
ideas for future comps
that will be created.
 Sets creative
expectations
 Gives designers
better direction for
comps
 Saves time an
money

36. Mood Board: Things to Consider
 Does the chosen typography compliment the brand and
can it be translated to the web interface?
 Can selected patterns and/or textures be tiled to reduce
the overall file size of the site?
 Can image ratios be re-sized appropriately, and can they
be easily managed by less technical clients? Are the
standard image sizes (4:3/16:9) or will they require
cropping?

37. Comps
Static look and feel of the final
website.
Sets creative direction
Clients get excited – like
opening a present

38. Design
Considerations
Design for mobile first
Think about using circular
buttons rather than squares
and make large touch-points
Think about how responsive
design works and design site
accordingly
Don’t over design. Keep it
clean and simple
Use images that work well for
mobile – no embedded text
within images

39. Theme Integration
Responsive is a must
Twitter’s Bootstrap is
LevelTen’s preferred
framework
Choose a solution that
matches your needs, is easy
to work with and can
accomplish your goals
Choose a lightweight system
that compresses/minifies code

40. Chrome Extension: “Dimensions”

41. Development
Use a system that provides
support through a popular
community and can be
extended:
CMS: Drupal, WordPress,
Joomla, Ektron, Sitecore
Open-source is always nice
Good API for integration is a
must
A good CMS saves a
tremendous amount of $$$

42. Thank You!
brentb@getlevelten.com
Twitter: @brentbice
LinkedIn: linkedin.com/in/brentbice