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.

0c6fd6a08d0f898159cda7cafcacf07f?s=128

Afnizar Nur Ghifari

August 12, 2020
Tweet

Transcript

  1. Afnizar Nur Ghifari KGTS 2020 Wednesday, 12th August 2020 @afnizarnur

    Introduction to User Experience Design
  2. Apa kabar?

  3. Apa kabar? Sehat?

  4. Apa kabar? Sehat? Yuk kenalan

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

  6. Purbalingga, Jawa Tengah

  7. Serang, Banten

  8. None
  9. None
  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
  11. What exactly is User Experience?

  12. None
  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?
  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?
  15. Design is a process, a method, a toolkit, a verb

    (to design) which is used by people to create various User Experiences.
  16. Design is a method, and UX is a desired outcome — outcome

    based on user research, heuristics, requirements, etc.
  17. UX design is about solving problems through empathy

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

    customer in mind
  19. None
  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
  21. None
  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
  23. Great products are useful, usable, and beautiful

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

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

  26. Usable Beautiful Useful Focus on beautiful first and you end

    up with something unusable
  27. User Experience Processes

  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
  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
  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
  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
  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
  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
  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
  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
  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.
  37. UX Processes Empathise Define (the Problem) Ideate Prototype Test 1

    2 3 4 5
  38. Empathise

  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
  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
  41. Synthesize Data User data becomes persona Build a business case

    for your product or feature Map out competition 1 2 3 Empathise
  42. https://cdn.psdrepo.com/images/2x/user-persona-template-psd-download-x4.jpg

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

  44. Define (the Problem)

  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
  46. https://media.nngroup.com/media/editor/2017/12/14/screen-shot-2017-12-14-at-55525-pm.png

  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
  48. 1 2 3 https://www.plays-in-business.com/wp-content/uploads/2018/10/how-might-we.jpg

  49. Ideate

  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
  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.
  52. Prototype

  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.
  54. https://d2slcw3kip6qmk.cloudfront.net/marketing/pages/chart/facebook-wireframe.svg

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

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

  57. Test

  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
  59. UX in Real World

  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.
  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.
  62. The field of user experience design is young and rapidly

    evolving
  63. Learn actively through books and classes as well as passively

    being critical using digital products
  64. How to get started?

  65. Set your niat before anything else

  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.
  67. Learn the fundamental

  68. Train your design sense

  69. None
  70. None
  71. Master the design tools

  72. Design Exploration

  73. 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
  74. Just do it. Be brave and start!

  75. Matur Nuwun

  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