Slides from a workshop on how startups should incorporate design into product development, how to effectively work and communicate with designers, and how to use common design tools such as Sketch, Invision and Principle.

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

2. 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

3. 39M users
O U R E N T E R P R I S E C L I E N T S

4. 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

5. O U T L I N E
• Requirements
• Deliverables
• Concepts
• Resources

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

7. 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

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

9. Mostly grayscale UI design with focus on refining feature workflow
W I R E F R A M E S
D E S I G N D E L I V E R A B L E S

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

11. High fidelity UI designs to be implemented
V I S U A L D E S I G N
D E S I G N D E L I V E R A B L E S

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

13. I N V I S I O N P R O T O T Y P E
D 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

14. Z E P L I N
D 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

15. P R I N C I P L E
D 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:

16. C O N C E P T S

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

18. F L O W S
C O N C E P T S

19. O N B O A R D I N G
C O N C E P T S

20. WA L K T H R O U G H S
C O N C E P T S

21. I N T E R A C T I O N S
C O N C E P T S

22. I N T E R A C T I O N S
C O N C E P T S

23. E M P T Y S TAT E
C O N C E P T S

24. E R R O R S TAT E S
C O N C E P T S

25. R E S O U R C E S

26. P T T R N S
R E S O U R C E S

27. B A L S A M I Q
R E S O U R C E S

28. D R I B B B L E
R E S O U R C E S

29. B E H A N C E
R E S O U R C E S

30. S K E T C H A P P R E S O U R C E S
R E S O U R C E S

31. T H E N O U N P R O J E C T
R E S O U R C E S

32. P R I N C I P L E R E P O
R E S O U R C E S

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

34. I M P E K A B L E
Pek Pongpaet
Managing Partner
pek@impekable.com
650.733.6006
Workshops at
learn.impekable.com