Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
How we design stuff that doesn’t suck
Product design at
Wiredcraft
- Ronan Berder
- CEO (aka Chief Janitor Officer)
- Email: ronan@wiredcraft.com
- WeChat: hunvreus
- I know a thing or two ...
Big WeChat thingy
(the marketing team made me)
- Submit you to some shameless plug
- Understand what’s hard about designing products
- Show you how we solve it

& hopefu...
About us

Shameless plug I warned you about...
- We help Fortune 500, non-profits and startups build
digital products
- 30+ engineers , designers & strategists
- 3 count...
- We think, design and build Web & mobile apps
- This means we work on many related things

Data science, DevOps, Strategy...
Look at ‘em clients!
The problem
There has to be one, otherwise why would I be here?
- Let’s get started asap
- Let’s obsess about the details

that includes technology & graphic design
- Let’s design by com...
- Yep! Even “pros” fall for it.
- Failure doesn’t care about your likes on Dribbble
- That’s why we have a process
Really....
Our process

I know you guys love a good process
- It’s not perfect, but it weeds out the obvious fuckups
- It adds constraints, and constraints are good for creativity
- ...
1. Understand: set up the context and outline the problems
and goals you're designing for.
2. Diverge: generate as many so...
- “Inspired” from Google Ventures
- Moar on our website (shameless plug again):

How we design products
We totally ripped ...
- Goal: Frame the discussion & list goals
- Tools: interviews (see our Google Forms), data,
moodboards…
- Deliverables:
- ...
- Goal: Generate ideas to solve the identified problem.
- Tools: wireframes & userflows (doodles!!!)
- Deliverables:
- Wir...
How we run it...
- Each individual/team sketches at least 3 versions of the
user flow and UI.
- Teams/individuals then go ...
Wireframes & Mockups
Userflows
- Goal: Pick a variation you will prototype.
- Tools: wireframes & userflows (doodles again!!!)
- Deliverables:
- A single...
- Goal: Build a prototype to test.
- Tools: Keynote, Powerpoint, Google Docs, Marvel,
Invision, Dreamweaver (just kidding)...
Validate
- Goal: Test the prototype and validate our
assumptions
- Tools: Skype, Google Talk, ...
- Deliverables:
- Notes ...
- Move as fast as possible and iterate.
- Sketching is always the first step.
- Content and function drive the design disc...
Are you not entertained?

Also: questions?
The WeChat thingy, again
(I still blame the marketing team)
Event organised by
“Technology with Impact”
http://wiredcraft.com/
Product Design at Wiredcraft - May 2016 UI/UX Meetup Shanghai
Nächste SlideShare
Wird geladen in …5
×

Product Design at Wiredcraft - May 2016 UI/UX Meetup Shanghai

151 Aufrufe

Veröffentlicht am

Ronan Berder, founder at Wiredcraft, shares the product design process used at Wiredcraft.

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

Product Design at Wiredcraft - May 2016 UI/UX Meetup Shanghai

  1. 1. How we design stuff that doesn’t suck Product design at Wiredcraft
  2. 2. - Ronan Berder - CEO (aka Chief Janitor Officer) - Email: ronan@wiredcraft.com - WeChat: hunvreus - I know a thing or two about design - I’m French and will swear like a pirate Who the f**k is that guy?
  3. 3. Big WeChat thingy (the marketing team made me)
  4. 4. - Submit you to some shameless plug - Understand what’s hard about designing products - Show you how we solve it
 & hopefully that is useful for your team too What is this all about?
  5. 5. About us
 Shameless plug I warned you about...
  6. 6. - We help Fortune 500, non-profits and startups build digital products - 30+ engineers , designers & strategists - 3 countries
 with offices in NYC, DC, Berlin & Shanghai - 100+ clients
 including CNN, the World Bank, Apple, the United Nations, Starbucks... In a nutshell...
  7. 7. - We think, design and build Web & mobile apps - This means we work on many related things
 Data science, DevOps, Strategy & stuff… - We work on sh*t that matters: - Things at scale
 Building mobile apps for millions of users - Things with an impact
 Building software to run the elections of Myanmar Wait… what?
  8. 8. Look at ‘em clients!
  9. 9. The problem There has to be one, otherwise why would I be here?
  10. 10. - Let’s get started asap - Let’s obsess about the details
 that includes technology & graphic design - Let’s design by committee (yuck!) or in a silo (double yuck!) How to f*ck things up
  11. 11. - Yep! Even “pros” fall for it. - Failure doesn’t care about your likes on Dribbble - That’s why we have a process Really..? Why?
  12. 12. Our process
 I know you guys love a good process
  13. 13. - It’s not perfect, but it weeds out the obvious fuckups - It adds constraints, and constraints are good for creativity - It defines what success looks like
 and that’s probably the most important thing Is that even working?
  14. 14. 1. Understand: set up the context and outline the problems and goals you're designing for. 2. Diverge: generate as many solutions as possible. 3. Converge: align the team around one idea. 4. Prototype: quickly build a prototype you can test. 5. Validate: test the prototype with users. Ok, what does it look like?
  15. 15. - “Inspired” from Google Ventures - Moar on our website (shameless plug again):
 How we design products We totally ripped it off
  16. 16. - Goal: Frame the discussion & list goals - Tools: interviews (see our Google Forms), data, moodboards… - Deliverables: - Pitch - Critical user story - Definition of success (seriously) Understand
  17. 17. - Goal: Generate ideas to solve the identified problem. - Tools: wireframes & userflows (doodles!!!) - Deliverables: - Wireframes & userflows for the critical user story - Notes about each other's solutions Diverge
  18. 18. How we run it... - Each individual/team sketches at least 3 versions of the user flow and UI. - Teams/individuals then go around and silently evaluate others work. - You can then open the discussion to the whole group to explain and debate the solutions generated.
  19. 19. Wireframes & Mockups
  20. 20. Userflows
  21. 21. - Goal: Pick a variation you will prototype. - Tools: wireframes & userflows (doodles again!!!) - Deliverables: - A single userflow - A list of assumptions and how to test them Converge
  22. 22. - Goal: Build a prototype to test. - Tools: Keynote, Powerpoint, Google Docs, Marvel, Invision, Dreamweaver (just kidding)... - Deliverables: - A simple prototype that can be tested - A scenario to test the prototype Prototype
  23. 23. Validate - Goal: Test the prototype and validate our assumptions - Tools: Skype, Google Talk, ... - Deliverables: - Notes about what works and what doesn’t - Validation/invalidation of assumptions
  24. 24. - Move as fast as possible and iterate. - Sketching is always the first step. - Content and function drive the design discussion, not the other way around. - Work on as few elements as possible. - Steal ideas from others. - Be transparent; update others of your progress. Keep these in mind...
  25. 25. Are you not entertained?
 Also: questions?
  26. 26. The WeChat thingy, again (I still blame the marketing team)
  27. 27. Event organised by “Technology with Impact” http://wiredcraft.com/

×