Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RenderConf: Designing for Complexity

RenderConf: Designing for Complexity

Presented on April 22, 2016 in Oxford, UK
http://2016.render-conf.com/talks

B0f260db9763b41604045d22d404b9b0?s=128

Jade Applegate

April 22, 2016
Tweet

Transcript

  1. Designing For Complexity

  2. @jadeapplegate

  3. ABOUT US Customers are the source of real growth with

    practical expertise.
  4. 122x

  5. 10.5x

  6. 55x

  7. Improving our UI

  8. Representing technical complexity

  9. Agenda Lessons Learned Improvements Process Rationale

  10. Rationale

  11. Design Complexities • Lack of rich interactions • No consistency

    in experience • Missing sense of completion • Outdated, stale site • User not kept in mind • Lack of UX principles Rationale
  12. Engineering Complexities • Hard to quickly make changes • No

    test coverage • Lack of code consistency • Needed modern architecture • Ownership issues • Many dependencies Rationale
  13. Approach Full rewrite Design “refresh” Rationale

  14. None
  15. Process

  16. 1 6 3 4 5 Develop Prototype Refine Merge &

    Release UX Interviews 2 Design Sessions Process
  17. Process UX Interviews INEXPERIENCED USER “You just upgraded your servers

    to use better security and you want to make sure your communication between backend servers and cache servers is over TLS. How would you set it up?”
  18. Process UX Interviews ADVANCED USER "Set up and activate a

    typical service and tailor the cache performance to your specific needs."
  19. Process Design Feedback Sessions Designers + Product + Engineering Incorporate

    feedback into designs
  20. Process Rapid Prototyping Engineer + Designer Collaborate Proof of Concept

  21. Process Development Engineer Fully implemented feature

  22. Process Refinement Engineer + Product + Design Final tweaks to

    look and feel
  23. Process Merge & Release Engineer + Product Code reviewed, merged,

    deployed Release notes to customers
  24. Improvements

  25. Major & Minor Improvements

  26. Colors Minor Improvement

  27. Buttons Minor Improvement

  28. Icons Minor Improvement

  29. Help Text Minor Improvement

  30. Link to documentation Minor Improvement

  31. Sensible Defaults Major Improvement

  32. Visual Hierarchy Major Improvement

  33. Best Practices Major Improvement

  34. Sense of Completion Major Improvement

  35. Lessons Learned

  36. Users don’t understand your site as much as you do!

    Lessons Learned
  37. Understand the problems you are trying to solve. Lessons Learned

  38. Be realistic about the scope of your project. Lessons Learned

  39. Keep your users in mind, always. Lessons Learned

  40. Give users autonomy, but provide help where needed. Lessons Learned

  41. Wrap Up

  42. Questions? Tweet at me! @jadeapplegate