information architecture: the strategic structure of great ux - wiad 2017

63
Information Architecture 02.18.2017 The Strategic Structure of Great UX

Upload: jessica-duverneay

Post on 20-Mar-2017

1.230 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Information Architecture

02.18.2017

The Strategic Structure of Great UX

Page 2: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Jessica DuVerneay

Manager, Strategy

One North Interactive

Chicago, IL

Page 3: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

3

Page 4: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Explain the relationships between Strategy, IA, & UX.

Share My Failures.

Help You Avoid Them.

Page 5: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Story Time

Page 6: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

6

Building a Mud Hut

Page 7: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

7

Building a Mud Hut

Page 8: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

8

Building a Mud Hut

Day 3

Page 9: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

9

Building a Mud Hut

MUDSLIDE!!!

Page 10: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

10

Page 11: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Aspirational Concrete Complete

Page 12: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Story Time Part 2

Page 13: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

13

Page 14: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Strategy IA UX

Page 15: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Definition May Look Like

An abstract but clear and concise path forward for digital products or

services.

Supports business strategy and user needs.

Deciding what places to make.

The “Why”

Stakeholder Alignment

Market Research

Competitive Analysis

User Research

Roadmap

KPIs & Goals

Strategy

15

Page 16: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Definition May Look Like

The creation of intentional structures that support the

extension of strategy into digital and physical places.

Making places made of information that allow meaning making, wayfinding, findability, and

understanding.

The “What”

Taxonomy

Sitemap

Navigation & Wayfinding

Wireframes

Content Model

Metadata & Labels

Information Architecture (IA)

16

Page 17: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Definition May Look Like

Delightful interactions and meaningful experiences centered

around user needs and expectations – making the places

of information be the best that they can be in order to gain product or

service traction.

The “How”

User Flows

Personas

Interactive Prototypes

User Testing

Cross Channel Touchpoint Map

Interaction Design

User Experience (UX)

17

Page 18: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

18

Page 19: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

We Had A Digital Strategy & Roadmap

19

Short Term2017 – Release 1

Establish the CoreReplace several aging websites with a consolidated, integrated, mobile-friendly presence.

Medium Term2-3 Years – Release 2+

Extend ConnectionsFurther integrate digital marketing tools, create a more connected experience, and track behavior across channels.

Long Term3-5 Years

Personalize ExperienceOffer a personalized, seamless digital experience that replicates the feeling of offline interactions and adds real value to relationships.

Page 20: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

We Had A Website Strategy

20

Information Architecture

Experience & Visual Design

Technology Implementation

Plan

Content Governance Plan

• Journeys achieved through relational data

• Improved navigation

• Robust Search

• Evolved visual direction

• Responsive Design

• Achieve desired level of accessibility compliance

• Implement a combined site architecture with CMS

• Migrate appropriate site content

• Position content management in a single backend instance

• Achieve desired level of accessibility compliance

• Execute a comprehensive redirect strategy

• Enable tracking of anonymous visitors

• Import contacts from CRM to enable tracking of known users

• Simplify ecosystem toolset to essential systems

• Enable Active Directory login to CMS for content administration

• Plan for content ownership and roles

• Content workflow diagram

• Guidelines, procedures and tools to operationalize content governance

• Main site navigation structure and “sub-sites” identified

• Sub-navigation for sub-sites determined

• Clarified service architecture – clearer paths across industries and practices, and better connections between entities

• New topic-based taxonomy for easier content discovery

• Header and footer content determined

Page 21: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

We Had A Plan for IA

21

• Clarified product architecture – clearer paths across types of

offerings , and better connections between these offerings

• New taxonomy for easier content discovery

• Main site navigation structure and “sub-sites” identified

• Sub-navigation for sub-sites determined

• Header and footer content determined

Page 22: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

And We Needed it…

22

55global nav

product elements

35%use the words

“Advising”, “Consulting”, or

“Services”

6mega-products that

contain a poly-hierarchical mix of

other products

Page 23: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

We Had A Process for IA

23

1: Gather Inputs

• Review current client engagement with service pages

• Discussions with marketing & firm area leaders (as needed)

• Competitive comparison

2: Recommendations

• Collaborate with internal stakeholders on revisions

• Draft clarified service architecture

• Illustrate impact to site navigation, content structure

3: Implications

• Integrate into navigation and content design

• Map existing content to new structure

Page 24: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

IA UX & Design

Design & Functional

Specs

FED & Development

FED & Development

OCT NOV DEC JAN FEB

Page 25: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

We *Had* A Process for IA

25

1: Gather Inputs

• Review current client engagement with service pages

• Discussions with marketing & firm area leaders (as needed)

• Competitive comparison

2: Recommendations

• Collaborate with internal stakeholders on revisions

• Draft clarified service architecture

• Illustrate impact to site navigation, content structure

3: Implications

• ? Integrate into navigation and content design

• ? Map existing content to new structure

Page 26: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

26

Page 27: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

27

Page 28: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

28

Page 29: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

IA UX & Design

Design & Functional

Specs

FED & Development

FED & Development

OCT NOV DEC JAN FEB

Page 30: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Strategy IA UX

Page 31: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Putting it Together

Page 32: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Aspirational Concrete Complete

Page 33: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

33

Page 34: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Aspirational Concrete Complete

Page 35: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

35

Mud hut

Page 36: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Strategy IA UX

Page 37: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

37

Page 38: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

38

?

Page 39: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Strategy IA UX

Page 40: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Strategy IA UX

Aspirational Concrete Complete

Page 41: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Abstract strategy is made concrete through IA;

Concrete IA is made complete through UX

Page 42: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Strategy IA UX

Aspirational Concrete Complete

“We want to build a library”

“We need bricks, and we need to stack the bricks intelligently, in

the right order”

“We have a house, we plaster the walls and make sure the doors are in the

right spot”

Big Picture Structure Interaction

You might say:

42

Page 43: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Strategy IA UX

Page 44: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Strategy IA UX

Page 45: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Strategy IA UX

Page 46: Information Architecture: The Strategic Structure of Great UX - WIAD 2017
Page 47: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Strategy IA UX

Page 48: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Now What?

Page 49: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

I Messed Up.

Learn from failure.

Page 50: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

50

I Should Have:

Known the questions can we answer with each phase and how they are interdependent

Understood the reasons these phases are descopedand explain what can happen if we descope or skip

Provided Concrete Examples of how IA will impact the project

Showed how IA can expand beyond the site UX into visual design, build, service, and experience design

Taken a time out!

Page 51: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Strategy IA UXWhat do we want this to do? Why?

Who is this for?

What are our constraints?

What does success look like?

How might this differentiate us from our peers?

How is this related to other parts of our ecosystem?

Based on what we know about our strategy, what pieces do we need?

How are they organized?

How will this structure meets the needs of the org? Of the people using it?

Now that we have the pieces and and a sense of how they work together, how can we make this awesome?

Questions We Can Answer

51

Page 52: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

“It’s fine the way it is.

We don’t have time.”

“No budget for that step.

It’s too politically loaded."

“We can do it better internally.

That’s not in scope.”

“It’s not important.

Just add that in when you make the designs.”

Page 53: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Strategy IA UX

Products that don’t address a business need

Specific tactics deployed without the intended

results

Something that will not be valuable or have utility in

the near future

Wasted budget

Products that don’t make sense & are hard to navigate

Disorienting user experience,even though design, or UI might

seem fine (or even great)

Issues with findability & scalability

Difficulty creating great UX

Complications & increased budget in build

Low user adoption & opinion of the system

Increased calls to support

Poor Conversion

Odd or lack of integration with the rest of the

information environment

If We De-scope or Skimp, Expect:

53

Page 54: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

The Numbers

54

7.5 weeks of time

burned

4.5xover the cost of initial IA phase

4team members that

had headaches

Page 55: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

55

Advocate & Make Clear the Value of IA

Tell Your Stories

Know the questions can we answer with Strategy, IA & UX -and how they are interdependent

Understand the reasons Strategy, IA, & UX are de-scoped, and explain what can happen if we de-scope

Provide Concrete Examples of how IA will impact your project

Show how IA can expand beyond the site UX into visual design, build, service, and experience design

Take a time out (or go guerilla)

Page 56: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

56

?

Page 57: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

57

Page 58: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

Next Steps

Page 59: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

59

Books

Information Architecture -For the Web and Beyond, 4th Edition - Rosenfeld, Morville, Arango

How to Make Sense of Any Mess - Covert

Understanding Context - Hinton

Page 60: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

60

IA Institute & Mentoring Program

WIAD

Library of Online Resources

Mentoring Program

Leadership Opportunities

Salary Survey

iainstitute.org

Page 61: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

61

2017 IA Summit

Vancouver, Canada

March 22-26, 2017

IA, UX, & Strategy

3 Days, 3 Tracks

Pre-conference workshops

iasummit.org

Page 62: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

62

Work (Shameless Plug)

One North is Hiring: • UX Strategists• Senior UX Strategists• Senior QA• Developers / FED• Account Coordinator• …More!

onenorth.com/careers

Page 63: Information Architecture: The Strategic Structure of Great UX - WIAD 2017

THANKS!