Slides from the workshop @danny_bluestone and @duckymatt from Cyber-Duck Ltd gave at UX London 2013. The workshop focused on how by putting the user at the centre of design decisions you can deliver a better experience. With a mixture of theory and hands-on activities the workshop covered user research, activity mapping, card sorting and participative sketching techniques.

1. DESIGNING BETTER
EXPERIENCES
THROUGH A USER CENTRED APPROACH
Danny Bluestone | @danny_bluestone
Matt Gibson | @duckymatt

2. WHAT IS
USER CENTRED
DESIGN?

3. The central premise of user centred design is
that the best designed products and services
result from understanding the needs of the
people who will use them.

4. SOME BENEFITS OF UCD
1. Qualitative - Find out what customers actually
want.
2. Context – Discover the exact context to design for.
3. Creativity – Combine UCD with branding.
4. Focus - Avoid ‘analysis paralysis’.
5. Remove egos– Verify decisions with real
customers.

5. GIVING USERS WHAT THEY NEED
NOT WHAT YOU THINK THEY NEED
http://xkcd.com/773/

6. TAKE TIME TO OBSERVE
HOW PEOPLE USE YOUR DESIGN
http://www.flickr.com/photos/matski_98/8259750205/

7. DESIGN FOR PEOPLE, NOT
AWARDSTIMOTHY PRESTRO, CEO of DMT
http://designthatmatters.org/portfolio/projects/

8. DESIGN FOR OUTCOMES
www.ted.com/talks/timothy_prestero_design_for_people_not_awards.html and http://www.designthatmatters.org/pictures/dtm_blog/Baby_in_Firefly.JPG

9. LEWIS HAMILTON ON UCD
If the engineers could, they'd give you 40 buttons, but
when you're driving it's not that easy to use them all,
so it's better to have the ones you really need.
The key thing is to make it simpler without getting rid
of stuff that I might need to make the car go quicker.
http://www.flickr.com/photos/simonw92/8534697674/

10. As we reform the delivery of public services,
they are designed around the needs of the user,
rather than has been far too often the case in the past,
being designed to suit the convenience of the
government.
Francis Maude, MP

11. Approaches Disciplines
User centred design Interaction design
Self design Information architecture
Activity centred design Usability testing
Genius design Research

12. IS UCD ALWAYS THE BEST
APPROACH?

13. http://www.flickr.com/photos/centralasian/5577225117

14. USERS ARE NOT
DESIGNERS
IT IS USER CENTRED DESIGN,
NOT USER CONTROLLED DESIGN

15. THERE IS NO SUCH THING
AS A ONE-SIZE-FITS-ALL
APPROACH
FOCUS ON OUTCOMES NOT DELIVERABLES

16. USABILITY IS NOT A FEATURE
IT DEPENDS ON THE USER, THE ENVIRONMENT,
THE TASK, AND OTHER CONTEXTUAL FACTORS
http://www.flickr.com/photos/oewf/2924217723/

17. HOW WE APPROACH UCD
4. Improve
3. Test 1. Research
2. Design / prototype

18. RESEARCHING REQUIREMENTS

19. FRONT-LOADING
STAKEHOLDER INTERVIEWS
• Why is it being made?
• Who are the key stakeholders and what are their goals?
• How does it fit in with the wider company objectives?
• Gain insight into market and target audiences
• Identify competitors early on
http://goodkickoffmeetings.com/2010/04/stakeholder-frontloading/

20. TECHNIQUES FOR
EFFECTIVE INTERVIEWS
• Create an informal and relaxed atmosphere
• Stay flexible
• Keep it one-on-one
• Allow them to speak ‘off-the-record’

21. The turning point in many interviews is when the
interviewee gets up and closes the office door and
lowers their voice.
Paul Boag, Headscape
http://boagworld.com/business-strategy/how-to-improve-your-site-using-stakeholder-interviews/

22. DEFINING CONTEXT OF
USE
1. User profiles
2. Activities
3. Environment

23. TIPS FOR GETTING INSIGHT
INTO USER PROFILES
• Speak to existing users if possible
• Competitors
• Ethnographic studies / research
• Expert insight

24. THE BEST USER PERSONAS
ARE BASED ON REAL USERS
http://www.flickr.com/photos/patloika/7946438528

25. HOW DO I FIND MY USERS?
• Ethnio for existing users
• Social media
• Go to the physical locations where you’ll find
your users
• Use professional recruiters
http://www.flickr.com/photos/oatsy40/6783078815/

26. Accessibility is the degree to which anyone can access
and use a website using any web browsing technology.
http://www.rnib.org.uk/professionals/webaccessibility/background/Pages/background.aspx RNIB
http://www.flickr.com/photos/furbyx4/2968376257/

27. WHAT ACTIVITIES DO YOUR
USERS NEED TO PERFORM?
http://www.flickr.com/photos/fernando/36759033

28. FREQUENCY
WHAT WILL THE USER NEED TO
DO MOST OFTEN?

29. CRITICAL
CAN BE INFREQUENT,
BUT IT IS CRITICAL TO SUPPORT
THEM

30. ENVIRONMENT ANALYSIS
• Physical
• Social / cultural
• Technical

31. DESIGN / PROTOTYPING

32. CARD SORTING
• The ‘base’ for your information architecture.
• Gets insights and patterns into users ‘mental model’.
• It helps to increase findability in a system.

33. The current recommendation is to test 15 users for
card sorting in most projects, and 30 users in big
projects...
Jakob Nielsen, Nielsen Norman
Group

34. TECHNIQUES FOR
CARD SORTING
• Use lots of post-it notes or cards
• Get users to sort the cards in open or closed groups
• Your main job is to observe and keep the momentum
• Learn from the patterns of different groups via analysis
• Helps to create a record of the structure/taxonomy

35. EXERCISE:
UNDERTAKING
CARD SORTING
In groups of 5 people:
• Create the higher level categories for the website
• Write down the main sections and screens
• Organise the sections into logical groups

36. HICKS’S LAW
“THE MORE CHOICES YOU HAVE TO CHOOSE FROM, THE
LONGER IT TAKES FOR YOU TO MAKE A DECISION.”
http://www.cirencalui.com/

37. INTRODUCING
INTERACTION DESIGN (IxD)
• Helps to map out ‘flows of control’
• Progresses to sketching and prototyping
• Pivotal at delivering functional specifications

38. FITT’S LAW
“THE TIME REQUIRED TO RAPIDLY MOVE TO A TARGET AREA IS A
FUNCTION OF THE DISTANCE TO AND THE SIZE OF THE TARGET”
http://modetro.com/mb-games-simon-says-vintage-retro-game-70s

39. TECHNIQUES FOR
INTERACTION DESIGN (IxD)
• Use personas and interviews to inform the design.
• Competitor research see what is already out there.
• Ethnography can help you to understand real users.
• Validate what you do with real users as early as possible.

40. IxD –FLOW OF CONTROL EXAMPLE
http://wc1.smartdraw.com/examples/content/examples/01_flowcharts/4_other_flowcharts/control_flow_epc_diagram_flowchart_l.jpg

41. IxD – PROTOTYPE
http://www.infoq.com/resource/articles/wireframes-start-development-projects/en/resources/3fig1.jpg

42. START PROTOTYPES
WITH PEN AND PAPER
http://www.flickr.com/photos/furbyx4/2968376257/

43. I do not know the cognitive reasons behind this, but I
have never seen this not be true. The more human
your picture, the more human will be the response.
Dan Roam, Back Of The Napkin
http://www.thebackofthenapkin.com/

44. PARTICIPATORY SKETCHING
TIPS
• Encourage low fidelity
• Review as a group
• Frame critique with user stories

45. TEST / EVALUATE

46. DESIGNS ARE
HYPOTHESES
ITERATE QUICKLY AND TEST ASSUMPTIONS

47. ETHNOGRAPHY
http://www.flickr.com/photos/alui0000/4814280779

48. GUERILLA USER
TESTING
http://www.flickr.com/photos/5tein/3609261904

49. Lets us see how our study participants scan the
search results page, and is the next best thing to
actually being able to read their minds.
Anne Aula and Kerry Rodden, User Experience Researchers, Google
GOOGLE ON EYE
TRACKING
http://www.japantoday.com/images/size/x/2013/03/urn%3Apublicid%3Aap.org%3A83a7bae63f044fbc938d2f4bea94d862.jpg

50. INTERVIEWS
http://uxmag.com/articles/eye-tracking-the-best-way-to-test-rich-app-usability

51. OTHER METHODS OF
USER FEEDBACK
• Click tracking tools
• A/B and MVT testing
• Remote user testing
• Expert reviews

52. BALANCING UCD WITH
CLIENT’S NEEDS

53. EXPLAINING WATER TO
FISH
Courtesy of Karen McGrane
http://alistapart.com/column/explaining-water-to-fish
http://www.flickr.com/photos/healthgauge/7387853018/

54. WHAT WE’VE COVERED
• What is user centred design – Benefits / pitfalls
• Usability is not a feature
• Researching users and activities
• Paper prototyping
• Getting user feedback

55. THANK YOU!
Danny Bluestone | @danny_bluestone
Matt Gibson | @duckymatt