The Full Stack of User Experience

DjangoCon 2016
Philadelphia, PA

User experience(UX) has been at the forefront of the design world for the last few years, but what is it and what can you do to make your applications and websites more user friendly? At this session, you can expect to gain an understanding of UX core disciplines and learn how to incorporate UX thought and strategy into your creative process.

Transcript

1. @acr523 #fullstackUX #djangocon
   The Full Stack of User
   Experience
   Alicia C. Raciti
   User Experience Designer, Philadelphia, PA
   @acr523
   

   View Slide

2. @acr523 #fullstackUX #djangocon
   What is UX?
   

   View Slide

3. @acr523 #fullstackUX #djangocon
   usability.gov
   User experience (UX) focuses on having a deep
   understanding of users, what they need, what
   they value, their business goals and objectives,
   their abilities, and also their limitations.
   

   View Slide

4. @acr523 #fullstackUX #djangocon
   Nielsen Norman Group
   User experience encompasses all aspects of the
   end-user’s interaction with a company, its services,
   and its products.
   

   View Slide

5. @acr523 #fullstackUX #djangocon
   So why is UX important?
   If people don’t enjoy their experience with what you
   design, then the product/service wasn’t successful.
   Bad user experience can ruin a brand/company, or
   lose customers.
   Mike Tedechi - GDI Philadelphia UX 101 Course
   

   View Slide

6. @acr523 #fullstackUX #djangocon
   The disciplines of user
   experience
   

   View Slide

7. @acr523 #fullstackUX #djangocon
   Graphic by Dan Saffer
   

   View Slide

8. @acr523 #fullstackUX #djangocon
   The core disciplines
   User Research Content Strategy
   Information
   Architecture
   Interaction Design Visual Design
   Usability &
   Analytics
   https://speakerdeck.com/nickf/ux-career-progression-understanding-ux-career-paths
   

   View Slide

9. @acr523 #fullstackUX #djancocon
   Transport for London
   

   View Slide

10. @acr523 #fullstackUX #djancocon
    Transport for London
    

    View Slide

11. @acr523 #fullstackUX #djancocon
    Transport for London
    

    View Slide

12. @acr523 #fullstackUX #djangocon
    http://www.ltmuseumshop.co.uk/moquette/availability.html
    

    View Slide

13. @acr523 #fullstackUX #djangocon
    What is User Research?
    What is Content Strategy
    What is Information Architecture
    What is Interaction Design
    What is Visual Design
    What is Usability & Analytics
    

    View Slide

14. @acr523 #fullstackUX #djangocon
    User Research
    The science of understanding the people who use the product
    or system
    

    View Slide

15. @acr523 #fullstackUX #djangocon
    Techniques
    Interviews Observations
    

    View Slide

16. @acr523 #fullstackUX #djangocon
    What is User Research?
    What is Content Strategy?
    What is Information Architecture?
    What is Interaction Design?
    What is Visual Design?
    What is Usability & Analytics?
    

    View Slide

17. @acr523 #fullstackUX #djangocon
    Content Strategy
    The art and science of planning for the creation, delivery, and
    governance of useful, usable content.
    

    View Slide

18. @acr523 #fullstackUX #djangocon
    Techniques
    Writing Guidelines Message Hierarchy Metadata
    

    View Slide

19. @acr523 #fullstackUX #djangocon
    Reports on this page are provided in PDF format, unless
    otherwise specified.
    New York City MTA
    Budgets and Financial Statements
    Our latest Budget 2016/17 and Business Plan was
    approved on 17 March 2016. It highlights our plans for the
    transport network over the five years to 2021.
    Transport for London
    Budget and Business Plan
    

    View Slide

20. @acr523 #fullstackUX #djangocon
    What is User Research?
    What is Content Strategy?
    What is Information Architecture?
    What is Interaction Design?
    What is Visual Design?
    What is Usability & Analytics?
    

    View Slide

21. @acr523 #fullstackUX #djangocon
    Information Architecture
    The art and science of identifying and organizing of information
    within a product or system in a purposeful & meaningful way.
    

    View Slide

22. @acr523 #fullstackUX #djangocon
    Techniques
    Structuring Labeling
    

    View Slide

23. @acr523 #fullstackUX #djangocon
    

    View Slide

24. @acr523 #fullstackUX #djangocon
    

    View Slide

25. @acr523 #fullstackUX #djangocon
    

    View Slide

26. @acr523 #fullstackUX #djangocon
    What is User Research?
    What is Content Strategy?
    What is Information Architecture?
    What is Interaction Design?
    What is Visual Design?
    What is Usability & Analytics?
    

    View Slide

27. @acr523 #fullstackUX #djangocon
    Interaction Design
    The art of facilitating interactions between humans through
    products and services.
    

    View Slide

28. @acr523 #fullstackUX #djangocon
    Techniques
    Environment Transitions
    

    View Slide

29. @acr523 #fullstackUX #djangocon
    

    View Slide

30. @acr523 #fullstackUX #djangocon
    

    View Slide

31. @acr523 #fullstackUX #djangocon
    

    View Slide

32. @acr523 #fullstackUX #djangocon
    

    View Slide

33. @acr523 #fullstackUX #djangocon
    What is User Research?
    What is Content Strategy?
    What is Information Architecture?
    What is Interaction Design?
    What is Visual Design?
    What is Usability & Analytics?
    

    View Slide

34. @acr523 #fullstackUX #djangocon
    Visual Design
    The art of aesthetic design of the visual qualities of a product or
    system.
    

    View Slide

35. @acr523 #fullstackUX #djangocon
    Techniques
    Typography Color Space
    

    View Slide

36. @acr523 #fullstackUX #djangocon
    

    View Slide

37. @acr523 #fullstackUX #djangocon
    

    View Slide

38. @acr523 #fullstackUX #djangocon
    What are User Research?
    What are Content Strategy?
    What are Information Architecture?
    What are Interaction Design?
    What are Visual Design?
    What are Usability & Analytics?
    

    View Slide

39. @acr523 #fullstackUX #djangocon
    Usability & Analytics
    The science of measuring the quality of the user experience when
    users interact with the product or system.
    

    View Slide

40. @acr523 #fullstackUX #djangocon
    Techniques
    Task-Based Study A/B Testing
    

    View Slide

41. @acr523 #fullstackUX #djangocon
    Guerilla Usability Testing
    Casual Timely
    

    View Slide

42. @acr523 #fullstackUX #djangocon
    To circle back…
    

    View Slide

43. @acr523 #fullstackUX #djangocon
    The core disciplines
    User Research Content Strategy
    Information
    Architecture
    Interaction Design Visual Design
    Usability &
    Analytics
    

    View Slide

44. @acr523 #fullstackUX #djangocon
    The core disciplines
    User Research Content Strategy
    Information
    Architecture
    Interaction Design Visual Design
    Usability &
    Analytics
    Understanding Communication Organization
    Transitions Clarity Measurement
    

    View Slide

45. @acr523 #fullstackUX #djangocon
    Thank you.
    

    View Slide

46. @acr523 #fullstackUX #djangocon
    Credits
    • Slide 7 -http://www.kickerstudio.com/2008/12/the-disciplines-of-user-experience/
    • Slide 9 - https://247airporttransfer.co.uk/wp-content/uploads/2013/04/luton-airport-transfer-to-bank-
    station.jpg; https://en.wikipedia.org/wiki/Homerton_University_Hospital; http://citytransport.info/Album/
    Coach-Stop-TfL1a.jpg
    • Slide 10 - http://cdn.londonandpartners.com/images/explorer-map/tubemap-2012-12.png ; http://
    67.media.tumblr.com/0b268133616c83c667977cbff562c9fb/tumblr_n3xkjx7nfG1tyx8hoo5_1280.jpg; http://
    media.gizmodo.co.uk/wp-content/uploads/2014/09/TFL-BC-306.jpg
    • Slide 13, 35, 36 - http://static2.uk.businessinsider.com/image/55a3d5ee2acae710008b69df-1200/london-
    underground-tube.jpg
    • Slide 16 - http://mypoppet.com.au/
    • Slide 20 - http://67.media.tumblr.com/0b268133616c83c667977cbff562c9fb/
    tumblr_n3xkjx7nfG1tyx8hoo5_1280.jpg
    • Slide 21 - http://cdn.images.express.co.uk/; http://mypoppet.com.au/; http://www.20thcenturylondon.org.uk/
    • Slide 24 - http://media.gizmodo.co.uk/wp-content/uploads/2014/09/TFL-BC-306.jpg
    • Slide 31 - https://sheilapontis.files.wordpress.com/2013/01/102-tfl_roundels.jpg
    • Slide 32 - http://citytransport.info/Album/Coach-Stop-TfL1a.jpg
    

    View Slide