Introduction to User Experience Design

Slide deck presented for Kemakom Goes to School online talk event on 12 Agustus 2020.

Transcript

1. Afnizar Nur Ghifari
   KGTS 2020 Wednesday, 12th August 2020
   @afnizarnur
   Introduction to
   
   User Experience
   
   Design
   

   View Slide

2. Apa kabar?
   

   View Slide

3. Apa kabar?
   Sehat?
   

   View Slide

4. Apa kabar?
   Sehat?
   Yuk kenalan
   

   View Slide

5. Hi there, I’m Afnizar
   Currently, UX Designer at Bukalapak
   

   View Slide

6. Purbalingga, Jawa Tengah
   

   View Slide

7. Serang, Banten
   

   View Slide

8. View Slide

9. View Slide

10. Outline
    Introduction
    
    What exactly is User Experience?
    
    User Experience Processes
    
    UX in Real World
    1
    
    2
    
    3
    
    4
    5
    
    6
    How to get started?
    
    Recap
    

    View Slide

11. What exactly is
    
    User Experience?
    

    View Slide

12. View Slide

13. They provide
    different user
    experiences.
    The dirt path is a shorter path and
    great in ideal conditions. The
    concrete path is longer, but is a
    better choice when it’s raining and
    you don’t want to jump mud
    puddles.
    What exactly is User Experience?
    

    View Slide

14. The picture is
    misleading
    This fails to explain what UX is, and
    for no reason whatsoever, puts
    Design and UX in conflict, and even
    more so, it smirks and with a smug
    look puts UX in superior position to
    Design.
    What exactly is User Experience?
    

    View Slide

15. Design is a process, a method, a
    toolkit, a verb (to design) which is used
    by people to create various
    
    User Experiences.
    

    View Slide

16. Design is a method, and UX is a
    desired outcome — outcome based on
    user research, heuristics, requirements,
    etc.
    

    View Slide

17. UX design is about
    solving problems
    through empathy
    

    View Slide

18. UX design is a
    commitment to building
    products with the
    customer in mind
    

    View Slide

19. View Slide

20. User Interface design User Research Interaction Design
    Graphic Design Visual Design Usability User Testing
    Product Design Copywriting Prototyping Information Architectu
    Animation Presentation Communication Collaboration
    UX Nowadays
    

    View Slide

21. View Slide

22. User Interface design User Research Interaction Design
    Graphic Design Visual Design Usability User Testing
    Product Design Copywriting Prototyping Information Architectu
    Animation Presentation Communication Collaboration
    What UX Actually is
    

    View Slide

23. Great products are
    useful, usable, and
    beautiful
    

    View Slide

24. Usable
    Beautiful
    Useful
    Designers first start with useful, then focus on usable
    

    View Slide

25. Usable
    Beautiful
    Useful
    And then focus on making it beautiful
    

    View Slide

26. Usable
    Beautiful
    Useful
    Focus on beautiful first and you end up with something unusable
    

    View Slide

27. User Experience
    
    Processes
    

    View Slide

28. 1.
    
    2.
    
    3.
    
    4.
    
    5.
    
    6.
    
    7.
    
    8
    Start with a problem you’re trying to solve
    
    Who are you trying to solve it for?
    
    Ideate and explore an idea for a product/
    
    Write a user story showing how you solve their problem.
    
    Design a screen flow.
    
    Create a prototype.
    
    Test the prototype.
    
    Go back to step 5 and repeat.
    Short Version UX Processes
    

    View Slide

29. 1.
    
    2.
    
    3.
    
    4.
    
    5.
    
    6.
    
    7.
    
    8
    Start with a problem you’re trying to solve
    
    Who are you trying to solve it for?
    
    Ideate and explore an idea for a product/
    
    Write a user story showing how you solve their problem.
    
    Design a screen flow.
    
    Create a prototype.
    
    Test the prototype.
    
    Go back to step 5 and repeat.
    Ruangguru
    

    View Slide

30. 1.
    
    2.
    
    3.
    
    4.
    
    5.
    
    6.
    
    7.
    
    8
    Start with a problem you’re trying to solve
    
    Who are you trying to solve it for?
    
    Ideate and explore an idea for a product/
    
    Write a user story showing how you solve their problem.
    
    Design a screen flow.
    
    Create a prototype.
    
    Test the prototype.
    
    Go back to step 5 and repeat.
    Ruangguru
    Akibat pandemi,
    kegiatan les
    privat perlu
    dilakukan secara
    daring
    

    View Slide

31. 1.
    
    2.
    
    3.
    
    4.
    
    5.
    
    6.
    
    7.
    
    8
    Start with a problem you’re trying to solve
    
    Who are you trying to solve it for?
    
    Ideate and explore an idea for a product/
    
    Write a user story showing how you solve their problem.
    
    Design a screen flow.
    
    Create a prototype.
    
    Test the prototype.
    
    Go back to step 5 and repeat.
    Ruangguru
    Guru Les dan
    Siswa
    

    View Slide

32. 1.
    
    2.
    
    3.
    
    4.
    
    5.
    
    6.
    
    7.
    
    8
    Start with a problem you’re trying to solve
    
    Who are you trying to solve it for?
    
    Ideate and explore an idea for a product/
    
    Write a user story showing how you solve their problem.
    
    Design a screen flow.
    
    Create a prototype.
    
    Test the prototype.
    
    Go back to step 5 and repeat.
    Ruangguru
    Learning
    Management
    System
    Dimana guru bisa
    memberikan materi
    dan siswa dapat
    mengaksesnya
    secara online
    

    View Slide

33. 1.
    
    2.
    
    3.
    
    4.
    
    5.
    
    6.
    
    7.
    
    8
    Start with a problem you’re trying to solve
    
    Who are you trying to solve it for?
    
    Ideate and explore an idea for a product/
    
    Write a user story showing how you solve their problem.
    
    Design a screen flow.
    
    Create a prototype.
    
    Test the prototype.
    
    Go back to step 5 and repeat.
    Ruangguru
    As student, I want
    to learn difficult
    subject from home,
    so that I can have a
    good score
    

    View Slide

34. 1.
    
    2.
    
    3.
    
    4.
    
    5.
    
    6.
    
    7.
    
    8
    Start with a problem you’re trying to solve
    
    Who are you trying to solve it for?
    
    Ideate and explore an idea for a product/
    
    Write a user story showing how you solve their problem.
    
    Design a screen flow.
    
    Create a prototype.
    
    Test the prototype.
    
    Go back to step 5 and repeat.
    Ruangguru
    Search private
    teacher
    

    View Slide

35. 1.
    
    2.
    
    3.
    
    4.
    
    5.
    
    6.
    
    7.
    
    8
    Start with a problem you’re trying to solve
    
    Who are you trying to solve it for?
    
    Ideate and explore an idea for a product/
    
    Write a user story showing how you solve their problem.
    
    Design a screen flow.
    
    Create a prototype.
    
    Test the prototype.
    
    Go back to step 5 and repeat.
    Ruangguru
    

    View Slide

36. Something to keep in
    mind for UX Processes
    We place the user at the
    center of our thinking.
    UX Design requires process,
    not just tools.
    Process is not one size fits all.
    

    View Slide

37. UX Processes
    Empathise
    
    Define (the Problem)
    
    Ideate
    
    Prototype
    
    Test
    1
    
    2
    
    3
    
    4
    
    5
    

    View Slide

38. Empathise
    

    View Slide

39. Questions
    Who are our users and what do they need
    
    What purpose does the product serve for those users?
    
    What are the business goals in creating this product?
    
    What currently exists to serve the same purpose?
    1
    
    2
    
    3
    
    4
    Empathise
    

    View Slide

40. Gathering Data
    Conduct user interviews
    
    Conduct user and stakeholder surveys
    
    Review analytic data from existing products
    
    Receive business goals from stakeholders
    
    Establish any known technical limitations
    1
    
    2
    
    3
    
    4
    
    5
    Empathise
    

    View Slide

41. Synthesize Data
    User data becomes persona
    
    Build a business case for your product or feature
    
    Map out competition
    1
    
    2
    
    3
    Empathise
    

    View Slide

42. https://cdn.psdrepo.com/images/2x/user-persona-template-psd-download-x4.jpg
    

    View Slide

43. https://upboard.io/wp-content/uploads/2019/08/Competitive-Analysis-Template-Free-PowerPoint-Tool.png
    

    View Slide

44. Define (the
    
    Problem)
    

    View Slide

45. Define
    Empathy mapping, reflect the four key traits that the users
    demonstrated/possessed during the observation stage.
    
    Problem Statement
    
    “How Might We” Questions
    1
    2
    3
    

    View Slide

46. https://media.nngroup.com/media/editor/2017/12/14/screen-shot-2017-12-14-at-55525-pm.png
    

    View Slide

47. Example of Problem Statement
    “The boarding protocols use by Garuda Airlines
    should aim to get each flight’s passengers
    aboard the plane quickly and efficiently so that
    the plane can take off as soon as possible...”
    1
    
    2
    
    3
    

    View Slide

48. 1
    
    2
    
    3
    https://www.plays-in-business.com/wp-content/uploads/2018/10/how-might-we.jpg
    

    View Slide

49. Ideate
    

    View Slide

50. Ideate
    Brainstroming together with others, creating close collaboration
    
    Rapidly explore and share ideas with stakeholdes, client, and users
    
    Exercises may be done over time as data is collected, exploring ideas
    will open more questions and possibilities.
    1
    
    2
    
    3
    

    View Slide

51. Information Architecture
    Taxonomy of features
    
    Hierarchy of content
    1
    
    2
    Ideate
    The content of an experience, organized in a logical manner as
    a basis for how the user will interact with it.
    

    View Slide

52. Prototype
    

    View Slide

53. Low-fidelity Design
    Wireframes are functional drawings
    
    There is no one correct style of wireframing
    
    Low-fidelity design should start very rough and can be refined
    through iteration.
    1
    
    2
    
    3
    Prototype
    Start from a wireframes. Wireframes are diagram that establish
    layout, hierarchy of content, and the state of an elements.
    

    View Slide

54. https://d2slcw3kip6qmk.cloudfront.net/marketing/pages/chart/facebook-wireframe.svg
    

    View Slide

55. https://www.noupe.com/wp-content/uploads/2020/03/ux-store-ukeUH3KbMWU-unsplash-666x418.jpg
    

    View Slide

56. https://miro.medium.com/max/6900/0*vlOmr7aIMuWQr7An
    

    View Slide

57. Test
    

    View Slide

58. Get Real Feedback
    Start with simple, low-fidelity prototype
    
    Refine your visual design as you iterate on your ideas
    1
    
    2
    Test
    The best method to refine an experience is to involve real
    users and gather feedback
    

    View Slide

59. UX in Real World
    

    View Slide

60. Who does UX?
    User Researcher
    Identifies user behaviours, goals and needs through interviews, studies,
    and surveys.
    UX Designer/ Interaction Designer
    Define interactions, user flows, wireframes, low-fidelity design,
    high-fidelity design.
    

    View Slide

61. Who does UX?
    UI Engineer
    Build the system by interpreting the functional specification, sitemaps,
    wireframes.
    Content Strategist
    Refers to the planning, development, and management of
    content—written or in other media.
    

    View Slide

62. The field of user
    experience design is
    young and rapidly
    evolving
    

    View Slide

63. Learn actively through
    books and classes as
    well as passively being
    critical using digital
    products
    

    View Slide

64. How to
    
    get started?
    

    View Slide

65. Set your niat before
    anything else
    

    View Slide

66. It’s easy and actionable
    You can do it know. It takes just a second. Don’t
    worry you can change your niat later.
    

    View Slide

67. Learn the
    
    fundamental
    

    View Slide

68. Train your
    
    design sense
    

    View Slide

69. View Slide

70. View Slide

71. Master the
    
    design tools
    

    View Slide

72. Design
    
    Exploration
    

    View Slide

73. Recap
    Introduction
    
    What exactly is User Experience?
    
    User Experience Processes
    
    UX in Real World
    1
    
    2
    
    3
    
    4
    5
    
    6
    How to get started?
    
    Recap
    

    View Slide

74. Just do it. Be
    brave and start!
    

    View Slide

75. Matur
    
    Nuwun
    

    View Slide

76. References
    https://www.slideshare.net/MollyWilson1/between-paper-code
    https://www.slideshare.net/billtribble/introduction-to-ux-60122668
    https://www.usertesting.com/blog/what-is-ux-design-15-user-experience-experts-weigh-in
    https://speakerdeck.com/rosspw/what-is-ux-design
    

    View Slide