Strategy

User Needs

Site Objectives

User Research

• Ethnographic Research
• Surveying
• Customer Feedback and Testing
• Focus Group Administration
• Non-Directed Interview
• Contexture Interview
• Mental Modeling
• Mood Boards
• Card Sorting
• Analytics
• Competitive Analysis

Structure

Interaction Design

Information Architecture

Interaction Design

via Interaction-Design.org

Interaction Design

Mental Model

via Interaction-Design.org

Interaction Design

User Flow

Who is the user, how did they arrive on the site, what are they trying to do? What are the steps it will take for them to do it?

Interaction Design

User Flow

via ConversionXL

Creative Commons BY-NC-SA Murray Thompson via Flickr

Site Map

Information Architecture

IA: Site Map

Sequential

Start

Story

End

Hierarchichal

Home

About

Location

Hours

Ownership

Menu

Reviews

Events

Feature

Reviews

Hours/Location

Careers

Lunch

Dinner

Weekends

Critic Reviews

Yelp Reviews

Book an Event

Event Types

Matrix

Browse by Date Created

Browse by Title

via UX Matters

Stanford Library Redesign

Site Map

Visual Vocabulary

Resources:

quirktools/smaps

via UX Matters

Aside: Site Maps for SEO

• Example (generated by wordpress)
• Example from Siteground
• Read more at wikipedia

SEO: Search Engine Optimization

Skeleton

Interface Design

Navigation Design

Information Design

Interface Design

• buttons

• check boxes
• links
• dropdown menus

Navigation Design

• Global Nav

• "Breadcrumb" (local)

Information Design

• Organizing information

• Prioritize what's important

• Wayfinding (related to nav)

Wireframes

Photo CC BY-SA JM3 on Flickr

CC by Doos via Flickr

Annotated Wireframes

Resources

• Pen & Paper
• Balsamiq
• UXPin
• Sketch
• InVision