How do we elevate the collaboration between product designer and developer to create great work?

1. COLLABORATIVE
PRODUCT DESIGN

2. HELLO! I am Đoàn Quốc Anh
Product & Design Manager @
At GEEK Up we consulted and designed more than 50
digital products. Help entrepreneurs and businesses to
build the right product and build product right.
I am here because I love to have more Product
Designer out there.

3. OUR STORY
OF PRODUCT DESIGN
How did we design a product

4. Things
seems
good…
Finishing one of our 1st big project , we follow
all step in process, and created good designs.
All the remain works is just handover it to
development team by a simple email.

5. Until
we code
them…
Developer: I really hate design detail Y,
why are we doing it that way?
Design is too difficult!
Can we do it this way instead? Or get rid
of it?
Designer: design doesn’t match UI, I
thought it is obvious, whyyy? How could
they not realize?

6. And then… Developer: Take 30% of time of the whole
project to fix all the design issues
They found bunch of edge cases and flows that
designer does not think of…
Designer: constantly think developer is not
good enough and strong enough to implement
the design
And the team lost each other trust!

7. HOW DESIGNER CAN ENSURE
PRODUCT QUALITY

8. Product Strategy
- Value Proposition
- Product Design Canvas
User Research
- Personas
- Scenarios
- Job-to-be-done
Prototyping
- Lo-fi/Wireframe
- Clickable prototype
Develop
- Develop & Launch
- Measure performance
- Styling
- Hi-fi design
Usability Test
- Contextual testing
- A/B testing
Look back at our Product Design Process
Visual Design

9. And the
Plan
The main goal is to make the team
understand each other decision, and each
decision shouln’t be subjective but based
on a reason.
1. Overlap each other knowledge
2. Involve people in the design process
3. Use of collaboration tools

10. OVERLAP EACH OTHER
KNOWLEDGE

11. Learn and
share
Designers should know the basics of
coding:
- HTML & CSS, Responsive
- Website development fundamental, - -
Web Frameworks (Bootstrap, LESS,
Foundation.)
Designer must share and educate the
team about: Design Process and UX is
the job of the whole team

12. INVOLVE PEOPLE IN YOUR
PROCESS

13. Product Strategy
- Value Proposition
- Product Design Canvas
User Research
- Personas
- Scenarios
- Job-to-be-done
Prototyping
- Lo-fi/Wireframe
- Clickable prototype
Develop
- Develop & Launch
- Measure performance
- Styling
- Hi-fi design
Usability Test
- Contextual testing
- A/B testing
Involve the team in Product Design Process
Visual Design

14. User
Research
Persona Workshop with
the team

15. User
Research
Make Persona visible and
use it for the discussion
with the team

16. Prototyping
Show how it work, don’t
just tell, create animation
prototype
Be very open with
Developer opinions

17. Prototyping - Lo-fi prototyping:
UXPin, PopApp prototype
- Simple Prototype:
InvisionApp, MarvelApp
- Animation and advance
prototype:
FramerJS, Indigo Infragistic.

18. Usability Test
Pilot Usability Test with
development team before
with actual user

19. Create detail Styleguide
Visual Design

20. Use of Open Source
UI kit/UI Framework to
save time of matching
design with
development
Visual Design

21. And the
most
important!
Present the design to team, never
just handing the source file
Explain that design is problem solving, explain
why there are different patterns to solve a
problem:
Why not Pagination but Infinite Load
Why Pop Up but not Open New Page

22. - Design Spec:
Zeplin.io, Avocode.com
- Design feedback:
Juntoo.com
Develop

23. SOME
NOTES
- Designer shouldn’t be introvert all the time
- Lead by design (Zurb.com):
▫ Share the problem,
▫ Share how we solve problem by design,
▫ Share how we make descison,
▫ Share how the user life is getting better from
it and show how the developer can make it
happen