+ All Categories
Home > Documents > DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way...

DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way...

Date post: 07-Jul-2020
Category:
Upload: others
View: 1 times
Download: 0 times
Share this document with a friend
63
#LTUX DESIGN STUDIO METHODOLGY
Transcript
Page 1: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

#LTUX

DESIGN STUDIO METHODOLGY

Page 2: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

TRUE FACT The vast majority of projects fail

NOT because they couldn’t build a great product using the

latest new technology.

They failed because they built something no one wanted.

Page 3: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Let’s start with an exercise!

Page 4: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

2 minutes

Page 5: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.
Page 6: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

   

•  All too often, leaders, managers, teams, designers rely on common approaches that may work well in one context, and fail in another.

•  Teams want to create better customer experiences (user experiences), but aren’t sure what that really means.

•  Teams often find it difficult moving from insights to action (based on this research, what should we do now?).

Why Are We Here?

Page 7: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Why Collaborative Design?

Ninja. Rockstar. Gifted genius. Many of the ways we talk about creative work (whether it’s design or development) only capture the brilliance of a single individual. - Stefan Kloeck

Page 8: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Traditional Process

DISCOVER DEFINE DESIGN DEVELOP DEPLOY

Page 9: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Traditional Process

DISCOVER DEFINE DESIGN DEVELOP DEPLOY

Page 10: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

“Traditional” UX Practices

•  Emphasize deliverables •  See the work as a solution that gets sold to

stakeholders •  See the (UX) designer as the hero in charge

of finding solutions to design challenges and getting approval before development starts

Page 11: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

How Can We Improve Our Process?

•  The design work we do is often limited to on-the-go type of decisions

•  We struggle with approvals •  We don’t have an established process that

involves UXD, thus our scenario is not “going from traditional UX to Lean”, but rather, “establishing our approach to UXD”

Page 12: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Integrating Design into Development Process

The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile)

1.  Have a great idea 2.  Wireframe 3.  Designer creates a static

mockup 4.  Static mockup & specs are

thrown to devs to implement, QA to test

The Collaborative Way (Lean UX + Agile Development)

1.  Have a great idea 2.  Sketch together 3.  Engage team (BA, UX, Dev,

QA) to build a prototype 4.  Play, tweak, rinse, repeat 5.  Once UX is nailed have a

visual designer polish to perfection

Page 13: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

DESIGN STUDIO

Page 14: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Create. Pitch. Critique.

Page 15: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

It’s about generating many safe-to-fail experiments, not highly

rendered solutions.

Page 16: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

All ideas must map to persona’s goals & needs.

Page 17: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Generate lots of design concepts (options*) Present concepts as stories Critique using Ritual Dissent

Integrate (steal) & Iterate Check stories for coherence

Converge around testable solution hypotheses

DESIGN STUDIO

*See Chris Matts Real Options Theory

Page 18: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Level playing field. Idea generation.

Team buy-in. Ownership/investment.

Vet design concepts.

Page 19: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

STOP WATCH

Page 20: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Create. Pitch. Critique.

Page 21: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Create six to eight concept sketches individually.

Page 22: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.
Page 23: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Line, Square, Circle, Triangle

Page 24: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Focus on the bare minimum to convey your concept

Page 25: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

All ideas must map to person’s goals & needs.

Page 26: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Create. Pitch. Critique.

Page 27: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Three minutes to pitch how your concept solves the problem.

Page 28: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Create. Pitch. Critique.

Page 29: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Two minutes for critique.

Page 30: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Two to three ways it solves the problem and one to two

opportunities for improvement.

Page 31: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Addison “Public bathrooms are gross. I would rather poop in my pants than use a public bathroom.”

Addison is a 11 year old who was diagnosed with Ulcerative Colitis when she was 22 months old. It’s an embarrassing disease that she doesn’t like to talk about. Since her IBD causes her to use the bathroom often, she doesn’t like going places that are not familiar. Going out to dinner with family even causes anxiety knowing that most likely she will have to use the public bathroom.

Page 32: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Create. 5 minutes

Page 33: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Pitch. (pick a timer) 3 minutes

Page 34: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Critique.

2 minutes

Page 35: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

2nd Iteration

Page 36: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.
Page 37: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

5 minutes

Page 38: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Storyboarding!

5 minutes

Page 39: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Pitch. (pick a timer) 3 minutes

Page 40: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Critique. 2 minutes

Page 41: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

3rd Iteration

Page 42: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.
Page 43: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

10 minutes

Page 44: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Sketching 1 Interface/Solution

10 minutes

Page 45: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

“Many ideas grow better when transplanted into another mind than the one where they sprang up.” - Oliver Wendell Holmes

Page 46: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Pitch. 3 minutes

Page 47: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Critique. 2 minutes

Page 48: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Team Sketch

1 Concept 25 minutes

Page 49: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

RITUAL DISSENT

Page 50: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

“Whenever we propose a solution to a problem, we ought to try as hard as we can to overthrow our solution, rather than defend it.”

- Karl Popper

Page 51: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

PRESENT

Pick a spokesperson 5 minutes to prepare

Page 52: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Ritual Dissent •  The basic approach involves a spokesperson presenting a

series of ideas to a group of investors who listens to them in silence.

•  You’re spokesperson will only have 5 minutes to present •  Team must imagine they are a group of investors hearing a

pitch from a startup. •  No questions can be asked of the spokesperson. •  Investor team must find all the things wrong with the

concept, why it solves no problem, and all the other solutions in the marketplace that do things better.

Page 53: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Ritual Dissent

•  The spokesperson turns to face the wall, so that their back is to the investor team and listens in silence while the group attacks the idea. •  The spokesperson cannot respond to questions or

defend the ideas. •  Investor team must be as harsh as possible. •  Spokesperson can only take notes on everything

he/she hears.

Page 54: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

For all critique decide:

•  Ignore (backburner) •  Remove (de-solve) •  Research Solution (best practice) •  Research Problem (innovate)

Page 55: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Iterate as a team based on the critique.

15 minutes

Then pitch to the whole workshop.

Page 56: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

But first…

Page 57: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Rip up your designs.

Page 58: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

TEAM SKETCH 15 minutes

Page 59: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

TEAM PRESENTATIONS

3 minutes

Page 60: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

RITUAL ASSENT

2 minutes

Page 61: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Tips

•  Timebox: 5 minutes sketch / 5 minutes per person

•  No more than 6 or 7 people per table (4 is best) •  Don’t introduce too many business rules up front •  Imagine no technology constraints •  Make explicit all potential channels (not just

mobile or web)* •  Move people from team to team to prevent

premature convergence •  Don’t serve Turkey sandwiches

Page 62: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

Potential Pitfalls

•  Having a solution before Design Studio starts – “we already have a solution – we just want buy-in”

•  Not adequately scoping design studio to match the problem – “we can only spend 2 hours on design studio because of people’s schedules”

•  Introducing blockers or business constraints too early

•  The invisible hand of the absent stakeholder Process & Pitfalls: http://bit.ly/vpeuJn

Page 63: DESIGN STUDIO METHODOLGY · Integrating Design into Development Process The “Traditional” Way (Waterfall + Waterfall or Waterfall + Agile) 1. Have a great idea 2. Wireframe 3.

THANK YOU!


Recommended