Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Apa kabar?

Slide 3

Slide 3 text

Apa kabar? Sehat?

Slide 4

Slide 4 text

Apa kabar? Sehat? Yuk kenalan

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Purbalingga, Jawa Tengah

Slide 7

Slide 7 text

Serang, Banten

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

What exactly is User Experience?

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

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?

Slide 14

Slide 14 text

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?

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

UX design is about solving problems through empathy

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Great products are useful, usable, and beautiful

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Usable Beautiful Useful And then focus on making it beautiful

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

User Experience Processes

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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.

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

Empathise

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Define (the Problem)

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Ideate

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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.

Slide 52

Slide 52 text

Prototype

Slide 53

Slide 53 text

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.

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Test

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

UX in Real World

Slide 60

Slide 60 text

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.

Slide 61

Slide 61 text

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.

Slide 62

Slide 62 text

The field of user experience design is young and rapidly evolving

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

How to get started?

Slide 65

Slide 65 text

Set your niat before anything else

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Learn the fundamental

Slide 68

Slide 68 text

Train your design sense

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

Master the design tools

Slide 72

Slide 72 text

Design Exploration

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Just do it. Be brave and start!

Slide 75

Slide 75 text

Matur Nuwun

Slide 76

Slide 76 text

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