user-centered design at the economist

54
@dsetia_1 User-Centered Design at The Economist Danny Setiawan Lead UX for Mobile, The Economist 06.08.2016

Upload: danny-setiawan

Post on 15-Apr-2017

369 views

Category:

Business


0 download

TRANSCRIPT

Page 1: User-Centered Design at The Economist

@dsetia_1

User-Centered Design at The Economist

Danny Setiawan Lead UX for Mobile, The Economist06.08.2016

Page 2: User-Centered Design at The Economist

@dsetia_1

Objective

Share insights and practical steps to improve UX contribution in Agile based on my experience of

implementing User-Centered Design for The Economist mobile team.

Page 3: User-Centered Design at The Economist

@dsetia_1

Agenda• Intro • UX activities • At The Economist • What does that look like?

• Integration UX into Agile workflow • Going Lean • Usability Testing Driven Development

• Questions?

Page 4: User-Centered Design at The Economist

@dsetia_1

3 types of UX activity

Page 5: User-Centered Design at The Economist

@dsetia_1

Operational• Goal: Flow (unblocking dev)

• Activity: Reacting to issues raised by developers during sprint

• UX role: Produce deliverables so dev team can complete stories

• Measure: Team’s velocity

Page 6: User-Centered Design at The Economist

@dsetia_1

DevelopmentTask 1 Task 2 Task 3 Task 4 … DoneBacklog

UX resource

Page 7: User-Centered Design at The Economist

@dsetia_1

DevelopmentTask 1 Task 2 Task 3 Task 4 … DoneBacklog

UX!?

UX resource

Page 8: User-Centered Design at The Economist

@dsetia_1

DevelopmentTask 1 Task 2 Task 3 Task 4 … DoneBacklog

UX!?

UX!?

Page 9: User-Centered Design at The Economist

@dsetia_1

DevelopmentTask 1 Task 2 Task 3 Task 4 … DoneBacklog

UX!?

Page 10: User-Centered Design at The Economist

@dsetia_1

DevelopmentTask 1 Task 2 Task 3 Task 4 … DoneBacklog

UX!?

UX!?

Page 11: User-Centered Design at The Economist

@dsetia_1

DevelopmentTask 1 Task 2 Task 3 Task 4 … DoneBacklog

UX!?

Page 12: User-Centered Design at The Economist

@dsetia_1

DevelopmentTask 1 Task 2 Task 3 Task 4 … DoneBacklog

Page 13: User-Centered Design at The Economist

@dsetia_1

Tactical• Goals: Flow (smooth implementation), value (what’s important for

customers)

• Activity: Preparing everything that’s required to implement stories for upcoming sprint (prioritize use cases, test solutions)

• UX role: Contribute to story definition, prioritization and produce deliverables addressing potential blockers

• Measure: Team’s velocity, customer satisfaction

Page 14: User-Centered Design at The Economist

@dsetia_1

Development

Task 1 Task 2 … DoneBacklog

UX resource

Task 3 Task 4

Page 15: User-Centered Design at The Economist

@dsetia_1

Development

Task 1 Task 2 … DoneBacklog

UX resource

ElaborationIdeate Prototype Test Prep for dev

Page 16: User-Centered Design at The Economist

@dsetia_1

Development

Task 1 Task 2 … DoneBacklog

ElaborationIdeate Prototype Test Prep for dev

Page 17: User-Centered Design at The Economist

@dsetia_1

Development

Task 1 Task 2 … DoneBacklog

ElaborationIdeate Prototype Test Prep for dev

Page 18: User-Centered Design at The Economist

@dsetia_1

Development

Task 1 Task 2 … DoneBacklog

ElaborationIdeate Prototype Test Prep for dev

Page 19: User-Centered Design at The Economist

@dsetia_1

Development

Task 1 Task 2 … DoneBacklog

ElaborationIdeate Prototype Test Prep for dev

Page 20: User-Centered Design at The Economist

@dsetia_1

Development

Task 1 Task 2 … DoneBacklog

ElaborationIdeate Prototype Test Prep for dev

Page 21: User-Centered Design at The Economist

@dsetia_1

Development

Task 1 Task 2 … DoneBacklog

ElaborationIdeate Prototype Test Prep for dev

Page 22: User-Centered Design at The Economist

@dsetia_1

Development

Task 1 Task 2 … DoneBacklogIdeate Prototype Test

ElaborationPrep for dev

Page 23: User-Centered Design at The Economist

@dsetia_1

Strategic• Goals: Growth (customer segment and problem to solve)

• Activity: Research to identify and validate opportunities

• UX role: Facilitate discovery phase, ideate and test solution

• Measure: Acquisition metrics

Page 24: User-Centered Design at The Economist

@dsetia_1

Development

Task 1 Task 2 … DoneBacklogIdeate Prototype Test Prep for dev

Elaboration

Page 25: User-Centered Design at The Economist

@dsetia_1

Development

… DoneBacklog

Elaboration

Ideate + test solution

Discovery

Identify + validate new opportunities

User Research

Stakeholders’ Input

Page 26: User-Centered Design at The Economist

@dsetia_1

At The Economist

Page 27: User-Centered Design at The Economist

@dsetia_1

OperationalTacticalStrategic

Mar 2015

Activities breakdown Economist Mobile UX Team

Page 28: User-Centered Design at The Economist

@dsetia_1

OperationalTacticalStrategic

Mar 2016

Activities breakdown Economist Mobile UX Team

Page 29: User-Centered Design at The Economist

@dsetia_1

How ?Change of Culture

Page 30: User-Centered Design at The Economist

@dsetia_1

“Culture

set of beliefs, values, and behaviors, including their embodiment in artifacts; that are shared by a group of people

WORKING DEFINITION

Page 31: User-Centered Design at The Economist

@dsetia_1

Culture

• Belief: How we believe things work (world view)

• Value: What we consider important (prioritize)

• Behavior: What we do to get the value based on the world view we subscribe to

• Artifacts: Manifestation of our behavior

Page 32: User-Centered Design at The Economist

@dsetia_1

Example

• Belief: User testing is a waste of time

• Value: Efficiency

• Behavior: Not supporting user testing initiative

• Artifacts: Email, verbal communication

Page 33: User-Centered Design at The Economist

@dsetia_1

Practical Tips• Start Small

• Small team, small cost, small time, small risk • Build momentum : Many small wins > One big win

• Don’t dictate, motivate • Provide real value (that can be felt) • Help others succeed

• Don’t bulls#*t • It’s ok to say “I don’t know the answer (but I can help you find out)” • Drop the buzzwords

• Lead with a story (meaning & purpose) • Co-create

• Be transparent about your method • Include others in your process • Let others contribute

Page 34: User-Centered Design at The Economist

@dsetia_1

How we started…• Start with unblocking dev to earn trust

• Facilitate small ideation sessions that involves the team (proto-persona, sketching exercise , etc.)

• Visualize process, highlighting contribution UX can make

• Support Product Owner and Scrum Master in product roadmap creation

Page 35: User-Centered Design at The Economist

@dsetia_1

What does that look like?

Page 36: User-Centered Design at The Economist

Integrating UX into Agile workflow

Page 37: User-Centered Design at The Economist

Team’s activities

Page 38: User-Centered Design at The Economist

Android JIRA workflow

Page 39: User-Centered Design at The Economist

Going Lean

Page 40: User-Centered Design at The Economist

Lean Startup Method

Page 41: User-Centered Design at The Economist

Hypotheses to Validate

PersonaProblemSolutionUsabilityGrowth

Page 42: User-Centered Design at The Economist

Team’s activities

Page 43: User-Centered Design at The Economist

Team’s activities

Page 44: User-Centered Design at The Economist

Team’s activities

Page 45: User-Centered Design at The Economist

Team’s activities

3 months 6 months

Page 46: User-Centered Design at The Economist

Sample Artifacts

Proto-personas created by our mobile team Storyboard of a morning commute scenario

Page 47: User-Centered Design at The Economist

Sample Artifacts

User interview using Google Hangout

Our Product Manager collecting anecdotal feedback at a local coffee shop

Page 48: User-Centered Design at The Economist

Sample Artifacts

sketches created in 6-8-5 exercise Team + stakeholders sketching together

Page 49: User-Centered Design at The Economist

Sample Artifacts

screen storyboard with notes from critique

Quick InVision prototype to test swipe visual cue

Page 50: User-Centered Design at The Economist

Sample Artifacts

In-person moderated usability test in session Usability test observation room

Page 51: User-Centered Design at The Economist

Usability Test Driven Development

Page 52: User-Centered Design at The Economist

Usability Testing: DE Tasks

Task 1 - Authentication

Task 2 - Selecting + Downloading Issue

Task 3 - Discovering Content

Task 4 - Reading Settings

Task 5 - Review Bookmarks

Task 6 - Listening

Task 7 - Creating Playlist

Task 8 - Subscribing

Task 9 - Adjust Settings

Task 10 - Others

Page 53: User-Centered Design at The Economist

Validating with Users

100% 80% 60% 40% 20% 0%

Mitigating risks and identifying gaps throughout the production process.

Risk Level:

Page 54: User-Centered Design at The Economist

@dsetia_1

Questions?twitter: @dsetia_1

site: www.dsetia.com