Design for Startups

34
DESIGN FOR STARTUPS IMPEKABLE - PEK PONGPAET

Transcript of Design for Startups

Page 1: Design for Startups

D E S I G N F O R S TA R T U P SI M P E K A B L E - P E K P O N G PA E T

Page 2: Design for Startups

A B O U T I M P E K A B L E

I M P E K A B L E B E L I E V E S G R E AT P R O D U C T S A D A P T A N D C H A N G E W I T H T H E I R U S E R S .

W E B A L A N C E H U M A N - C E N T R I C D E S I G N VA L U E S W I T H D Y N A M I C P R O D U C T D E V E L O P M E N T.

Ideation Design Development

Page 3: Design for Startups

39M users

O U R E N T E R P R I S E C L I E N T S

Page 4: Design for Startups

I M P E K A B L E S TAT S

30 people

200+ projects

3.5 years

10 Fortune 500

100+ Clients

6 countries

Page 5: Design for Startups

O U T L I N E

• Requirements

• Deliverables

• Concepts

• Resources

Page 6: Design for Startups

R E Q U I R E M E N T S

Page 7: Design for Startups

R E Q U I R E M E N T S

• New or Existing Project?

• What do you need?

• Scope / timeline

• Audience, stakeholders

• Competition, examples, inspiration

• Requirements, wireframes*, existing files/resources

Page 8: Design for Startups

D E L I V E R A B L E S

Page 9: Design for Startups

Mostly grayscale UI design with focus on refining feature workflow

W I R E F R A M E SD E S I G N D E L I V E R A B L E S

Page 10: Design for Startups

W I R E F R A M E SD E S I G N D E L I V E R A B L E S

Page 11: Design for Startups

High fidelity UI designs to be implemented

V I S U A L D E S I G ND E S I G N D E L I V E R A B L E S

Page 12: Design for Startups

V I S U A L D E S I G N E X P L O R AT I O ND E S I G N D E L I V E R A B L E S

Page 13: Design for Startups

I N V I S I O N P R O T O T Y P ED E S I G N D E L I V E R A B L E S

Interactive prototype to review and provide feedback on design flows

• Go through prototype on web or mobile device

• Leave comments directly on design

Example: https://invis.io/4Y44VQI6G

Page 14: Design for Startups

Z E P L I ND E S I G N D E L I V E R A B L E S

Easy tool for designers to export assets and developers to receive design specs

Use desktop or web app

• Designers don’t need to spend hours or days speccing

• Specs are always up to date & ‘live’

• Developers don’t need to have or install design tools

Example: https://zpl.io/Z1tHGus

Page 15: Design for Startups

P R I N C I P L ED E S I G N D E L I V E R A B L E S

Create animations to illustrate transitions or interactions

Example:

Page 16: Design for Startups

C O N C E P T S

Page 17: Design for Startups

D E S I G N PAT T E R N SC O N C E P T S

Page 18: Design for Startups

F L O W SC O N C E P T S

Page 19: Design for Startups

O N B O A R D I N GC O N C E P T S

Page 20: Design for Startups

W A L K T H R O U G H SC O N C E P T S

Page 21: Design for Startups

I N T E R A C T I O N SC O N C E P T S

Page 22: Design for Startups

I N T E R A C T I O N SC O N C E P T S

Page 23: Design for Startups

E M P T Y S TAT EC O N C E P T S

Page 24: Design for Startups

E R R O R S TAT E SC O N C E P T S

Page 25: Design for Startups

R E S O U R C E S

Page 26: Design for Startups

P T T R N SR E S O U R C E S

Page 27: Design for Startups

B A L S A M I QR E S O U R C E S

Page 28: Design for Startups

D R I B B B L ER E S O U R C E S

Page 29: Design for Startups

B E H A N C ER E S O U R C E S

Page 30: Design for Startups

S K E T C H A P P R E S O U R C E SR E S O U R C E S

Page 31: Design for Startups

T H E N O U N P R O J E C TR E S O U R C E S

Page 32: Design for Startups

P R I N C I P L E R E P OR E S O U R C E S

Page 33: Design for Startups

Q & A A N D D I S C U S S I O N

Page 34: Design for Startups

I M P E K A B L E

Pek PongpaetManaging [email protected]

Workshops at learn.impekable.com