Embed Size (px)
Citation preview
@GoAgileCamp | @DesignCaffeine
$1 Prototype
Greg Nudelman Principal/CEO, DesignCaffeine, Inc. @DesignCaffeine | @GoAgileCamp
Lean Mobile UX Design and Rapid Innovation for
Material Design, iOS, and
RWD
@GoAgileCamp | @DesignCaffeine
@DesignCaffeine @GoAgileCamp
@DesignCaffeine@GoAgileCamp @DesignCaffeine@GoAgileCamp
@DesignCaffeine@GoAgileCamp
@DesignCaffeine@GoAgileCamp
@DesignCaffeine@GoAgileCamp @DesignCaffeine@GoAgileCamp
@DesignCaffeine@GoAgileCamp
What is the best way to design mobile interfaces?
@DesignCaffeine@GoAgileCamp
@GoAgileCamp | @DesignCaffeine
Case Study: Be a Hero
@DesignCaffeine@GoAgileCamp
Be a Hero!
@GoAgileCamp | @DesignCaffeine
@DesignCaffeine@GoAgileCamp
Phase matching UX design with the code development so the two can inter-dependently create together.
A. Envision 1. Create and test your storyboard 2. Start by defining a place 3. Speak naturally and end with appropriate bang
B. Prototype 1. Prototype at appropriate fidelity 2. Create an MVP (Minimum Viable Prototype) 3. Embrace Material Design
C. Test 1. Test with decaffeinated people 2. Treat participants like experience partners 3. Ask million-dollar questions
@GoAgileCamp | @DesignCaffeine
DecideWhat
@GoAgileCamp | @DesignCaffeine
the HowImprovise
@DesignCaffeine@GoAgileCamp
Be a Hero!
@GoAgileCamp | @DesignCaffeine
Why bother with a storyboard?
@GoAgileCamp | @DesignCaffeine
Case Study: Mood Ring
@GoAgileCamp | @DesignCaffeine
@GoAgileCamp | @DesignCaffeine
@DesignCaffeine@GoAgileCamp
#1 Reason startups fail: lack of demand for their product or service. Always create and test a storyboard before designing a mobile app.
@GoAgileCamp | @DesignCaffeine
@GoAgileCamp | @DesignCaffeine
A few storyboarding Pro Tips…
@DesignCaffeine@GoAgileCamp
When storyboarding, start by defining a place. Mobile Context includes (and drives) Persona.
@DesignCaffeine@GoAgileCamp
Where Are You?
@GoAgileCamp | @DesignCaffeine
@GoAgileCamp | @DesignCaffeine
Start by defining a place Use natural dialog/speech bubbles Avoid Captions: use pictures to explain End with a NATURAL bang
A. Envision 1. Create and test your storyboard 2. Start by defining a place 3. Speak naturally and end with appropriate bang
B. Prototype 1. Prototype at appropriate fidelity 2. Create an MVP (Minimum Viable Prototype) 3. Embrace Material Design
C. Test 1. Test with decaffeinated people 2. Treat participants like experience partners 3. Ask million-dollar questions
@DesignCaffeine@GoAgileCamp
Fidelity of the prototype must reflect the state of completion of the project.
@DesignCaffeine@GoAgileCamp http://en.wikipedia.org/wiki/Vasa_(ship)
@DesignCaffeine@GoAgileCamp
http://www.vasamuseet.se/ImageVaultFiles/id_478/cf_271/932x299_F-rlisningen.JPG
@DesignCaffeine@GoAgileCamp
Prototype first.
@DesignCaffeine@GoAgileCamp
@DesignCaffeine@GoAgileCamp
Focus on MVP (Minimum Viable Prototype). Institutionalize failure by removing risk. Fail faster, cheaper, better.
@GoAgileCamp | @DesignCaffeine
Case Study: Trip Advisor
@GoAgileCamp | @DesignCaffeine
@GoAgileCamp | @DesignCaffeine
@GoAgileCamp | @DesignCaffeine
@GoAgileCamp | @DesignCaffeine
@DesignCaffeine@GoAgileCamp
Systematically figure out the right things to build
using a Minimum Viable
Prototype
@GoAgileCamp | @DesignCaffeine
@GoAgileCamp | @DesignCaffeine
@GoAgileCamp | @DesignCaffeine
Parallel Architecture Design Pattern
!
[4 Sticky Notes Wireframes]
@GoAgileCamp | @DesignCaffeine
@GoAgileCamp | @DesignCaffeine
Start with a pencil
@GoAgileCamp | @DesignCaffeine
@GoAgileCamp | @DesignCaffeine
@GoAgileCamp | @DesignCaffeine
@GoAgileCamp | @DesignCaffeine
@DesignCaffeine@GoAgileCamp
Minimum Viable Prototype means only adding the detail that is strictly necessary. Let the customer imagine the rest.
@GoAgileCamp | @DesignCaffeine
@GoAgileCamp | @DesignCaffeine
@GoAgileCamp | @DesignCaffeine
@GoAgileCamp | @DesignCaffeine
What about Material Design?
@GoAgileCamp | @DesignCaffeine
Real paper is the best model for Digital Paper when designing for Google Material Design.
@GoAgileCamp | @DesignCaffeine
Case Study: Trip Advisor [Take 2: Material Design]
@DesignCaffeine@GoAgileCamp
@DesignCaffeine@GoAgileCamp
@DesignCaffeine@GoAgileCamp
@DesignCaffeine@GoAgileCamp
@GoAgileCamp | @DesignCaffeine
Contrast with iOS9…
A. Envision 1. Create and test your storyboard 2. Start by defining a place 3. Speak naturally and end with appropriate bang
B. Prototype 1. Prototype at appropriate fidelity 2. Create an MVP (Minimum Viable Prototype) 3. Embrace Material Design
C. Test 1. Test with decaffeinated people 2. Treat participants like experience partners 3. Ask million-dollar questions
@GoAgileCamp | @DesignCaffeine
Minimum Viable Prototype is both a design and a
prototype. !
Jump into testing with a speed of thought.
@GoAgileCamp | @DesignCaffeine
http://stumptowncoffee.com/
Test with decaffeinated people
@DesignCaffeine@GoAgileCamp
Treat participants like Experience Partners. Allow them to brainstorm and co-create with you.
@DesignCaffeine@GoAgileCamp
Mobile transitions can be easily tested using a simple sticky notes prototype.
@DesignCaffeine@GoAgileCamp
Ask million-dollar questions: would you pay for this app? If so, how much?
In conclusion…
@GoAgileCamp | @DesignCaffeine
Design workshop
@DesignCaffeine@GoAgileCamp
Be a Hero!
Design is the Prototype you can take directly into testing
@GoAgileCamp | @DesignCaffeine
@GoAgileCamp | @DesignCaffeine
@GoAgileCamp | @DesignCaffeine
Design Documentation
Know the difference!
@GoAgileCamp | @DesignCaffeine
What is the best way to design mobile interfaces?
Focus on the Product. Get out of deliverables
business.
http://LeanMobileUX.com
New Blog! New Design Course! $1 Prototype Book!
Go to:
