COLLABORATIVEPRODUCT DESIGN

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.

OUR STORYOF PRODUCT DESIGNHow did we design a product

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.

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?  

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!

HOW DESIGNER CAN ENSURE PRODUCT QUALITY

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

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

OVERLAP EACH OTHER KNOWLEDGE

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

INVOLVE PEOPLE IN YOUR PROCESS

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

User Research

Persona Workshop with the team

User Research

Make Persona visible and use it for the discussion with the team

Prototyping

Show how it work, don’t just tell, create animation prototype

Be very open with Developer opinions

Prototyping - Lo-fi prototyping: UXPin, PopApp prototype

- Simple Prototype: InvisionApp, MarvelApp

- Animation and advance prototype: FramerJS, Indigo Infragistic.

Usability Test

Pilot Usability Test with development team before with actual user

Create detail Styleguide

Visual Design

Use of Open Source UI kit/UI Framework to save time of matching design with development

Visual Design

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

- Design Spec: Zeplin.io, Avocode.com

- Design feedback: Juntoo.com

Develop

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