product design at wiredcraft - may 2016 ui/ux meetup shanghai
TRANSCRIPT
How we design stuff that doesn’t suck
Product design at Wiredcraft
- Ronan Berder
- CEO (aka Chief Janitor Officer)
- Email: [email protected]
- 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?
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& hopefully that is useful for your team too
What is this all about?
About us Shameless plug I warned you about...
- We help Fortune 500, non-profits and startups build digital products
- 30+ engineers , designers & strategists
- 3 countrieswith offices in NYC, DC, Berlin & Shanghai
- 100+ clientsincluding CNN, the World Bank, Apple, the United Nations, Starbucks...
In a nutshell...
- We think, design and build Web & mobile apps
- This means we work on many related thingsData science, DevOps, Strategy & stuff…
- We work on sh*t that matters:
- Things at scale Building mobile apps for millions of users
- Things with an impactBuilding software to run the elections of Myanmar
Wait… what?
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 detailsthat includes technology & graphic design
- Let’s design by committee (yuck!) or in a silo (double yuck!)
How to f*ck things up
- Yep! Even “pros” fall for it.
- Failure doesn’t care about your likes on Dribbble
- That’s why we have a process
Really..? Why?
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
- It defines what success looks like and that’s probably the most important thing
Is that even working?
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?
- “Inspired” from Google Ventures
- Moar on our website (shameless plug again):
How we design products
We totally ripped it off
- Goal: Frame the discussion & list goals
- Tools: interviews (see our Google Forms), data, moodboards…
- Deliverables:
- Pitch
- Critical user story
- Definition of success (seriously)
Understand
- 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
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.
Wireframes & Mockups
Userflows
- 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
- 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
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
- 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...
Are you not entertained? Also: questions?
The WeChat thingy, again (I still blame the marketing team)
