Agenda
6
• Intro Goodpatch
• Prototyping & Design Research @ Stanford University
• 4 focus groups
• Challenge: Build & Test Low-res prototype
• Sharing & Wrap-up
About me
8
Boris Friedrich Milkowski [email protected] @borismilkowskiBackground: 100% Design & 100% BusinessNew 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
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/
About Goodpatch > UI Design Company at heart.
11
StrategicDesign
UXDesign
UIDesign
Development
Pushing the world forward by creating great Design & Products that move people's hearts.
Team > UX/UI Design & Front-end development
Creative Director/ UX Designer
UI Designer
13
Winning team of 3
Front-end/ iOS Developer
14
The Goodpatch Way
3 months
We design and we code, everything.
Research
Ideation
Requirements
Prototyping Implementation Debug Release
User test
Visual design
LiveRepeat
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
About Goodpatch > Goodpatch’s own product > Prott
15
Protthttps://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
38
One question, one prototype
Which material wins? Asking user to compare wood /pastic/metalPhoto: ME310 / Aalto University
39
From needs to critical functions
Criticial functions arise from peoples’ needs, discovered requirements, constraints, and also from assumptions…
CF:Need:
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
- 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
“...the value of prototypes resides
less in the models themselves than
in the interactions they invite.”
Michael Schrage – Serious Play!
46
Take-away
Golden rules of prototyping:1. One question, one prototype2. Go far enough 3. Stop before it’s perfect4. Don’t fall in love with your prototype5. Always build and share more than one prototype6. Create to provoke and persuade
Source: Nik Martelaro
48
Exercise: 4 focus groups
iOSdesign pattern
MaterialDesign
UX/UITools
Good designis…vs.
Find your favourite group…and brainstorm for 7 mins!
Challenge: Build a low-res prototype (10 min)
Tools: - Sketch on paper- Prott (prottapp.com)
Contact:Boris Friedrich Milkowski [email protected]+818041271012
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 Designhttp://gunosy.com/iphone
54
About Goodpatch > Clients > Gunosy
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 Designhttps://moneyforward.com http://memo.goodpatch.co/2014/08/moneyforward_redesign/
55
About Goodpatch > Clients > Money Forward
56
About Goodpatch > Clients > Pathee
Pathee App & Site UI Design / Front-end developmenthttp://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
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 developmenthttp://mery.jp/
Unpack
Requirements
Sketch Decide Prototype TestSet the stage
59
The Goodpatch Way > 5 Day Design Sprint (Kick-off week)
• Problemdefinition
• Team
• Schedule
• Deadlines
• Scheduleuser 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 realcustomers
• 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