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

Introduction to User Experience Design

Introduction to User Experience Design

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

Afnizar Nur Ghifari

August 12, 2020
Tweet

More Decks by Afnizar Nur Ghifari

Other Decks in Design

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