Designing Mobile Interfaces - Goodpatch Workshop SF

Waiting? Download Prott from the App Store!

Designing Mobile Interfaces

DG717, March 10, 2015

WHY you should prototype

&

HOW you can prototype

BE REAL

Ideas are NOT real

Agenda

6

• Intro Goodpatch

• Prototyping & Design Research @ Stanford University

• 4 focus groups

• Challenge: Build & Test Low-res prototype

• Sharing & Wrap-up

Ice breaker

7

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

mailto:[email protected]

Who are you?

9

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/

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.

About Goodpatch > We design and build iOS Apps

12

…and many more

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

https://prottapp.com

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

16

Before I knew what I was doing

17

Stanford’s ME310 (2011 - 2013)

18

The mindset

19

The mindset

20

The mindset

21

Task: Design the toothbrush of the future

The mindset

22

Task: Design the toothbrush of the future

Divergent & convergent

23


24

Winning team


25

Understand the problem


26

Divergent thinking-

Go wide


27

Don’t judge

28


29



30


31

Convergent thinking -

Bring the baby home

32


33


When people stop being polite…

…and start getting real.

34


Rough Rapid Right

35

Rough Rapid Right

From low-res to high-res

36

Rough Rapid Right


37


Rough Rapid Right

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


42

Exercise

“...the value of prototypes resides

less in the models themselves than

in the interactions they invite.”

Michael Schrage – Serious Play!

Object Behaviour People

45

The almighty question

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


47


7. Break rules

Take-away

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)

http://prottapp.com

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

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

Contact:Boris Friedrich Milkowski [email protected]+818041271012

About Goodpatch > Clients

53

…and many more

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

http://gunosy.com/iphone

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

https://moneyforward.com

http://memo.goodpatch.co/2014/08/moneyforward_redesign/

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.

http://www.pathee.com/apps/

http://memo.goodpatch.co/2014/05/pathee-interview/

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/

58

Tools

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

Designing Mobile Interfaces - Goodpatch Workshop SF

Documents

Transcript of Designing Mobile Interfaces - Goodpatch Workshop SF