Collaborative Product Design
-
Upload
anh-doan-quoc -
Category
Technology
-
view
29 -
download
0
Transcript of Collaborative Product Design
![Page 1: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/1.jpg)
COLLABORATIVEPRODUCT DESIGN
![Page 2: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/2.jpg)
HELLO! I am Đoàn Quốc AnhProduct & 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.
![Page 3: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/3.jpg)
OUR STORYOF PRODUCT DESIGNHow did we design a product
![Page 4: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/4.jpg)
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.
![Page 5: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/5.jpg)
Until we codethem…
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?
![Page 6: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/6.jpg)
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!
![Page 7: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/7.jpg)
HOW DESIGNER CAN ENSURE PRODUCT QUALITY
![Page 8: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/8.jpg)
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
![Page 9: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/9.jpg)
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
![Page 10: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/10.jpg)
OVERLAP EACH OTHER KNOWLEDGE
![Page 11: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/11.jpg)
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
![Page 12: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/12.jpg)
INVOLVE PEOPLE IN YOUR PROCESS
![Page 13: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/13.jpg)
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
![Page 14: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/14.jpg)
User Research
Persona Workshop with the team
![Page 15: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/15.jpg)
User Research
Make Persona visible and use it for the discussion with the team
![Page 16: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/16.jpg)
Prototyping
Show how it work, don’t just tell, create animation prototype
Be very open with Developer opinions
![Page 17: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/17.jpg)
Prototyping - Lo-fi prototyping: UXPin, PopApp prototype
- Simple Prototype: InvisionApp, MarvelApp
- Animation and advance prototype: FramerJS, Indigo Infragistic.
![Page 18: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/18.jpg)
Usability Test
Pilot Usability Test with development team before with actual user
![Page 19: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/19.jpg)
Create detail Styleguide
Visual Design
![Page 20: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/20.jpg)
Use of Open Source UI kit/UI Framework to save time of matching design with development
Visual Design
![Page 21: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/21.jpg)
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
![Page 22: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/22.jpg)
- Design Spec: Zeplin.io, Avocode.com
- Design feedback: Juntoo.com
Develop
![Page 23: Collaborative Product Design](https://reader035.fdocuments.us/reader035/viewer/2022081604/589b889e1a28abc0098b4c89/html5/thumbnails/23.jpg)
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