Design-Thinking-SXSW-2016

DESIGN THINKING
IN PRACTICE
Jill DaSilva
@dasilva_jill #GAatSXSW2016
Lead Instructor UXDI, General Assembly
Head of UX Strategy & Co-Founder, DigitalKarma.io
IxD Advisory Board Member, Santa Monica College

HELLO! 2
JILL DASILVA
HEAD OF UX STRATEGY & CO-FOUNDER
DIGITAL KARMA
‣Began programming when she was 8 years old.
‣Lead UXDI Immersive instructor, General Assembly.
‣UXDI Global Education Strategy Team Member.
‣Recognized as “50 LA tech CEOs, founders,
executives, hackers, & investors you must follow on
Twitter” by Built in Los Angeles
‣Ixd Advisory Board Member, Santa Monica College
GENERAL ASSEMBLY

AGENDA
‣ What is Design Thinking?
‣ Design Thinking Process
‣ Q & A
OVERVIEW

TIM BROWN, PRESIDENT AND CEO, IDEO
“Design thinking is a human-centered approach to
innovation that draws from the designer’s toolkit to
integrate the needs of people, the possibilities of
technology, and the requirements for business success.”

DESIGN THINKING
https://www.cbinsights.com/blog/startup-failure-reasons-top/

DESIGN THINKING
THE PROCESS
dschool.stanford.edu

DESIGN THINKING
THE PROCESS
Discover the need
Comparative/Competitive
Analysis
User Research
Persona
Scenario
User Flows
Sketch
Prototype
Test

DESIGN THINKING
DISCOVER THE NEED
9

DISCOVER THE NEED 11
“What’s your biggest challenge with ‘X’?”
ONE SIMPLE QUESTION:

COMPARATIVE/
COMPETITIVE ANALYSIS

COMPETITIVE/COMPARATIVE ANALYSIS
Comparison
Criteria
No YES YES
YES No YES
YES No YES
No YES YES
Competitor Competitor Your Product
map
directions
reminders
images

WHY UNDERSTAND OUR USERS?
TO SOLVE REAL PROBLEMS
‣ REMINDER: You are not the user
‣ Don’t assume you know their problems
‣ Don’t assume they will behave as you expect them to
‣ Don’t assume you’ve thought of everything
14

16WHAT IS USER RESEARCH?
HENRY FORD
“If I’d asked people what they wanted, they’d
have said faster horses.”

WHAT DO WE NEED TO KNOW?
USER RESEARCH
‣ User surveys (google forms, survey monkey, etc.)
‣ User interviews (phone or in person)
‣ Contextual inquiry (observing the user in it’s natural habitat)
‣ Can also look at analytics with proper code in place

Board
Mar 6, 2015 29 notes
330 Rees St, Los Angeles, CA
Group A

PERSONAS
HOW ARE THEY MADE?
‣ Personas are made from the emerging themes found in the
research.
‣ A persona is not one person, but a culmination of many persons

PERSONAS
WHY ARE THEY MADE?
‣ UCD (user-centered design)
‣ To help keep a project on track.
‣ Align team members.
‣ Prevent feature creep. (only build features that the user needs/
wants)

CONDUCTING USER RESEARCH
WHY UNDERSTAND
OUR USERS?
27

30WHAT DO WE NEED TO KNOW?
STEPHEN P. ANDERSON
“It’s all about People, their
Activities, and the Context
of those activities.”

WHAT DO WE NEED TO KNOW?
THE 5 W’S
‣ Who?
‣ What?
‣ Where?
‣ When?
‣ Why?
‣ …and How?

SCENARIO
EXAMPLE SCENARIO:
‣ Create a native app that is the Air BnB for parking solutions
‣ Example Scenario 1: A parent/guardian must park every morning near their
child’s school in order to walk their child in. All street parking is permit only
and there are no meters. There are plenty of driveways, though!
‣ Example Scenario 2: It’s 4th of July and people want to park near the
fireworks show, but parking is permit only. There are plenty of driveways,
though!

STORYBOARDING
IT LOOKS LIKE THIS
35
See What I Mean, Kevin Cheng: Nectar Storyboard
flickr.com/photos/rosenfeldmedia/7171777734

USER FLOW
http://www.jjg.net/ia/visvocab/

USER FLOWS
‣ Busy mom is frustrated with parking situation at school. She knows
she needs a parking spot the same time every day
‣ She does a google search and finds a parking solution. She downloads
an app that claims to be the AirBnB for parking.
1. She opens the app.
2. She types in the school address and looks for parking options nearby.
3. She types in the dates and times she’ll need to park.
4. She finds a driveway that can be rented 5 mornings and afternoons.
5. She creates a profile and reserves the spots.

SKETCHING INTERFACES
FLOWS TO INTERFACES
39

FLOWS TO INTERFACES
FLOWS DEFINE WHAT PAGES YOU NEED
‣ User flows tell you:
‣ what pages users land on
‣ what the page needs to let the user do in order to proceed
‣ Early on, it’s helpful to sketch thumbnail wireframes as the pages in
your flows
40

FLOWS TO INTERFACES
ZOOM IN
‣ Once you have the flows down you are ready to design the pages in
more detail
‣ The basics:
‣ What global elements are shared across all pages?
‣ What content goes on the page?
‣ What affordances does the UI need to let the user accomplish tasks?
41

FLOWS TO INTERFACES
WIRES + FLOWS = WIREFLOWS
42
http://get.boozerexperience.com/tag/sketches

FLOWS TO INTERFACES
WIRES + FLOWS = WIREFLOWS
43
XYZ
Splash
Pro Football LIVE
Loading
actv8
inPLAY
Login
formkey:
form
button
login
new user
login problems
LIVE
HOME CATCH LOCKER PRIZES MORE
Pro Football LIVE!
LIVE Your Score: ######
Jets
Dolphins
Team: Score:
7
6
Downs:
2 and 13
Possession: Quarter:
New User - Register
Pro Football LIVE!
Pro Football LIVE!
Registration
BACK
Nickname
email address
password
retype password
submit
Login Problems
Pro Football LIVE!
Email my
password to me:
BACK
email address
submit
Login Problems
Pop Up
LIVE
Pro Football LIVE!
Which team are
you rooting for
this game?
Pro Football LIVE!
Which team are
you rooting for
this time?
Pro Football LIVE!
Who's your all
time favorite
team?
Team 1
Team 2
Team 1
Team 2
Team 3
LIVE Prediction
Pro Football LIVE!
Jets
Dolphins
Team: Score:
7
6
Downs:
2 and 13
Waiting Screen
Pro Football LIVE!
Jets
Dolphins
Team: Score:
7
6
Downs:
2 and 13
Answer this in ##:## for ## pts
Will the Jets run on
the 2nd down?
Yes No
UI/UE ideas:
- Confirmation sound and visual (on-click change button color)
when user clicks an answer on a quiz, prediction, poll, etc.
- diff color interface when it is a poll or quiz or trivia (perhaps to
help the user to know what kind of interaction it is and a diff point value)
- when results are shown,
show the question with the correct answer highlighted-
perhaps a red bg for the wrong chosen answer and a green
bg on the correct chosen answer (Rob suggested a big green check mark or a big red "X")
- I think the commentary should be viewed at the bottom of the screen, above the nav...
- When do users get to share via FB and Twitter, etc. game results? (at the end of a live game?)
and perhaps it's an offer to "share this app" for ## points
animation
[LIVE Play Quiz]
LIVE Prediction Results
Pro Football LIVE!
Jets
Dolphins
Team: Score:
7
6
Downs:
2 and 13
the 2nd down?
Yes No
[LIVE Play Quiz Results]
Waiting for next interaction...
CONGRATS! You won ## points!
Pro Football LIVE!
Jets
Dolphins
Team: Score:
7
6
Downs:
2 and 13
the 2nd down?
Yes No
Sorry! You didn't win ;(
Waiting Screen
Pro Football LIVE!
Jets
Dolphins
Team: Score:
7
6
Downs:
2 and 13
LIVE Trivia
Pro Football LIVE!
Jets
Dolphins
Team: Score:
7
6
Downs:
2 and 13
Where did Ray Rice
go to college?
[General Trivia]
XYZ
Rutgers
Waiting Screen
Pro Football LIVE!
Jets
Dolphins
Team: Score:
7
6
Downs:
2 and 13
Waiting Screen
Pro Football LIVE!
Jets
Dolphins
Team: Score:
7
6
Downs:
2 and 13
General Prediction Results
Pro Football LIVE!
Jets
Dolphins
Team: Score:
7
6
Downs:
2 and 13
General Prediction
Which Quarterback will
throw for a TD first?
[Non-LIVE Quiz Results]
Pro Football LIVE!
Jets
Dolphins
Team: Score:
7
6
Downs:
2 and 13
General Prediction
XYZ
XYZ
XYZ
XYZ
General Prediction
Pro Football LIVE!
Jets
Dolphins
Team: Score:
7
6
Downs:
2 and 13
[Non-LIVE Quiz]
XYZ
XYZ
XYZ
LIVE Trivia Results
Pro Football LIVE!
Jets
Dolphins
Team: Score:
7
6
Downs:
2 and 13
LIVE Trivia Results
Where did Ray Rice
go to college?
[General Trivia Results]
XYZ
Rutgers
XYZ
LIVE Trivia Results
Pro Football LIVE!
Jets
Dolphins
Team: Score:
7
6
Downs:
2 and 13
LIVE Trivia Results
Where did Ray Rice
go to college?
[General Trivia Results]
XYZ
Rutgers
Waiting Screen
Pro Football LIVE!
Jets
Dolphins
Team: Score:
7
6
Downs:
2 and 13
LIVE Polls
Pro Football LIVE!
Jets
Dolphins
Team: Score:
7
6
Downs:
2 and 13
Who is the better
Quarterback?
[Polls]
XYZ
XYZ
Waiting Screen
Pro Football LIVE!
Jets
Dolphins
Team: Score:
7
6
Downs:
2 and 13
LIVE interaction in: ##:##
CATCH!
Pro Football LIVE!
Your Score: ######
# of CATCH!'s left: ##
CATCH!
- CATCH! interaction: should we show how many catches they have and count backwards from 20 to 0?
- Should one of the CATCH!'s be a "whammy" (a prize that isn't a prize like in the game show "press your luck"? i.e. a flat/deflated football
- I don't think that Polls should be a part of CATCH!...when to display poll result, esp if people are playing at diff times...
-
(non-LIVE interaction)
Pro Football LIVE!
Team: Score:Downs:Possession: Quarter:
There's no live game right now-
Press the CATCH! button to
go play CATCH!
and WIN cool stuff!
XYZ
CATCH! Trivia
Pro Football LIVE!
Your Score: ######
Trivia: ## pts
Where did Ray Rice
go to college?
XYZ
Rutgers
XYZ
Trivia Results
Pro Football LIVE!
Your Score: ######
Trivia Results
Where did Ray Rice
go to college?
XYZ
Rutgers
XYZ
Trivia Results
Pro Football LIVE!
Your Score: ######
Trivia Results
Where did Ray Rice
go to college?
XYZ
Rutgers
CATCH!
Pro Football LIVE!
Your Score: ######
CATCH!
Trivia
Polls (?)
Animations
Offers
Prizes
Videos
Whammy's (?)
Locker
Pro Football LIVE!
Locker
BACK
BACK
BACK BACK
age SEX
STATE
CATCH! Offers
Pro Football LIVE!
Your Score: ######
OFFER XYZ
accept not now
CATCH!
Pro Football LIVE!
Your Score: ######
CATCH!
CATCH! Animations
Pro Football LIVE!
Your Score: ######
Animation XYZ
CATCH! Prizes
Pro Football LIVE!
Your Score: ######
YOU WON!
Prize XYZ
ok
CATCH!
Pro Football LIVE!
Your Score: ######
CATCH!
CATCH!
Pro Football LIVE!
Your Score: ######
CATCH!
CATCH! Videos
Pro Football LIVE!
Your Score: ######
Video XYZ
play now play later
XYZ
CATCH! Poll
Pro Football LIVE!
Your Score: ######
Poll: ## pts
Who is the best team
in the NFL?
XYZ
XYZ
CATCH!
Pro Football LIVE!
Your Score: ######
CATCH!
BACK BACK
BACK
BACK
BACK
BACK
BACK
BACK BACK
BACK
BACK
BACK
BACK BACK
BACKBACKBACKBACKBACKBACKBACKBACKBACKBACK
BACK
BACK
BACKBACKBACK
BACK
BACK
Prizes
Pro Football LIVE!
Prizes: List
ALL
Coupons
Animations
Prizes
Videos
XYZ
Locker
Pro Football LIVE!
Locker: Coupons
BACK BACK
A
B
C
blah, blah Delete
Redeem Share
blah, blah
Redeem Share
blah, blah
Redeem Share
Locker: Redeem/more info
Pro Football LIVE!
Locker: Coupons: Redeem
BACK
A
blah, blah
Delete
Delete
Delete
Locker:
- I need a better understanding of the flow UI/UX
- How does the redemption occur?
- Where does the user see more info about the offer (larger view, w/o pressing the redeem button?)
Locker: Share
Pro Football LIVE!
Locker: Coupons
BACK
A
B
C
blah, blah Delete
Redeem Share
blah, blah
Redeem Share
blah, blah
Redeem Share
Delete
Delete
Pro Football LIVE!
Locker: Coupons: Redeem
BACK
A
blah, blah
Delete
Sharing options
FB Tw
A blah, blah
B blah, blah
C blah, blah
more info
more info
more info
if the user presses more info, does it take them to a web link?
Locker: Delete
Pro Football LIVE!
Locker: Coupons
BACK
A
B
C
blah, blah Delete
Redeem Share
blah, blah
Redeem Share
blah, blah
Redeem Share
Delete
Delete
Locker: Delete Alert
Pro Football LIVE!
Locker: Coupons
BACK
A
B
C
blah, blah Delete
Redeem Share
blah, blah
Redeem Share
blah, blah
Redeem Share
Delete
Delete
Are you sure you
want to delete this?
YES NO
LIVE
Pro Football LIVE!
BACK
Alert
Team 1
Team 2
Which team are
you rooting for
this game?
Team 1
Team 2
Good Luck!
OK
New User - Register
Pro Football LIVE!
Registration
BACK
Nickname
email address
password
retype password
submit
age SEX
STATE
TOS
Agree
CATCH! Locker
and
PFL Locker?
type and an id:
video 3606
coupon:
pepsi 3519
beverages 3000
food
[auto plays]
saves link to "locker"

PROTOTYPING
WHAT IS A
PROTOTYPE?

WHAT IS A PROTOTYPE?
HTTP://EN.WIKIPEDIA.ORG/WIKI/PROTOTYPE
“A prototype is an early sample, model or
release of a product built to test a concept or
process or to act as a thing to be replicated
or learned from.”

WHERE ARE THEY USED?
‣ Industrial design
‣ Product design
‣ Automotive design
‣ Software design

HOW IS IT DIFFERENT FROM PRODUCTION?
‣ Typically lower fidelity
‣ Typically just a portion of the system
‣ If coded, it’s allowed to be bad, unreliable code
‣ Much less investment to build

PROTOTYPING
WHY DO WE
PROTOTYPE?

TO EXPLORE TO REFINE
WHY DO WE PROTOTYPE?

KEEP IT USER-CENTERED
‣ Prototypes are all about the user
‣ Production development can get messy:
‣ database issues
‣ integration points
‣ code maintainability
‣ quality assurance and deployment
‣ …and other things that don’t concern the user

TO $AVE MONEY $$$$

The amount of time that developers
spend on avoidable re-work is 50%.
https://www.cs.umd.edu/projects/SoftEng/ESEG/papers/82.78.pdf

The cost of fixing an error after development is 100 times more
than fixing that error before the project is completed.
https://www.cs.umd.edu/projects/SoftEng/ESEG/papers/82.78.pdf

The cost of fixing an error after development is 100 times more
than fixing that error before the project is completed.
“…a survey of 96 mobile app developers found that the
average cost to develop an app was $6,453. Another
article reports that developing a “small app” can cost
$3000 – $8000. More complex apps can cost anywhere
from $50,000 to $150,000!”

TO COMMUNICATE AND TEST
‣ Functionality
‣ Flow
‣ Interaction
‣ Animations
‣ Usability

PROTOTYPING
TYPES OF PROTOTYPES

TYPES OF PROTOTYPES
OVERVIEW
‣ Paper (sketched)
‣ Paper (print-outs)
‣ Photo gallery
‣ Clickable/tappable
‣ Concierge
‣ Static HTML
‣ Functional

TYPES OF PROTOTYPES
PAPER PROTOTYPES  
(SKETCHES)

PAPER PROTOTYPES  
(PRINT-OUTS)

TYPES OF PROTOTYPES
PHOTO GALLERY

USER TESTING
WHY IS TESTING IMPORTANT
‣ The best way to find out if something works is to test it!
‣ You’ve looked at for so long that you can’t see the forest for the trees
‣ Might uncover missing features or confusion functionality.
‣ Test with 5 to 7 representative users
‣ Guerrilla testing is better than no testing!
‣ Doesn’t have to be perfect the first time, but should test your
hypothesis of the need you’re solving for.

DESIGN THINKING FOR SOCIAL IMPACT (NON-DIGITAL SOLUTION)
EXAMPLE:

ADDITIONAL RESOURCES & STUFF
SOME BOOKS
‣ UX Strategy
‣ The User Experience Team of One
‣ Undercover Experience Design: Voices Matter
‣ Design of Everyday Things
‣ About Face Essentials Interaction Design
‣ http://www.slideshare.net/JillDaSilva/roiuxjilldasilva20150321-46122659
‣ http://info.usertesting.com/
OnDemandWebinarInvestinginUserExperienceMar2015.html
ROI OF UX

THANK YOU!
Jill DaSilva
Lead Instructor UXDI, General Assembly
Head of UX Strategy & Co-Founder, DigitalKarma.io
IxD Advisory Board Member, Santa Monica College

Design-Thinking-SXSW-2016

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (10)

Similaire à Design-Thinking-SXSW-2016

Similaire à Design-Thinking-SXSW-2016 (20)

Plus de Jill DaSilva

Plus de Jill DaSilva (10)

Design-Thinking-SXSW-2016