From Awful to Awesome 
Tips and Tools to Attract, Convert and Delight 
Users 
getlevelten.com i j k l m
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
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%
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.
Waterfall vs. Agile 
Requirements Design Implementation Verification 
Strategy Requirements 
Design 
Implementation 
Verification 
2 week cycles 
Waterfall 
Agile
Start by understanding 
your business goals.
What is your overall marketing 
strategy?
What are your sales goals?
How many leads do you need to hit 
your sales goals?
What are your top 3 initiatives for 
quarter/year?
What competition do you face?
Why is your website important for 
your business?
Do you feel like you get enough 
visitors to your website?
Are you happy with the rate your 
website converts visitors into 
leads?
Focusing on business 
goals changes the way we 
communicate with 
decision makers.
Discovery
VAR 
Step 1: Identify Users & Goals 
5 
Content 
Contrib 
utor 
Current 
Customer Prospect
5 
Step 2: User Needs 
As a prospect, I would like 
better understand how 
Company Name’s 
products/services will 
improve my life.
5 
Step 2: User Needs 
As a prospect, I would like 
the ability to share what I 
learn with my co-workers.
5 
Step 2: User Needs 
As a prospect, I would like 
the ability to download white 
papers to learn more about 
your technology.
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.
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.
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.
Attract. Convert. 
Improve. Delight.
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
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
Mobile First Mentality 
1024 x 768 
320 x 480
Wireframes 
 Show the structure of the 
website 
 Custom user paths 
 Most important user 
interface elements, their 
position and relationships 
between website pages
Wireframe Software 
OmniGraffle 
 Favorite of Mac 
community 
 Originally designed as a 
diagram tool 
 Wide range of stencils
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
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
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.
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
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?
Comps 
Static look and feel of the final 
website. 
Sets creative direction 
Clients get excited – like 
opening a present
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
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
Chrome Extension: “Dimensions”
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 $$$
Thank You! 
brentb@getlevelten.com 
Twitter: @brentbice 
LinkedIn: linkedin.com/in/brentbice

User-Centered Website Design

  • 1.
    From Awful toAwesome 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 havea problem. Chaos Report by The Standish Group: Application Delivery Average cost overrun: 45% Time overrun: 63% Functionality delivered on average: 67%
  • 4.
    Why do projectsfail? 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 youroverall marketing strategy?
  • 8.
    What are yoursales goals?
  • 9.
    How many leadsdo you need to hit your sales goals?
  • 10.
    What are yourtop 3 initiatives for quarter/year?
  • 11.
  • 12.
    Why is yourwebsite important for your business?
  • 13.
    Do you feellike you get enough visitors to your website?
  • 14.
    Are you happywith the rate your website converts visitors into leads?
  • 15.
    Focusing on business goals changes the way we communicate with decision makers.
  • 16.
  • 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: UserNeeds 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.
  • 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  Showthe 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 BalsamiqMockups  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 AxureRP  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 toConsider 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 Representa 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: Thingsto 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 lookand feel of the final website. Sets creative direction Clients get excited – like opening a present
  • 38.
    Design Considerations Designfor 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 Responsiveis 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.
  • 41.
    Development Use asystem 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