Introduction to User Experience Design

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

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
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?
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
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
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
71. Master the design tools
72. Design Exploration
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
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