UX Week 2016 - Speaker Deck

Slide 1

Slide 1 text

THE PREMIER UX DESIGN CONFERENCE 09 - 12 AUGUST, 2016 SAN FRANCISCO, CA Melina M S & Fransiska H

Slide 2

Slide 2 text

What ? An event where group of UX expert share their inspirations and skills.

Slide 3

Slide 3 text

Afterhours Keynote Workshop

Slide 4

Slide 4 text

Image Courtesy: MidwayVille

Slide 5

Slide 5 text

Image Courtesy: MidwayVille Image Courtesy: Personal Documentation

Slide 6

Slide 6 text

Image Courtesy: MidwayVille Image Courtesy: Personal Documentation

Slide 7

Slide 7 text

Image Courtesy: MidwayVille Image Courtesy: Personal Documentation

Slide 8

Slide 8 text

Calm Technology How non-intrusive design will shape our future Amber Case http://caseorganic.com http://calmtech.com

Slide 9

Slide 9 text

50 billion devices will be online by 2020. -Cisco

Slide 10

Slide 10 text

An era of interruptive Technology, we need a Calm Technology

Slide 11

Slide 11 text

The world is not a desktop You can’t have the same attention on a piece of technology (on software, hardware) that somebody have when he/she sitting in front of the desktop. Very much attention on screen, fully focus. Desktop is no longer enough. Future tech will be Mobile, VR, IoT, etc.

Slide 12

Slide 12 text

“A good tool is an invisible tool. By invisible, we mean that the tool does not intrude on your consciousness; you focus on the task, not the tool.” Mark Weiser -- 1993

Slide 13

Slide 13 text

Principles of Calm Technology

Slide 14

Slide 14 text

I. Technology shouldn’t require all of our attention, just some of it, and only when it necessary Calm Technology

Slide 15

Slide 15 text

II. Technology should empower the periphery ● A calm technology will move easily from the periphery of our attention, to the center, and back. ● The periphery is informing without overburdening. Calm Technology

Slide 16

Slide 16 text

III. Technology should inform and create calm ● A person's primary task should not be computing, but being human. Human is not good at what.. Then technology should solve the problem. ● Give people what they need to solve their problem, and nothing more. Calm Technology

Slide 17

Slide 17 text

IV. Technology should amplify the best of technology and the best of humanity ● Design for people first ● Machines shouldn’t act like humans ● Humans shouldn’t act like machines ● Amplify the best part of each Calm Technology

Slide 18

Slide 18 text

V. Technology can communicate, but it doesn’t need to speak ● Does your product need to rely on voice, or can it use a different communication method? ● Consider how your technology communicates status. Calm Technology

Slide 19

Slide 19 text

VI. Technology should respect social norms ● Technology takes time to introduce to humanity. ● What social norms exist that your technology might violate or cause stress on? ● Slowly introduce features so that people have time to get accustomed to the product. Calm Technology

Slide 20

Slide 20 text

Google Glass

Slide 21

Slide 21 text

VII. The right amount of technology is the minimum amount to solve the problem ● What is the minimum amount of technology needed to solve the problem? ● Slim the feature set down so that the product does what it needs to do and no more. Calm Technology

Slide 22

Slide 22 text

VIII. Technology should make use of the near and the far Calm Technology

Slide 23

Slide 23 text

Good design allows people to accomplish their goals in the least amount of moves

Slide 24

Slide 24 text

Calm technology allows people to accomplish the same goals with the least amount of mental cost

Slide 25

Slide 25 text

A person’s primary task should not be computing, but being human - Mark Weiser We should computing to get to our goal, but it is not ended up with computing itself as the goal, to not become an interruptive technology. We have to perceive as a human, in order to be accepted and ended up with good result of technology.

Slide 26

Slide 26 text

People first, then technology

Slide 27

Slide 27 text

Design and the SELF Irene Au Design Partner at Khosla Ventures; former head of design at Google, Yahoo, Udacity.

Slide 28

Slide 28 text

● A well designed product should be ● Useful: Useful to the user ● Usable: easy to use ● Desirable: the product make the user desire to have the products ● The product should help to improve user’s productivity

Slide 29

Slide 29 text

Design = Form

Slide 30

Slide 30 text

Image Courtesy: Irene Au Golden Ratio

Slide 31

Slide 31 text

Image Courtesy: Irene Au Rule of Thirds

Slide 32

Slide 32 text

Image Courtesy: Irene Au Principle of Proximity

Slide 33

Slide 33 text

Image Courtesy: Irene Au Alignment

Slide 34

Slide 34 text

Image Courtesy: Irene Au Golden Ratio

Slide 35

Slide 35 text

● Is using the same element in the whole of your design. ● Repetition will bring a clear sense of unity, consistency, and cohesiveness. Repetition

Slide 36

Slide 36 text

● From the basic principle, we can imagine that form of an object is whether the car looks sporty, elegance, or classic.

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

● In this sense, good design is equal as a good working refrigerator ● It is not only look beautiful on the outer design but also it has work well in order to be useable

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

● In the late 90, good design means creating a good events to the customer. The memorable events becomes products called the experience. ● American Girl dolls. ○ Customization product as user wants. ● Design goes beyond the product and brand ● Enhance the entire customer experience

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

● Design thinking process: ○ Building empathy for users ○ Defining the problem ○ Generating many ideas ○ Prototyping possible solutions ○ Test: ■ Gathering feedback ■ Iterating

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

● Designer will be represented with the product that he make. ● The characteristic and personality will be reflected by the product he produces.

Slide 47

Slide 47 text

● Every product is a designer’s reflection ● Example: ○ Apple products is reflection of Steve Jobs. ○ Steve known for his simplicity and perfectionist ○ He simplified 350 to 10 products in order to focus on quality which is simple and perfectionist

Slide 48

Slide 48 text

Designer value, intention and principles will be reflected to the person who wears it.

Slide 49

Slide 49 text

Example: The person who Wore Braun watch Will be different to the person who wore G-Shock watch

Slide 50

Slide 50 text

● Poor design object show the bad side of human nature such as greed and insensitivity. ● Quoted from Irene Au: What we become, so we make. What we make and consume, is what we become ● In order to make well designed products, we need to overcome that which holds us back from making things great, like fear, greed, attachment, ego.

Slide 51

Slide 51 text

THE VISUAL DISPLAY OF INFORMATION Stephen P Anderson Designer, Speaker & CXO at Bloomboard.Inc

Slide 52

Slide 52 text

Image Courtesy: Stephen P Anderson

Slide 53

Slide 53 text

External Visual Representations are critical tools for making sense of complex information.

Slide 54

Slide 54 text

Image Courtesy: Stephen P Anderson

Slide 55

Slide 55 text

Image Courtesy: Stephen P Anderson

Slide 56

Slide 56 text

Image Courtesy: Stephen P Anderson

Slide 57

Slide 57 text

The Visual Display of Information: OBJECTS!

Slide 58

Slide 58 text

Visual Encodings There are many kind of visual encodings, and represent different meanings.

Slide 59

Slide 59 text

Image Courtesy: Stephen P Anderson

Slide 60

Slide 60 text

Visual Attribute An attribute to visual encodings, works to specify a function. They’re work in different ways.

Slide 61

Slide 61 text

Image Courtesy: Stephen P Anderson

Slide 62

Slide 62 text

Qualitative

Slide 63

Slide 63 text

Image Courtesy: Stephen P Anderson

Slide 64

Slide 64 text

Image Courtesy: Stephen P Anderson

Slide 65

Slide 65 text

Image Courtesy: Stephen P Anderson

Slide 66

Slide 66 text

Image Courtesy: Stephen P Anderson

Slide 67

Slide 67 text

Image Courtesy: Stephen P Anderson

Slide 68

Slide 68 text

Image Courtesy: Stephen P Anderson

Slide 69

Slide 69 text

Image Courtesy: Stephen P Anderson

Slide 70

Slide 70 text

1. External Representation extend our limited thinking space 2. Our sense of vision is the most sophisticated, able to very quickly pick out patterns and very subtle differences 3. Not all visual encodings function in the same way GOOD TO KNOW

Slide 71

Slide 71 text

The Visual Display of Information: SUBSTRATES!

Slide 72

Slide 72 text

Image Courtesy: Stephen P Anderson

Slide 73

Slide 73 text

Image Courtesy: Stephen P Anderson

Slide 74

Slide 74 text

Image Courtesy: Stephen P Anderson

Slide 75

Slide 75 text

Image Courtesy: Stephen P Anderson

Slide 76

Slide 76 text

Image Courtesy: Stephen P Anderson

Slide 77

Slide 77 text

Image Courtesy: Stephen P Anderson

Slide 78

Slide 78 text

Image Courtesy: Stephen P Anderson

Slide 79

Slide 79 text

Image Courtesy: Stephen P Anderson

Slide 80

Slide 80 text

Image Courtesy: Stephen P Anderson

Slide 81

Slide 81 text

Image Courtesy: Stephen P Anderson

Slide 82

Slide 82 text

Image Courtesy: Stephen P Anderson

Slide 83

Slide 83 text

1. We naturally arrange and rearrange the spaces we inhabit to serve a variety of ends 2. This spatial arrangement surfaces relationship between things 3. Literal mappings (such as geographical maps), tend to come more naturally than conceptual maps (Venn diagrams) 4. There is an underlying “grammar” behind spatial arrangements GOOD TO KNOW

Slide 84

Slide 84 text

What the hell is UX Strategy? How to Devise Innovative Digital Products that People Want Jaime Levy UX Strategist, Author, College Professor

Slide 85

Slide 85 text

UX Strategy...

Slide 86

Slide 86 text

User experience (UX) strategy lies at the intersection of UX design and business strategy. What is UX Strategy?

Slide 87

Slide 87 text

It’s a plan-of-action on how to ascertain that the user experience of a product is aligned with the business’s objectives. What is the business is trying to do? Get more customers? Or trying to make more money, or scale up, build more products, etc. UX designer has to know about the goals of the product. What is UX Strategy?

Slide 88

Slide 88 text

It’s the method by which you validate that your solution solves a problem for real customers in a dynamic marketplace. Product market fit. Keep changing, dynamic, keep evolving. What is UX Strategy?

Slide 89

Slide 89 text

It’s a practice that when done empirically is a better guarantee of a successful digital product than just crossing your finger and writing a bunch of code. What is UX Strategy?

Slide 90

Slide 90 text

Four tenets of UX Strategy Image Courtesy: Jaime Levy

Slide 91

Slide 91 text

BUSINESS STRATEGY Business Strategy is the plans, choices, and decisions used to guide a company to greater profitability and success.

Slide 92

Slide 92 text

In this book, Michael E Porter tell two common ways to achieve Competitive Advantages

Slide 93

Slide 93 text

Cost Leadership Differentiation

Slide 94

Slide 94 text

What is a Value Proposition? A promise of value to be delivered and a belief from the customer that value will be experienced.

Slide 95

Slide 95 text

Digital value proposition offer new MENTAL MODEL Mental models are the steps we think we need to take to accomplish a task. Innovation can happen when we reimagine an offline experience with a digital interface. HITCHHIKING UBER APPS UBER-ING

Slide 96

Slide 96 text

You must conduct COMPETITIVE RESEARCH

Slide 97

Slide 97 text

VALUE INNOVATION Value innovation can be accomplished by focusing on the primary utility of a product and making the experience of it an indispensable aspect of how we live our life.

Slide 98

Slide 98 text

VALUE INNOVATION = Offering a LEAP in value for customers It will be a lot better value, worth taking a risk, shifting our mental model

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

It offers a new mash up of features from both competitors and relevant existing alternatives. It transcends a value proposition from existing larger platforms. VALUE INNOVATION for Digital Products + transactional system = + crowdsourcing =

Slide 102

Slide 102 text

VALUE INNOVATION Value innovation can be accomplished by focusing on the primary utility of a product and making the experience of it an indispensable aspect of how we live our life.

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

Traditional user research AKA “Etnography”

Slide 105

Slide 105 text

This two Books had a BIG Influence on Validated User Research USER RESEARCH CUSTOMER DISCOVERY

Slide 106

Slide 106 text

KILLER UX DESIGN Killer UX Design is accomplished when the product interface allows its users/customers to easily accomplish their goals with little resistance. In a word, Killer UX design enables an experience that is FRICTIONLESS!

Slide 107

Slide 107 text

KILLER UX DESIGN for Better Conversion

Slide 108

Slide 108 text

Use GROWTH HACKING techniques to get users down the product funnel

Slide 109

Slide 109 text

Why UX Strategy is Crucial (The takeaways)

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

No content

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

No content

Slide 114

Slide 114 text

No content

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

● When the company scale up, usually they abandon their core values and what customer truly needs. Destroying company resources (Human, financial, physical, and knowledge) and forgetting about the user needs. ● Treating their customer like their extractable resources. ● Example: Twitter shut down open stream API in the end giving less flexibility to the users

Slide 117

Slide 117 text

No content

Slide 118

Slide 118 text

● Don’t treat software like a factory. ● They spent less money designing, coding it, hope it will increase their profit, and it doesn’t work. ● It takes time and money to create a delightful product that makes a lot of money.

Slide 119

Slide 119 text

No content

Slide 120

Slide 120 text

Create a collaborative team for a better work environment.

Slide 121

Slide 121 text

No content

Slide 122

Slide 122 text

No content

Slide 123

Slide 123 text

● Alan Cooper said that He could easily sell 200 lambs per year but it will destroy his core foundation of the ranch such as forcing the plant to grow faster. ● Instead, he sells 50 lambs per year only to keep the foundation strong and to maintain quality ● In a software company, you can also be a good ancestor by maintaining your core value as a foundation and maintaining the quality of your product.

Slide 124

Slide 124 text

No content

Slide 125

Slide 125 text

● Responsible Craftsmanship such as UX, being lean, being agile, continuous deployment, and balanced team are actually based on serving people rather than serving the bottom line. ● So we as a UX designer has a big impact and responsibility to create a great software.

Slide 126

Slide 126 text

No content

Slide 127

Slide 127 text

How To Design a Government Website For Kids Emiliegh Barnes Content Lead, 18F

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

No content

Slide 130

Slide 130 text

No content

Slide 131

Slide 131 text

everykidinapark.gov

Slide 132

Slide 132 text

everykidinapark.gov

Slide 133

Slide 133 text

No content

Slide 134

Slide 134 text

No content

Slide 135

Slide 135 text

No content

Slide 136

Slide 136 text

No content

Slide 137

Slide 137 text

No content

Slide 138

Slide 138 text

WHAT WE LEARNED AND THE TAKE AWAYS ● Build the right product for the right users. Therefore, understand your users first. ● Write a content that is friendly, understandable, brief, concise, clear and interesting enough for the right target audience. ● Simplicity. Less is more. ● Be creative. Think outside the box. Don’t use only one single UX method/strategy to gather datas. ● Design not only creating pretty visuals but also a delightful user experience. ● Design is the tangible expression of the people who design the products and the people who wear the products.

Slide 139

Slide 139 text

WHAT WE LEARNED AND THE TAKE AWAYS ● To build technology, don’t make people to be left behind. Keep in mind: People first, then technology ● Good technology serve the human needs at its best ● Data is more meaningful if it added with context and visualize properly in visual encodings ● Understand your users is the key ● People loves product because it express themselves, solve their problem, and make themselves valuable

Slide 140

Slide 140 text

THANK YOU!