Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

How to make visual designs shine (with user-centred design)

16 views

Published on

I think everyone got the memo – user-centred design delivers results. Yet when it comes to visual design, many still rely on creative intuition.

Get it wrong and it will undermine your team's work - and maybe your client's brand. But we can reduce the risk of disappointing big-bangs and awkward ta-da! moments.

So come and hear about an evidence-based approach that makes visual design shine. I'll share a few simple techniques - underpinned by user-centred principles - to make your work more effective.

Published in: Design
  • Be the first to comment

  • Be the first to like this

How to make visual designs shine (with user-centred design)

  1. 1. how to (with user-centred design) make visual designs shine
  2. 2. welcome!
  3. 3. my promise
  4. 4. 
 you’ll know 
 how to design 
 more effectively
 by the end of this talk
  5. 5. Ollie who?!
  6. 6. creative director at
  7. 7. People first 
 in a digital world
  8. 8. the problem
  9. 9. the problem pt1 : brand communication
  10. 10. clearly communicate 
 unique set of values common objective:
  11. 11. clearly communicate 
 unique set of values brand common objective:
  12. 12. why is communication 
 of brand important? and…
  13. 13. brand is a key differentiator so…
  14. 14. brand clarity = success and…
  15. 15. Summary: • Clarity of brand is important • It builds trust and leads to success pt1 : brand communication
  16. 16. the problem pt2 : unavoidable updates
  17. 17. change happens.
  18. 18. People Technology Competitors B
  19. 19. People Technology Competitors
  20. 20. Summary: • Change happens • Brands need to update their experience 
 to remain relevant pt2 : unavoidable updates
  21. 21. the problem pt3 : creative intuition
  22. 22. many designers 
 rely on intuition to communicate brand
  23. 23. Typical process Design some things Release (with fingers crossed) Brand immersion
  24. 24. Typical process Market insight (if your lucky) Brand immersion Design some things Cross fingers and release RISKY!
  25. 25. 2 months after launch
 sales down by 20% 

  26. 26. £33 million
 to revert back
  27. 27. Summary: • Creative “geniuses” are risky • Relying on creative intuition leads to failure pt3 : creative intuition
  28. 28. is there a better way?!
  29. 29. designers people
  30. 30. A better way?! Design some things Release User test ! Brand immersion
  31. 31. A better way?! Design some things Release User test ! Brand immersion CONFUSING
  32. 32. “It’s nice” “I like the font” “I don’t like blue” typical responses:
  33. 33. “It’s clean” “I like the font” “I don’t like blue” typical responses: NOTHING ABOUT BRAND VALUES…
  34. 34. so, what’s happening?
  35. 35. Research question 
 too broad? possible problem:
  36. 36. Participants aiming 
 to please? possible problem:
  37. 37. Participants finding it hard to judge design? possible problem:
  38. 38. Sample size too small? possible problem:
  39. 39. Is one round of 
 research enough? possible problem:
  40. 40. measuring brand communication 
 is complicated
  41. 41. but…
  42. 42. evaluate how well your design communicates your brand our approach means you can
  43. 43. time for audience
 participation
  44. 44. goo.gl/nkTkDf
  45. 45. how was that?!
  46. 46. design validate releasevalues
  47. 47. design validate releasevalues
  48. 48. ( one moment please… )
  49. 49. design validate releasevalues
  50. 50. 1. design guidance 2. test criteria This step provides 2 key outputs
  51. 51. 1. design guidance 2. test criteria This step provides 2 key outputs how to design
  52. 52. 1. design guidance 2. test criteria This step provides 2 key outputs how to design how to test
  53. 53. how?
  54. 54. workshop.
  55. 55. Brand
 attributes Personality
 scales ——— ——— ——— ——— ——— ——— ——— ——— ——— ———
  56. 56. brand attributes capture adjectives prioritise summarise and sign-off ——— ——— ——— ———
  57. 57. B
  58. 58. Personal Simple BExpert Human Fun Cutting edge Brilliant Cool Edgy Warm
  59. 59. Personal Simple BExpert Human Fun Cutting edge Brilliant Cool Edgy Warm
  60. 60. Personality scales choose words plot current state plot desired state summarise and sign-off ——— ——— ——— ——— ——— ———
  61. 61. Fun Serious B
  62. 62. Fun Serious B Current state
  63. 63. Fun Serious B Desired state
  64. 64. research
 analysis
  65. 65. Thenewversioncreates moreoftheassociations youwanttoevoke Question: “Which of these words describe…” (366 people answered this) 1 Simple 2 Clear 3 Welcoming 4 Modern 5 Friendly 6 Nothing special 7 Middle of the road 8 Informal 9 Safe 10 Doesn't take itself too seriously 11 Different 12 Human 13 Personal 14 Young 15 Budget 16 Lively 17 Worth listening to 18 Smart 19 Talks to me with respect 20 Formal 1 Doesn't take itself too seriously 2 Modern 3 Friendly 4 Simple 5 Fun 6 Informal 7 Clear 8 Welcoming 9 Different 10 Fun-loving 11 Lively 12 Young 13 Doing something new 14 Funny 15 Does things its own way 16 Carefree 17 Nothing special 18 Cool 19 Smart 20 Worth listening to Top20associations:currentversion You defined the brand as The new version includes 9/11 desired associations in the top 20 responses. In contrast, the top 20 associations for current version only includes 5/11 of the desired words or phrases. For the new version, the top three associations were ‘doesn’t take itself too seriously’, ‘modern’ and ‘friendly’ Top20associations:newversion
  66. 66. Thenewversionis takingyoucloserto yourdesiredbrand personality Question: 
 Slider between words (366 people answered this) In each case, there’s been a movement towards the desired position on each spectrum, compared to the current version You defined the brand as New version Current version D N C Been around for 
 a long time Fresh 
 & new DNC Middle of 
 the road Edgy DNC Quiet Fun-loving DNC Hands-off Gets involved DC N
  67. 67. Boring, bland, dry A bit old A bit boring, but simple For the young Clear, simple, basic, clean Business-like, informative, clear Dull, boring, safe Professional “ A little cheery Bright and clearly for Smile Quirky New, fun, interactive Amusing Clever imagery A bit overwhelming Offbeam, quirky, intriguing, attractive, cool “ Users’unprompted commentshighlightthe differencesbetween thetwoversions Question:
 “What words would you use to describe this design?” (366 people answered this) Aselectionofparticipants’
 unpromptedassociations:currentversion The current version was felt to be more restrained, compared to the new version in which the humour came through strongly (whether or not participants related to it personally). Participants also noted a number of superficial similarities: pink, Smile name, banking subject matter Bold = comment from Smile customer Aselectionofparticipants’
 unpromptedassociations:newversion
  68. 68. case study
  69. 69. risk!
  70. 70. distinct 
 character clear information
  71. 71. version 1TOO PLAIN…
  72. 72. version 2 TRY HARD…
  73. 73. version 3 JUST RIGHT.
  74. 74. Results so far: Very down to earth and realistic, 
 not at all patronising “ Happy Frank user
  75. 75. Results so far: Relaxed tone, casual, 
 no pressure, calming colours “ Happy Frank user
  76. 76. Results so far: This is prevention through digital technology at its best. In short, FRANK is giving young people clear, unbiased information in a way they are comfortable with accessing. “ Duncan Selbie, 
 Chief exec, Public Health England
  77. 77. Results so far: This is prevention through digital technology at its best. In short, FRANK is giving young people clear, unbiased information in a way they are comfortable with accessing. “ Duncan Selbie, 
 Chief exec, Public Health England
  78. 78. 44% increase in visitors 15% improvement in people finding the info they need 171% improvement in accessibility Results so far:
  79. 79. Results so far: This is one of the best performing sites we have seen for any of our clients - private and public sector. “ Google
  80. 80. top tips
  81. 81. Pilot your research You’ll be surprised how many problems it can bring up - but it’s worth it TOP TIP
  82. 82. Sign off Confirm that all stakeholders are comfortable with outputs before you 
 take them into research TOP TIP
  83. 83. Disagreement You may encounter disagreement amongst stakeholders. Embrace it and take lots of notes. TOP TIP
  84. 84. Repeat research The more research you do the better the end product. Do as much as you can. TOP TIP
  85. 85. Group analysis Don’t leave the analysis to one person. Discuss research findings as a group. TOP TIP
  86. 86. Further insights You may uncover insights outside of your main research objective. TOP TIP
  87. 87. Keep survey short Fewer questions will increase likelihood of people completing the survey TOP TIP
  88. 88. when to use
  89. 89. This approach tests alignment between 
 the message you want your brand to give, 
 and what consumers think your brand is saying. We are not testing whether or not consumers 
 like the brand. REMEMBER…
  90. 90. This approach tests alignment between 
 the message you want your brand to give, 
 and what consumers think your brand is saying. We are not testing whether or not consumers 
 like the brand. REMEMBER…
  91. 91. check efficacy of design work throughout your brand experience could be used to
  92. 92. • websites • logos • visual design concepts • marketing campaigns • voice interface We’ve used it on:
  93. 93. over to you
  94. 94. use, experiment 
 and improve it I’m inviting you to
  95. 95. FINAL
 THOUGHT
  96. 96. what proof do I have
 that this design 
 will work?
  97. 97. Questions?!?
  98. 98. OllieMiller.com I’m not on twitter. but you can find my slides and contact details on

×