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