$30 off During Our Annual Pro Sale. View Details »

RenderConf: Designing for Complexity

RenderConf: Designing for Complexity

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

Jade Applegate

April 22, 2016
Tweet

More Decks by Jade Applegate

Other Decks in Technology

Transcript

  1. Designing For Complexity

    View Slide

  2. @jadeapplegate

    View Slide

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

    View Slide

  4. 122x

    View Slide

  5. 10.5x

    View Slide

  6. 55x

    View Slide

  7. Improving our UI

    View Slide

  8. Representing technical
    complexity

    View Slide

  9. Agenda
    Lessons
    Learned
    Improvements
    Process
    Rationale

    View Slide

  10. Rationale

    View Slide

  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

    View Slide

  12. Engineering Complexities
    • Hard to quickly make changes
    • No test coverage
    • Lack of code consistency
    • Needed modern architecture
    • Ownership issues
    • Many dependencies
    Rationale

    View Slide

  13. Approach
    Full rewrite
    Design “refresh”
    Rationale

    View Slide

  14. View Slide

  15. Process

    View Slide

  16. 1 6
    3 4 5
    Develop
    Prototype Refine
    Merge &
    Release
    UX
    Interviews
    2
    Design
    Sessions
    Process

    View Slide

  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?”

    View Slide

  18. Process UX Interviews
    ADVANCED USER
    "Set up and activate a typical service
    and tailor the cache performance to
    your specific needs."

    View Slide

  19. Process Design Feedback Sessions
    Designers + Product + Engineering
    Incorporate feedback into designs

    View Slide

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

    View Slide

  21. Process Development
    Engineer
    Fully implemented feature

    View Slide

  22. Process Refinement
    Engineer + Product + Design
    Final tweaks to look and feel

    View Slide

  23. Process Merge & Release
    Engineer + Product
    Code reviewed, merged, deployed
    Release notes to customers

    View Slide

  24. Improvements

    View Slide

  25. Major & Minor
    Improvements

    View Slide

  26. Colors
    Minor
    Improvement

    View Slide

  27. Buttons
    Minor
    Improvement

    View Slide

  28. Icons
    Minor
    Improvement

    View Slide

  29. Help Text
    Minor
    Improvement

    View Slide

  30. Link to documentation
    Minor
    Improvement

    View Slide

  31. Sensible Defaults
    Major
    Improvement

    View Slide

  32. Visual Hierarchy
    Major
    Improvement

    View Slide

  33. Best Practices
    Major
    Improvement

    View Slide

  34. Sense of Completion
    Major
    Improvement

    View Slide

  35. Lessons Learned

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  41. Wrap Up

    View Slide

  42. Questions? Tweet at me!
    @jadeapplegate

    View Slide