Download - User-Centered Website Design
Tips and Tools to Attract, Convert and Delight
Users
From Awful to Awesome
getlevelten.com i j k l m
Website
Marketing
Content/User
Management
Knowledge Base
Extra / Intranets
Web Services
Document Management
SEO
Newsletters
Landing Pages
Analytics / Reporting
CRM
Automated
Marketing Systems
Content Delivery
Networks
Digital / Process
Management
Product
One-sheets
Press Room
Blog
Wiki
Forum
Contracts
Workflow
Multiple Languages
User Permissions
Video Tutorials
Application/Spec
Guides
Mobile Apps
Highly integrated, interactive & flexible
Houston, we have a problem.
Average cost overrun: 45%
Time overrun: 63%
Functionality delivered on average: 67%
Chaos Report by The Standish Group: Application Delivery
Business models/requirements change often
which changes the scope of work.
Why do projects fail?
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.
Inability to communicate.
Requirements Design Implementation Verification
Strategy Requirements
Design
Implementation
Verification
2 week cycles
Waterfall
Agile
Waterfall vs. Agile
Start by understandingyour 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
As a prospect, I would like better understand how Company Name’s products/services will improve my life.
Step 2: User Needs
5
As a prospect, I would like the ability to share what I learn with my co-workers.
Step 2: User Needs
5
As a prospect, I would like the ability to download white papers to learn more about your technology.
Step 2: User Needs
5
As a prospect, I would like access to your learning section so that I can familiarize myself with your technology.
Step 2: User Needs
5
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
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.
79% of links users click on are organic, not paid.
Attraction Stats
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
CTAs promoting ebooks get almost twice the
click-through-rate as emails promoting webinars
Conversion Stats & Tips
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
1024 x 768
320 x 480
Mobile First Mentality
Show the structure of the
website
Custom user paths
Most important user
interface elements, their
position and relationships
between website pages
Wireframes
Wireframe Software
OmniGraffle
Favorite of Mac
community
Originally designed as a
diagram tool
Wide range of stencils
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
Wireframe Software
Wireframes: Things to Consider
Desktop Mobile
Focus on achieving
business goals.
Think “mobile first” and
create accordingly.
Always keep the end-
user in mind.
As a developer, always,
always be involved in
the process.
Mood BoardsRepresent 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
Does the chosen typography compliment the brand and
can it be translated to the web interface?
Mood Board: Things to Consider
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 $$$
