Discovery to Design: 5 steps for planning your website

FROM DISCOVERY TO DESIGN5 crucial steps for planning your website

@Astute_Anna [email protected]

Join the conversation: #5steps

Process:[pros-es; especially British proh-ses]noun, plural processes

1. A systematic series of actions directed to some end: to devise a process for homogenizing milk.

creating a website.

1 ) Kickoff Meeting/Conversation

Common Agency/Freelancer Process

2 ) HERE ARE YOUR DESIGNS!!!!

What Processes Can Do:

1) Create Superior Products

BONUS:

4) Increase What We Can Charge for Our Services

2) Elevate User Experience

3) Provide Better Results

Site Map/User Flow1.

2.

3.

4.

5.

Customer Acquisition Funnel

Content

Wireframing/Site Architecture

Visual Design

WHAT IS BEST FOR YOUR

USERS IS BEST FOR YOUR BUSINESS

JUST START TALKING.

Guidelines for Planning

Try to assemble a small team for input

Establish goals for the site

Complete an audit of the existing website (What’s working, what isn’t)

Host white boarding sessions for brainstorming

Refine goals: Identify 1-3 top priorities for the website.

SITE MAPPING & USER FLOW

The sitemap is a basic outline of the content and hierarchy of the

site.

The user flow diagram visualizes

the different paths a user may take

through a website.

CUSTOMER ACQUISITION FUNNEL

You are theorizing about the journey that a user will take from the moment they arrive at your

website, to the point of conversion.

FOCUS.

DESIGN THAT DOES NOT

DRIVE RESULTS IS NOT GOOD

DESIGN.

In preparing for battle, I always found that plans are useless, but planning is indispensable.

Dwight D. Eisenhower

CONTENT

THE STORY

HOW WE SELL

WHAT WE BASE OUR DESIGNS ON

THE “HARD” PART….

THE #1 THING THAT HOLDS UP A WEBSITE PROJECT

HOW DO WE GENERATE CONTENT?

Use your sitemap to create a copy document:

- Identify pages based on your sitemap.

- Break your pages down according to what type of content you expect to live on each page.

IDEAL READING LEVEL FOR WEBSITE CONTENT

HOMEPAGE:

SUBPAGES:

6th Grade

8th Grade

Million dollar words don’t earn points here. They lose users.

Earnest Hemingway’sThe Old Man and the Sea registers at a reading level of Grade 4.

FUN FACT

TEST YOUR COPY

http://www.readabilityformulas.com/free-readability-formula-tests.php

“EASILY-DIGESTABLE CONTENT”

Use smaller paragraphs and include icons and images to break up content and make

it infinitely more readable.

Simplify and make your content easy to skim.

TRIM THE FAT

GREAT RESOURCE ON WRITING FOR THE WEB

http://www.usability.gov/how-to-and-tools/methods/writing-for-the-web.html

“It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to remove.”

Antoine de Saint Exupery

IF YOU’RE NOT A COPYWRITER, HIRE ONE.

- It’s what they do everyday. They can do it better and faster than you can.

- They can create copy that is optimized for search engines

- The can create copy that is engaging, grammatically correct, and easily readable at the appropriate grade level.

WIREFRAMING/SITE ARCHITECTURE

RESPONSIVE WEB DESIGN HAS

NECESSITATED THAT WIREFRAMES, ALONG WITH EVERY OTHER

STEP IN OUR PROCESS, BECOME LESS

CONCRETE–A LITTLE MORE FLEXIBLE, A

LITTLE MORE FLUID.

SO HOW DO WE DO IT?

• Plan an order for the presentation of information.

- Look at the content that has already been compiled. Is there a clear hierarchy that is inherent to that information?

• Ask, “What is the main point of this page.” Start there and plan around it, ensuring that you aren’t stealing focus from the main point.

WIREFRAMES ARE THE BRIDGE FROM CONTENT TO DESIGN.

DESIGN

MOBILE FIRST

The idea that rather than starting by designing for the desktop browser and scaling down, “gracefully degrading” our website designs, we start with the lowest, smallest common demoninator and build up, “progressively enhancing” our websites – adding features and functions as we go.

ATOMIC WEB DESIGN

A methodology presented by Brad Frost in 2013 as a way to create full design systems for our websites.

“All matter is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe. Similarly interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there.”

PAGE DESIGNS

STYLE GUIDES/PATTERN LIBRARIES

+

Site Map/User Flow

Customer Acquisition Funnel

Content

Wireframing/Site Architecture

Visual Design