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 $$$

Thank You!brentb@getlevelten.com

Twitter: @brentbice

LinkedIn: linkedin.com/in/brentbice