RenderConf: Designing for Complexity

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

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