Successfully reported this slideshow.

Turning Wireframes Into Polished Visuals - UX Australia 2017

2

Share

Loading in …3
×
1 of 43
1 of 43

Turning Wireframes Into Polished Visuals - UX Australia 2017

2

Share

Download to read offline

As UXers, and specifically Interaction Designs, most of us are comfortable and in control up until the point where we hand over wireframes to Visual Designers. At that stage, things can get a little tricky. How do you keep control of the design? How do you prevent client stakeholders from steering it in weird and arbitrary directions? How do you even brief the Visual Designer and then provide meaningful critique as they progress the design? We have some answers. Borrowing from behavioural psychology and leveraging Bipolar Emotional Response Testing (BERT) we've devised a method that draws out a design brief directly from users and solves many of the problems often encountered when moving from wireframe to finished visual design. We detail this method and illustrate it by way of a recent mobile app case study. You'll leave with practical tools that you can use on your project to give your wireframes the best chance of becoming fantastic visual designs that meet the specific desires of your users. Oh, and stakeholder reviews will be a breeze.

As UXers, and specifically Interaction Designs, most of us are comfortable and in control up until the point where we hand over wireframes to Visual Designers. At that stage, things can get a little tricky. How do you keep control of the design? How do you prevent client stakeholders from steering it in weird and arbitrary directions? How do you even brief the Visual Designer and then provide meaningful critique as they progress the design? We have some answers. Borrowing from behavioural psychology and leveraging Bipolar Emotional Response Testing (BERT) we've devised a method that draws out a design brief directly from users and solves many of the problems often encountered when moving from wireframe to finished visual design. We detail this method and illustrate it by way of a recent mobile app case study. You'll leave with practical tools that you can use on your project to give your wireframes the best chance of becoming fantastic visual designs that meet the specific desires of your users. Oh, and stakeholder reviews will be a breeze.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Related Audiobooks

Free with a 14 day trial from Scribd

See all

Turning Wireframes Into Polished Visuals - UX Australia 2017

  1. 1. Visual Design Chart 1 the chart Wireframe Turning Wireframes into Polished Visuals …Developing a singular, focused visual design brief while reducing stakeholder meddling. Matt Morphett - User Experience Strategist Jack Hsu - Visual UX Designer @mattmorphett @jack_ak_hsu
  2. 2. 1. Visual design not a User Centred process 2. Visual design not data-driven 3. You lose control of the visual design Problems we’ve observed - UX designer
  3. 3. 1. Design brief is usability based only 2. Brand-guideline + personas are not enough 3. Visual attributes in a successful design? 4. Visual attributes users find desirable? 5. Business or product stakeholders often provide feedback that they are unqualified to provide Problems we’ve observed - visual designer
  4. 4. The product
  5. 5. The visual design brief method
  6. 6. The visual design brief method 01 Devise bipolar pairs 02 Poll customers 03 Analyse, plot results 05 Evaluate mood boards 04 Create mood boards 07 Validate06 Design
  7. 7. Visual Design Brief In context DISCOVERY IDEATION DESIGN VALIDATION 01 02 03 04 User research Personas Scenarios Concept Sketches Wireframe Prototype Usability Testing UX process
  8. 8. The steps in detail
  9. 9. BERTs
  10. 10. Bipolar Emotional Response Tests or BERTs are a method of determining people’s subjective response to any designed artefact by plotting their feelings about it along a range of dimensions. BERTs
  11. 11. Explore the design extremes 01 Devise bipolar pairs
  12. 12. Intricate Minimal Traditional Avant Garde Professional Casual Natural Engineered Warm Cool Passionate Clinical Subtle Bold
  13. 13. • Stick to between 5 and 10 dimensions • Use terms that your audience will understand • Cover the gamut with continua • No overlaps between continua • No negatives, no positives • Leave room for designer interpretation. Suggestions
  14. 14. 02 Poll customers Poll customers about their ideal visual experience
  15. 15. When adjusting and monitoring my hearing, I want tools that look and feel: Segment by persona Provide task context
  16. 16. 03 Analyse, plot results Plot results against bipolar pairs
  17. 17. Visual DNA Intricate Minimal Traditional Avant Garde Professional Casual Natural Engineered Warm Cool Passionate Clinical Subtle Bold Customer preference
  18. 18. 04 Create mood boards Assemble mood boards riff themes
  19. 19. Intricate Minimal Traditional Avant Garde Professional Casual Natural Engineered Warm Cool Passionate Clinical Subtle Bold Customer preference Moodboard
 DNA by the Designer
  20. 20. Intricate Minimal Traditional Avant Garde Professional Casual Natural Engineered Warm Cool Passionate Clinical Subtle Bold Moodboard
 DNA by the Designer Customer preference
  21. 21. Intricate Minimal Traditional Avant Garde Professional Casual Natural Engineered Warm Cool Passionate Clinical Subtle Bold Moodboard
 DNA by the Designer Customer preference
  22. 22. 05 Evaluate mood boards Customers rate mood boards
  23. 23. Postive adjectives honest Impressive friendly innovative experienced stressful appealing desirable busy empowering too technical exciting intimidating reliable complex high quality familiar inviting rigid fast simplistic unconventional confusing frustrating unpredictable organised stimulating fun overwhelming slow Negative adjectives
  24. 24. honest Impressive friendly innovative experienced stressful appealing desirable busy empowering too technical exciting intimidating reliable complex high quality familiar inviting rigid fastsimplistic unconventional confusing frustrating unpredictable organised stimulating fun overwhelming slow
  25. 25. honest Impressive friendly innovative experienced stressful appealing desirable busy empowering too technical exciting intimidating reliable complex high quality familiar inviting rigid fastsimplistic unconventional confusing frustrating unpredictable organised stimulating fun overwhelming slow
  26. 26. 20% busy 24% too technical 37% complex 20% simplistic 43% confusing Our users thought this mood board lookedIntricate Minimal Traditional Avant Garde Professional Casual Natural Engineered Warm Cool Passionate Clinical Subtle Bold
  27. 27. 37% inviting 47% organised 47% familiar 40% appealing 58% friendly Our users thought this mood board lookedIntricate Minimal Traditional Avant Garde Professional Casual Natural Engineered Warm Cool Passionate Clinical Subtle Bold
  28. 28. Take strongest mood board as visual design inspiration.
  29. 29. 06 Design Marry mood board, DNA, ratings with wireframes and brand guidelines.
  30. 30. Test product visual designs, ask customers to rate them 07 Validate
  31. 31. Intricate Minimal Traditional Avant Garde Professional Casual Natural Engineered Warm Cool Passionate Clinical Subtle Bold 28% familiar 38% friendly 38% simplistic 31% appealing 51% organised Our users thought this concept looked Concept DNA
  32. 32. Iterate the design.
  33. 33. Results.
  34. 34. Stakeholders… Stop asking for drop shadows Trust the design process and people Start saying “I don’t know, what do our customers say?” Users… Encounter products that feel like a natural part of their lives Designers… Receive clear direction Know when their design is working
  35. 35. The method 01 Devise bipolar pairs 02 Poll customers 03 Analyse, plot results 05 Evaluate mood boards 04 Create mood boards 07 Validate06 Design
  36. 36. Questions?
  37. 37. Thanks Special thanks to Shane Morris Mario Boutet Victor Rodrigues David Thambiratnam Robert Southwood Saji Maruthurkkara Akhila Baht Erika Hillemacher Matt Morphett - User experience strategist Jack Hsu - Visual UX Designer @mattmorphett @jack_ak_hsu

×