58
Building a customer-focused information architecture Devin Asaro, Content Strategist — @copydev Greg Harron, UX Strategist — @gregharron #IAatDMFB

How to Build a Customer-Focused Information Architecture

Embed Size (px)

Citation preview

Page 1: How to Build a Customer-Focused Information Architecture

Building a customer-focused information architectureDevin Asaro, Content Strategist — @copydev Greg Harron, UX Strategist — @gregharron

#IAatDMFB

Page 2: How to Build a Customer-Focused Information Architecture

Get the slides: bit.ly/CustomerIA

Devin Asaro, Content Strategist — @copydevGreg Harron, UX Strategist — @gregharron

#IAatDMFB

Page 3: How to Build a Customer-Focused Information Architecture

What is information architecture?

#IAatDMFB

Page 4: How to Build a Customer-Focused Information Architecture

IA is not just your sitemap

#IAatDMFB image source: http://bit.ly/1JFL0MU

Page 5: How to Build a Customer-Focused Information Architecture

IA is not just your content model

#IAatDMFB image source: http://bit.ly/1JFL0MU

Page 6: How to Build a Customer-Focused Information Architecture

IA is not just your taxonomy

#IAatDMFB image source: http://bit.ly/1JFL0MU

Page 7: How to Build a Customer-Focused Information Architecture

IA is not just your metadata

#IAatDMFB image source: http://bit.ly/1JFL0MU

Page 8: How to Build a Customer-Focused Information Architecture

IA is not just your tagging structure

#IAatDMFB image source: http://bit.ly/1JFL0MU

Page 9: How to Build a Customer-Focused Information Architecture

IA is not just your product hierarchy

#IAatDMFB image source: http://bit.ly/1JFL0MU

Page 10: How to Build a Customer-Focused Information Architecture

“On the web, IA is structured information that contributes to the relationship of meaning between a website and the people who use it.

HERE’S OUR DEFINITION

”#IAatDMFB @copydev

Page 11: How to Build a Customer-Focused Information Architecture

On the web, IA is structured information that contributes to the relationship of meaning between a website and the people who use it.

(This is a two-way relationship)

“”

HERE’S OUR DEFINITION

#IAatDMFB

Page 12: How to Build a Customer-Focused Information Architecture

(Actually… three)

On the web, IA is structured information that contributes to the relationship of meaning between a website and the people and programs that use it.

“”

HERE’S OUR DEFINITION

#IAatDMFB

Page 13: How to Build a Customer-Focused Information Architecture

Information architecture is about helping people understand their surroundings and find what they're looking for—in the real world as well as online.

— The IA Institute http://bit.ly/1EE08pT

“”

BUT OTHER PEOPLE SAY SMART STUFF, TOO…

#IAatDMFB

Page 14: How to Build a Customer-Focused Information Architecture

— Louis Rosenfeld http://bit.ly/1F7iPWn

[Information architecture is] the art and science of structuring, organizing and labeling information to help people find and manage information.

“”

#IAatDMFB

Page 15: How to Build a Customer-Focused Information Architecture

Notice a pattern?

#IAatDMFB

image source: http://bit.ly/1bPp2eJ

Page 16: How to Build a Customer-Focused Information Architecture

The world is confusing. We’re here to help people navigate it.

#IAatDMFB

image source: http://bit.ly/1bPp2eJ

Page 17: How to Build a Customer-Focused Information Architecture

IA isn’t just for information architects, just as design isn’t just for designers.

IA is for business people, too.

#IAatDMFB

Page 18: How to Build a Customer-Focused Information Architecture

#IAatDMFB

Page 19: How to Build a Customer-Focused Information Architecture

My company can’t agree on anything. Do we need to fix our culture before we can build our IA?

Yes and no

#IAatDMFB

Page 20: How to Build a Customer-Focused Information Architecture

IA can actually help you overcome organizational conflicts.

No.

#IAatDMFB

Page 21: How to Build a Customer-Focused Information Architecture

First, you have to agree to reframe your thinking, and seek a common solution.

…but yes.

And that takes some doing.

#IAatDMFB

Page 22: How to Build a Customer-Focused Information Architecture

#IAatDMFB

How do we do it?

Page 23: How to Build a Customer-Focused Information Architecture

Phase One:Establishing IA Foundation

image source: http://bit.ly/1H1Qsqw

#IAatDMFB

Page 24: How to Build a Customer-Focused Information Architecture

First rule:Let your users make the important decisions.

image source: http://bit.ly/1AWWLcW

#IAatDMFB

Page 25: How to Build a Customer-Focused Information Architecture

Second rule:To create change, you have to look for new sources of information.

#IAatDMFB image source: http://bit.ly/1zZP9eF

Page 26: How to Build a Customer-Focused Information Architecture

Interaction

How do we get raw user information?

ObservationIn the lab In the wild

image source: http://bit.ly/1L0qZlhimage source: https://flic.kr/p/doVSMj#IAatDMFB

Page 27: How to Build a Customer-Focused Information Architecture

image source: http://bit.ly/1A09m3T

Users ≠ Customers Your website is also an internal tool

Page 28: How to Build a Customer-Focused Information Architecture

Lay out your tools (in no particular order)

image source: http://bit.ly/1E5uWPv

Gather your toolsAvoid the temptation to organize them

Page 29: How to Build a Customer-Focused Information Architecture

image source: http://bit.ly/1RF4ZRx

Your CEO is NOT a primary userBalance opinion against empirical data

Page 30: How to Build a Customer-Focused Information Architecture

image source: http://bit.ly/1zXefL6

Phase Two:Create logical groupings

#IAatDMFB

Page 31: How to Build a Customer-Focused Information Architecture

Restore order and corral the chaos

#IAatDMFB

image source: http://bit.ly/1zZPCgG

Page 32: How to Build a Customer-Focused Information Architecture

#IAatDMFB

What do you need?

Page 33: How to Build a Customer-Focused Information Architecture

Ingredient #1: Doggie bag from Phase 1

#IAatDMFB image source: http://bit.ly/1zXefL6

Page 34: How to Build a Customer-Focused Information Architecture

Ingredient #2: Real live customers

#IAatDMFB image source: http://bit.ly/1L1YPX3

Page 35: How to Build a Customer-Focused Information Architecture

Secret Ingredients: Pinch of courage + dash of speed

#IAatDMFB

image source: http://bit.ly/1ECscuu

Page 36: How to Build a Customer-Focused Information Architecture

But first, let’s demystify this card sorting stuff.

What is card sorting?

#IAatDMFB

Page 37: How to Build a Customer-Focused Information Architecture

…and there you have it.

#IAatDMFB

Page 38: How to Build a Customer-Focused Information Architecture

What are we looking for?

Consistency with user expectations!

• natural groupings based on user mindset

• clear, distinct meaning

• mental models of how things relate to one another

ambiguities terminology usage/understanding concept overlap

#IAatDMFB

Page 39: How to Build a Customer-Focused Information Architecture

#IAatDMFB

Open and/or closed

OPEN = what things go together?

CLOSED = test your labels

HYBRID = test labels, allow user to customize

Ideally, Open THEN Closed

Page 40: How to Build a Customer-Focused Information Architecture

#IAatDMFB

Scenario 1: Wide Open

image source: http://bit.ly/1JdgBYi

Page 41: How to Build a Customer-Focused Information Architecture

Users sort cards into logical groupings and provide a label for each category

Open Card Sort

#IAatDMFB

Page 42: How to Build a Customer-Focused Information Architecture

Scenario 2: Round Holes?

#IAatDMFB

image source: http://bit.ly/1A0kC0D

Page 43: How to Build a Customer-Focused Information Architecture

#IAatDMFB

Closed/Hybrid Card Sort

Hybrid Card Sorting exercise to identify common groupings and understand user mental models for information architecture. Users sort cards to predefined

categories.

With Hybrid version, users also have option to create new categories if they don’t see a true fit.

Page 44: How to Build a Customer-Focused Information Architecture

For best results… Mash up your methods

#IAatDMFB

• open vs closed • physical vs digital • moderated vs unmoderated • group vs individual

• open then closed • moderated then unmoderated • compare customer and business stakeholder results

Page 45: How to Build a Customer-Focused Information Architecture

Practical stuff

1.30-40 cards is optimal, 50-60 max

2.Randomize card order (and categories if doing closed sort)

3.Vary wording and terminology on cards

4.Set time/workload expectations with participants up front

5.Encourage the participant to think aloud

6.Ask follow-up questions

Page 46: How to Build a Customer-Focused Information Architecture

#IAatDMFB

Analyze results

-Similarity - which cards were grouped together most commonly

-Categorization - how often did cards get grouped to the same category

-Qualitative review of notes and observations

Page 47: How to Build a Customer-Focused Information Architecture

#IAatDMFB

Visualization of data clusters, showing % of participants in agreement with category groupings.

What did we learn from this highlighted data point?

Dendograms

Page 48: How to Build a Customer-Focused Information Architecture

Toolkit #1

Toolkit #2

Similarity Matrix

#IAatDMFB

Shows % of participants that grouped pairs of cards together - Highlights common pairings/clusters.

Page 49: How to Build a Customer-Focused Information Architecture

Let the data do the talking

#IAatDMFB

image source: http://bit.ly/1K6gLSQ

Page 50: How to Build a Customer-Focused Information Architecture

Plenty o’ fish Lots of online tool options out there.

OptimalSort

UserZoom

UsabilityTools

ConceptCodify

SimpleCardSort

xSort

and more…

#IAatDMFB

Page 51: How to Build a Customer-Focused Information Architecture

What now?

#IAatDMFB

image source: http://bit.ly/1JHzhNX

Page 52: How to Build a Customer-Focused Information Architecture

We want to identify this path BEFORE we pave.

#IAatDMFB

Page 53: How to Build a Customer-Focused Information Architecture

Tree Test Scenario-based test to quickly test intuitiveness of site navigation and architecture BEFORE building the site.

#IAatDMFB

Page 54: How to Build a Customer-Focused Information Architecture

Tree Test Results Rich data generated automatically to support navigation and architecture decision making.

#IAatDMFB

Page 55: How to Build a Customer-Focused Information Architecture

Tree Test First Click Results First-click results provide great insight into the distinct understanding of top level labels.

#IAatDMFB

Page 56: How to Build a Customer-Focused Information Architecture

Tree Test Participant Paths & Destinations Results See how users navigated for each scenario

#IAatDMFB

Page 57: How to Build a Customer-Focused Information Architecture

#IAatDMFB

End Result: Customer-Validated Information Architecture

Page 58: How to Build a Customer-Focused Information Architecture

Questions?

Devin Asaro, Content Strategist @copydev Greg Harron, UX Strategist @gregharron

#IAatDMFB