1. Waiting?
Download Prott from the App Store!

2. Designing Mobile Interfaces
DG717, March 10, 2015

3. WHY you should prototype
&
HOW you can prototype

4. BE REAL

5. Ideas are
NOT
real

6. Agenda
6
• Intro Goodpatch
• Prototyping & Design Research @ Stanford University
• 4 focus groups
• Challenge: Build & Test Low-res prototype
• Sharing & Wrap-up

7. Ice breaker
7

8. About me
8
Boris Friedrich Milkowski
boris@goodpatch.com
@borismilkowski
Background: 100% Design & 100% Business
New Business Development @ Goodpatch, Inc.
UX Design & Growth @ Prott
Before:
Teaching Assistant & Researcher @ Stanford University’s ME310
Master’s in Media Design, Keio University, Japan
CEMS Master’s in International Management,
University of St.Gallen, Switzerland

9. Who are you?
9

10. About Goodpatch > Company profile
10
Goodpatch, Inc. is one of Japan’s leading User Interface design companies. We do everything that has to do with the
design and front-end for the user interfaces of web services and smartphone applications. Our main clients are startups
and small venture companies, in addition to major companies investing in new business development.
We work with around 50 designers and engineers across our 2.5 offices in Tokyo, Berlin (and SF).
http://goodpatch.com/

11. About Goodpatch > UI Design Company at heart.
11
Strategic
Design
UX
Design
UI
Design
Development
Pushing the world forward by creating great Design & Products that move people's hearts.

12. About Goodpatch > We design and build iOS Apps
12
…and many more

13. Team > UX/UI Design & Front-end development
Creative Director/
UX Designer
UI Designer
13
Winning team of 3
Front-end/ iOS
Developer

14. 14
The Goodpatch Way
3 months
We design and we code, everything.
Research
Ideation
Requirements
Prototyping Implementation Debug Release
User test
Visual design
Live
Repeat
User test
RepeatRepeat
• Context
• Challenges
• Market
• User
• Client
• Technology
• Feasibility
• Reframing
• Business model
• Concept
• PJ Goal
• Persona
• Scenario
• Functional requirements
• Site map
• Sketch
• Flows
• Wireframes
• Paper prototypes
• Hot mockups
• Color scheme
• Style guide
• AB Testing
• Analytics
• Branding
• Marketing
• KPIs
5 Day
Design Sprint
★ In Japan, SF, and Berlin

15. About Goodpatch > Goodpatch’s own product > Prott
15
Prott
https://prottapp.com
Launched in October 2014, prototyping tool Prott is our first own product. Among our enterprise customers are IDEO,
Ustwo, Yahoo, Recruit, DeNA, GREE, and many more.
UI Design / Front-end development / Full-stack development

16. Before I knew what I was doing - Dampiflex (2009)
16

17. Before I knew what I was doing
17

18. Stanford’s ME310 (2011 - 2013)
18

19. The mindset
19

20. The mindset
20

21. The mindset
21
Task: Design the toothbrush of the future

22. The mindset
22
Task: Design the toothbrush of the future

23. Divergent & convergent
23

24. Divergent & convergent
24
Winning
team

25. Divergent & convergent
25
Understand the problem

26. Divergent & convergent
26
Divergent thinking
-
Go wide

27. Divergent & convergent
27
Don’t judge

28. 28
Divergent & convergent

29. 29
Divergent & convergent

30. Divergent & convergent
30

31. Divergent & convergent
31
Convergent thinking
-
Bring the baby home

32. 32
Divergent & convergent

33. 33
Divergent & convergent
When people stop being polite…
…and start getting real.

34. 34
Divergent & convergent
Rough Rapid Right

35. 35
Rough Rapid Right
From low-res to high-res

36. 36
Rough Rapid Right
From low-res to high-res

37. 37
From low-res to high-res
Rough Rapid Right

38. 38
One question, one prototype
Which material wins? Asking user to compare wood /pastic/metalPhoto: ME310 / Aalto University

39. 39
From needs to critical functions
Criticial functions arise from peoples’ needs, discovered
requirements, constraints, and also from assumptions…
CF:Need:

40. 40
- General craft supplies
- Foam core
- Cardboard
- Pink foam & cardboard
- Play doh
- Modeling clay
- Laser cut wood/cardboard
- Sheet metal
- CAD + renderings
- 3D printing
- Service/ space prototyping
- System prototyping
- Experience prototyping
- Electronics Prototyping
- Electronic breadboarding
- Arduino Microprocessor
- Software paper prototyping
- Mobile paper prototyping
- Mobile Interaction prototyping
- Digital Prototyping
- Interface mockups
- State diagrams/ flowcharts
- Video prototyping
- Wizard of oz/ role play
Prototyping techniques
Source: Nik Martelaro

41. 41
- General craft supplies
- Foam core
- Cardboard
- Pink foam & cardboard
- Play doh
- Modeling clay
- Laser cut wood/cardboard
- Sheet metal
- CAD + renderings
- 3D printing
- Service/ space prototyping
- System prototyping
- Experience prototyping
- Electronics Prototyping
- Electronic breadboarding
- Arduino Microprocessor
- Software paper prototyping
- Mobile paper prototyping
- Mobile Interaction prototyping
- Digital Prototyping
- Interface mockups
- State diagrams/ flowcharts
- Video prototyping
- Wizard of oz/ role play
Prototyping techniques
Source: Nik Martelaro

42. 42
Exercise

43. “...the value of prototypes resides
less in the models themselves than
in the interactions they invite.”
Michael Schrage – Serious Play!

44. Object Behaviour People

45. 45
The almighty question

46. 46
Take-away
Golden rules of prototyping:
1. One question, one prototype
2. Go far enough
3. Stop before it’s perfect
4. Don’t fall in love with your prototype
5. Always build and share more than one prototype
6. Create to provoke and persuade
Source: Nik Martelaro

47. 47
Source: Nik Martelaro
7. Break rules
Take-away

48. 48
Exercise: 4 focus groups
iOS
design pattern
Material
Design
UX/UI
Tools
Good design
is…
vs.
Find your favourite group
…and brainstorm for 7 mins!

49. Challenge:
Build a low-res prototype (10 min)
Tools:
- Sketch on paper
- Prott (prottapp.com)

50. Now, test your prototype (10 min)
Don’t demo or sell your prototype…
Show, don’t tell…

51. If only we had more time…
Name 3 things you would improve on
your prototype!

52. Contact:
Boris Friedrich Milkowski
boris@goodpatch.com
+818041271012

53. About Goodpatch > Clients
53
…and many more

54. Gunosy App (iPhone Ver.2.0)
Goodpatch helped design Japanese news curation app from scratch until the release of iOS App (Ver. 2.0). Today
Gunosy makes 7-figure ad revenue in USD, every month.
UI Design
http://gunosy.com/iphone
54
About Goodpatch > Clients > Gunosy

55. Money Forward App (iPhone)
Money Forward got a complete make over for its iOS app. The new design not only resulted in an increase of KPIs of 11%
but also was rewarded with a Good Design Award in 2014.
UI Design
https://moneyforward.com
http://memo.goodpatch.co/2014/08/moneyforward_redesign/
55
About Goodpatch > Clients > Money Forward

56. 56
About Goodpatch > Clients > Pathee
Pathee App & Site UI Design / Front-end development
http://www.pathee.com/apps/
http://memo.goodpatch.co/2014/05/pathee-interview/
Pathee, a Google of the streets find best spots in just 5 mins walking distance. With the design by Goodpatch
Pathee raise USD 1.3m in 2014.

57. 57
About Goodpatch > Clients > MERY
MERY
MERY is a young women-focused fashion curation site Mery with almost 2M unique monthly users. Acquired by DeNA.
UI Design / Front-end development
http://mery.jp/

58. 58
Tools

59. Unpack
Requirements
Sketch Decide Prototype TestSet the stage
59
The Goodpatch Way > 5 Day Design Sprint (Kick-off week)
• Problem
definition
• Team
• Schedule
• Deadlines
• Schedule
user study
Monday Tuesday Wednesday Thursday Friday
• Build high-res
prototype
• “Unpack”
knowledge across
departments
• Share expertise
• User story
• insights
• Set scope
• Detail & depth
• Notes
• Mind Map
• Crazy 8s
• Structured critique
• Weighted voting
• Narrow down
• Make decisions
• Detailed storyboard
• Plan Friday interviews
• meet real
customers
• test prototype
• observe
• interview
• find patterns
1 week
Kicking off the project right.
By the end of the week we’ll have the first prototype.
★ At your company