Hit enter after type your search item
Wzy Word


Breaking into user experience design (DevFest 2019)


[MUSIC PLAYING] BIANCA TOLEDO: Today I will be talking to you guys about the mindset that you need to break into user experience design So first, let's just start with introducing who I am

My name is Bianca And I am a user experience designer I actually do have a background in computer science And I graduated with my bachelors in it not too long ago But since then, I've been, over the past couple of years, just been working with different startups, doing user experience design for them through freelance and contracting

But more interestingly, how I got into user experience design is that when I was in computer science, I really did enjoy it However, I was not used to sitting down and not talking to people for long periods of time And my visual, creative side was being really suppressed And that's what really drove me towards user experience design It was a relatively new field when I had heard about it

But when I did, I just, I never turned back So user experience design is a perfect crossroads between tech, psychology, and art It has a perfect medium of everything, all melded together into one thing called user experience design Like I said, since then, I never turned back and it was a really great choice So going onto why I'm doing this presentation

Like I said, it was a new field when I had first discovered it And it's still a pretty relatively new field now And because it's a new field, that means that there's lower access to resources to be formally educated in proper user experience design processes And user experience designers, since it is a new field, again, they are one of the most in demand jobs And actually, in 2019 this year, they had surpassed software engineers for being the most in demand

That builds this strong imperative that we need to build the user experience design talent here in the Central Valley Because user experience designers, they bridge the gap between a business's product to their user And that is so important for any company to flourish So when I first got started in user experience design, there wasn't many resources And a lot of information that was out there was just a regurgitation of other resources that you'd see

It just barely skims the surface and it doesn't really get in depth of the mindset that you need Which is why I want to share that with you today through these topics So my goal here is to help you understand that mindset so that you can break into the user experience design field And then become a successful designer So let's just start off with defining user experience design, probably for those who may have never heard of user experience design

So user experience design is the means by which a company innovates better ways for users to interact with a product Ideally, it is human-centered and delivers more than just beauty and seamless functionality, but also, empathy It is the art of building trust between a consumer and business via the product I'll come back to this definition, but first, I want to debunk a myth that we might have So I want to debunk the myth that user experience design is the same thing as user interface designers or graphic designers

That is not the case Think about it this way So though user experience designers are closely related to user interface designers, they are vastly different User experience designers, they are like the bones and the muscles of the body They provide the structure and the muscles provide the functionality

Whereas, user interface designers, they design the really aesthetic visuals around what the user experience designers had built So going back to this definition, I want to highlight and point out these three points that I colored– human-centered, empathy, and then the art of building trust So going into that, those three components build the three pillars of user experience design So the first was human-centered design That is defined as a practice that involves the human perspective in the entire problem solving process

This is really important and a component that every user experience designer should have So just imagine this Imagine that you've just come up with some brilliant, incredible design idea that has excellent intentions However, your intentions don't really match up to your consumers reality In other words, it doesn't fit into the context of your user's life

So to simplify that, let's just bring in a real life example So have you ever tried to give your friend advice and you thought that it was helpful and you had good intentions, but then your friend just denies you of your advice And tells you hold on, hold on, hold on, you understand anything that I'm going through Did you know that I'm struggling with X, Y, and Z? No, you didn't Because you didn't take the time to listen to me

You didn't take the time to step back and understand where I'm coming from because you didn't listen to the whole story I'm pretty sure that's all happened to us at some point in our lives And that same human experience applies to user experience design And you should consider that in your process Because regardless of your intention, your advice, your solutions, they're not going to help because you never took the time to empathize with your friend or, in this case, the user

And in the past, many companies used to take that unempathetic approach So the common approach was just designing a solution with a three-point strategy It was to, one, come up with an idea Two, build it And then three, hope that consumers would just love it and use it

But nowhere in that process here is the user involved at all in creating the solution This approach is really selfish It does nothing to satisfy your user And it just puts them in the back seat And when you don't include the users, this is what happens

You're constantly just playing a guessing game of what the user needs, when the solution all along was just to listen You just have to sit down with them and listen to their problems And understand what they're going through so that you can provide exactly what they need So if this sort of approach doesn't work, then how does it work? Well, first, you have to have empathy, as we discussed So empathy is defined as the ability to fully understand and identify with another person's context, emotions, goals, and motivation

So take a moment to just take in those bolded words right there Understand and identify, this is different from sympathy Sympathy is just understanding where they're coming from Empathy means that you can put yourself in their shoes That is a great skill that is very underrated

And with that, many people don't think that empathy is a skill that you can gain It's not inherent for everybody, some people are just naturally good at it But it is something that can be practiced Without empathy, you can't understand the world's issues You can't understand people's issues

And your product will not be accessible or inclusive So you can ask yourself these questions Is my product accessible? That means, my product, can it be used by people who have disabilities or any impairments? Does it marginalize anybody in that group? Inclusivity would ask the question, does my product take other cultural context into consideration? Those are just examples of questions that you can ask to have more empathy when you're designing a product So a real life example that's actually pretty recent is the company Tinder So originally, Tinder was an app built for countries like America, where we have access to fast data and high end phones

But when you build a product like that, who does it leave out? It leaves out developing countries like those in Asia, who have limited access to fast data and they have low end phones Well, that sucks Because there's a high demand for Tinder services in Asia, but they can't use the app Because it won't even run on their phones They can't even download it

Their phones can't handle that sort of processing power So this pushed Tinder to redesign an app that reaches edge cases in Asia through their solution called Tinder Light And it was designed to be smaller It takes up to 25% less space on their phone And they worked together with their UX designers and engineers to build an app that was smaller and can reach these edge cases so that they can reap the benefits of their product

But how would Tinder have known to reach those edge cases if they never asked these questions? Instead, because they didn't ask these questions, they provided a solution only for the privileged Americans or Western countries Inclusivity is very important And it can only be achieved if you are coming at your problems with a perspective of diversity and working in diverse teams Which is why Fresno is a great place to start user experience design talent Because we have people coming from so many walks of life

And they can offer different perspectives that is unique to every single person Empathy is necessary for innovation That is the biggest point that I want to drive home for this section So the third pillar is trust You have to build trust through your design

Building trust is one of the most important responsibilities of a user experience designer Because it builds loyalty to the product, which also builds a symbiotic relationship where the user and the business both flourish So I put down five points, five tips that you can use to build trust through your design So first, I put down personality Personality can be achieved through your design and how you word things in your product

Because humans want to feel that the product is warm, because they want to feel that another human is on the other side of the product They don't want to be interacting with a product or app that feels like a robot Next is building credibility You build credibility by paying attention to the small details When you're designing any sort of app, you want to make sure that you don't have typos or that the spacing in your design is inconsistent

You don't want any of those small mistakes Because when you aren't careful enough that you would spend time to make sure that you don't make those errors, it shows that you don't really care about your product And why would the user care about the product if they feel that you don't? So that brings us to the next point, which is having an appealing design Having appealing design means that your design is up-to-date with the current design trends And you want to be able to use familiar design patterns that everybody is familiar with

For example, Google has their material design patterns It's their standard that they go off of to make every Google App consistent So that no matter which app that you use, you intuitively know how to use it because it's consistent through every design One button works the same as it does in another Google App And that sort of design brings familiarity

And you don't want a user to relearn something they should have already known just to use your app You should never make them relearn anything So the next is error forgiveness You want to be very forgiving in your design A lot of times, users will inevitably run into some issue using your product

But building trust means that you have to forgive the user It's the same as a human relationship Forgiveness is a big component And you do that by always allowing them a chance to redeem themselves when they make an error So you want to build an app that gives them a chance to go back and fix their mistakes

But also, explains to them what they did wrong in clear words that they understand So the next thing that brings us to is transparency Clarity, and transparency are very, very important, as well It helps to decrease the amount of times a user would ever run into an issue or an error This is achieved by having clear navigation, wording, and communication

And you want to keep the user constantly aware of where they're at in your app or product at all times You never want to keep them in the dark This can be, like, for example, when they're filling out a credit card form like they're purchasing something Sometimes they're hesitant to put in their credit card information because they're like, oh, if I press that Next button, does it confirm my payment? Or does it take me to a next step? I don't know Have you guys ever experienced that moment? Yeah, so that's an example of not being clear and transparent, you want to know where you're at all times

So a solution to that would be, for example, adding a Progress bar at the top with clear titles that say currently, you are at this step And then the next step would be a confirmation That way you feel safe where you are You feel that you know exactly where you are so that you are not going to make a mistake And just backtracking a little bit, the reason why this is very important is because when a user makes a mistake and they feel that they can't redeem from what they've done, they're going to inevitably have negative feelings towards your product

They're going to feel afraid to use your product And that's exactly what we're trying to avoid, which is why building trust is very, very important when you're building a human-centered user experience design So how does everything we just talked about, how does that translate into what user experience designers do? So user experience designers, they identify problems by empathizing with their users This is accomplished by something called user research, where you sit down with a real user of your product and then you ask them questions and observe them while they are using your product You want to see how long it takes for them to complete a task

You can time it You can see how many steps it took for them to complete a task So say, like, can you please sign up for a new account and see if they get confused along the way Or if they were able to successfully complete the task This is very important because if you are able to see where their pain points are and you take note of that, then you can build a better design

Which leads us to the second point, user experience designers should increase efficiency with their users in mind So based off the user research in the previous step, you would take that data and then, transform it You'd redesign it into something much better So, for example, if the steps it took to complete a common task that they normally do, if that took four to five steps, let's find a way to reduce it to one to two steps So that's something that user experience designers do

User experience designers also improve clarity, both in their design and their words They're responsible for a beautiful, seamless design throughout a product This means that information that you put on your product should have an organized flow of logic so that the users know how to use your product almost immediately, without being taught This is achieved through where you place objects and how clear your wording is, such as labels, navigation, and buttons Lastly, user experience designers are storytellers

They tell the story of a business's value and their mission through good design They design their product in a way that it fits the story that the users are living in So all of that brings us to the user experience process There is a very standard process that user experience designers follow Honestly, it can deviate depending on the workplace that you're at

Sometimes workplaces, they tend to move a lot faster so then they skip a lot of steps But it is very important that as a user experience designer, you should try to hold true to how the process should be Because so many things can go wrong if you don't follow this process So this is the process right here It starts at the discover

If any if you guys have bad eyesight, that's the blue arrow So it goes from discover, define, design, validate, and develop But I want to clarify something User experience is not a phase in a product's development It never stops

It's constantly going as long as the product exists So let's just break this down real quick So we start at the discover phase And here, the first step is to sit down with all the stakeholders that are involved in the project This includes the project managers, the engineers, the CEO, all the designers– it doesn't matter

They should all be sitting down together with you to really define the brand's vision, the mission, the target audience This is very important to understand the business And from there, then you can go into researching the real users I discussed earlier that user research was very important This is where it happens

This is where you sit down with the user and create a persona based on what you found from their data So you understand their motivations, and their goals, and their frustrations And once you understand both the business and the user, then you can start going into the define stage This is where you look at all your data and then you define the problem at hand Based on all our data, this is the problem we found that we need to solve– that is what you should be doing

And from there, you start creating ideas But I want to state to at this stage, it's very important that you try to throw out as many ideas as possible Because if you don't throw as many ideas as possible– you just have to do it fearlessly, just keep chugging it out and ruling everything out Because if you come up with a good idea, at the very end stages of this process, that costs a lot of money to go back and fix everything around your new idea, to redesign everything It's just way too much

That's why it's important to create the best ideas you can at this stage And then from there, you can start storyboarding You can map out how this product is going to fit in your user's life by experience mapping And then from there, once you've gathered all of this research and defined everything you need, you start designing And see, this is a point I want to highlight

Many people think that you just design You see a problem, you start designing No, there was so much work before you got there And it's really important that you understand the constraints that you're working in Like, for example, is your product only– does it work on mobile devices? If so, then you have the constraint of a screen size

So that brings up this idea of a mobile first design approach You want to start at the area where you have the most constraints and then grow from there So that is something that you want to do in this process And you would start making prototypes based on all of the research that you found From there, once you have some prototype that you're comfortable with that you want to test on real users, then you bring it to the validation stage

This is where you go back to those real users and then say, hey, this is our product This is what we came up with And then you just test it on them And during this part, this is where all of the errors that you did not expect were going to come, that's when it happens when you're testing it So that's why this stage is very important

Because designers are not omniscient They don't know everything They can't predict everything, no matter how hard they try, but they can try hard And the important part is to go back– after you found all of those errors, you go back into the design stage and iterate all over, again, to create a better design solution every single time And once you and the company, all the engineers have come to a place where you feel like your design is good enough to start developing, this is when you hand-off your product to the developers

And then, you can launch the product So again, this process happens over and over and over, again It never stops So I want to teach you guys some techniques, as well So I'm going to go over three user experience techniques

And I mentioned them earlier in the process So the first is personas So personas, they represent a larger people group They represent a larger group of users So typically, it's one to two pages which describe their behavioral patterns, their goals, their skills, their attitudes, and frustrations, as well as the environment that they operate in

And this is very important because having this handy in some sort of document or sheet gives you a central place to keep all of your information about the user that you're targeting So that you can always remember So typically, this is based on real people, but this person is fictitious And it allows you to dive deep into the user's current context and really understand them This allows you to empathize with them

Because you're digging through their life to figure out where their frustrations are And how this product can fit into their life So, for example, right here, this is a good example of when it would practically be used You would print out your persona, keep it next to you as your designing solutions Because usually when designers design solutions, they get really, really ambitious, like, I want to solve this problem and this problem and this problem

But the thing is, that's not the problem, the frustrations that the user has So that sort of ambition can knock you off track So personas, they're very handy because you can constantly be reminded of who you're designing for So these personas, they can be taken another step further and expanded into something called a storyboard Which will help you visualize the story of how your product will enhance the user's life

Which is technique two So storyboards are illustrations that represent shots that ultimately represent a story And it's basically, a sequential array of events that help you visualize the experience, the moments And it was actually coined by the Walt Disney Studios, they popularized it very much And they used frame by frame sketches to help visualize the film before they even started building it

So they created stories that were visual and memorable, empathetic and engaging, which are the same exact expectations required for good user experience design With storyboarding, it's a great inexpensive way to capture ideas and explore different experiences at a very low cost And it allows you to bring your vision to life And critique it with other designers and non-designers And when you gather with all of these people, it helps you iterate on that story to make it better

And before I go on, I want to say that a designer's main skill is not Photoshop, Illustrator, Sketch, whatever you use It's the ability to formulate and describe a scenario So here is an illustration that's broken up into moments about how an app fits into a user's life If you're not very good at drawing– storyboarding, I know it looked intimidating– if you're not good at drawing, this can be very helpful for you You can use words to describe it

And these emoticons can help you track the user's emotion as they use your product So I'm just going to read it through So Tom lives alone He's suffering from depression, having just lost his job Then Tom's friend, Susan, has noticed that something is wrong

But she's not sure how to reach out to him So Susan downloads the Heartline app onto her phone and then adds Tom Periodically, the app will remind Susan to check in on Tom And then Susan checks in with Tom and lets him know how much she cares about him And as you can see, again, Tom was very depressed in the beginning, but by the end, the product had enhanced his experience in the context of depression that he was in

To expand on this, you can flesh it out into some cool comic design It's not necessarily necessary, but usually, visual designs can help people who aren't very good with words to visualize it into something that they can understand So that's basically, the same thing So the third technique is to start prototyping Once you've created your personas and understood the map of how your user is going to experience your product, then you want to start actually drawing a product

This is when it all starts So a prototype is an early sample model or release of a product, built to test a concept or process Again, it is an early sample built to test That is what it's for So this right here, this is a low fidelity wireframe

You can easily do this on a piece of paper and a pen You don't need some fancy program to do this It's literally, your app on paper It helps you ideate early drafts of whatever design solutions are on your mind at a very low cost It's considered a low-fidelity prototype, as opposed to something more fleshed out

And at this stage, you shouldn't really focus at all on any design elements You don't want to focus on anything like colors or fonts And instead, you should focus on the logical placement of information And whether or not the user flow makes sense You can also build low-fidelity wireframes in this app called Sketch or other design tools

It helps to refine your wireframe, but it's not necessarily necessary From there, you go into a high-fidelity mockup Basically, a high-fidelity mockup is a step closer to your vision of what the product should look like This is typically, a static image You can't really interact with it, but at least, you can show it to different stakeholders, the engineers, and say this is what I'm envisioning

This is what I envision the product to look like But from there, you can take it a step further, which this is a very helpful skill for a lot of user experience designers to know, which is called interaction design So this right here, this is a redesign that I did of Venmo So I made this little interaction design to just show how I would want the product to be interacted with So like I said, you can show how the scrolling works

What happens when you press certain buttons This helps take that ambiguity away from the engineers and helps them get a clear picture of exactly what they're trying to build This is why these different stages of prototyping is so important Again, we went from paper to just a physical, our digital design That was static

And then from there, you made it interactive So from there, if the team is comfortable, you launch the product And then you repeat everything over, again But obviously, I'm not going to repeat the whole presentation, again So just to recap, these are the topics that we went over

It's very important, again, that we have a human-centered design when we're designing any product That is the biggest component and responsibility that a user experience designer has You have to have the ability to put yourself in another person's shoes in order to solve real problems Because how can you change the world if you don't understand it? It's impossible, you're just solving your own desires And again, we need to respect the user experience design process

If you plan to pursue this in your career, a lot of times, many people on your team are going to try to disrespect the process and just rush you through because they see you as just a graphic designer That's not who you are You are more than that You provide the research, the backing There's a reason why the button is placed specifically right here

There's a reason why this button is this big It's because people who have some sort of– basically, it's easier for them to push buttons that are bigger, rather than creating it in a smaller space You want to increase the surface area There's research behind everything Then we went over user experience techniques

You want to create personas You want to understand and dig really deep into the person that you are creating for And always keep them next to you so you always remember who you're designing for It's a very sentimental process And storyboarding also helps with that, as well

And obviously, the prototyping, that's where many people think that that's where the design process starts Obviously, it's not So I want to challenge you guys, very quickly And this is actually, a Google interview question for designers I know it can be a little bit difficult, but I wanted to have you guys collaborate amongst one another

And we'll just talk about what ideas we came up with So the challenge was design an interface for 1,000 floor elevator for a building that houses commercial and residential floors And I want you guys to think about the type of people that you're targeting for, which is commercial and residential floors And then try to understand where they're coming from and what problems they're going to run into And then think about an interface that would improve that entire process

It doesn't have to be perfect I just want to see what you guys would come up with So go ahead Feel free to ask any clarifying questions AUDIENCE: [INAUDIBLE] BIANCA TOLEDO: Nope

Sky's the limit here Her question was, does it have to be one elevator? It does not have to be AUDIENCE: [INTERPOSING VOICES] BIANCA TOLEDO: Yes AUDIENCE: When you say commercial, does it mean shopping? BIANCA TOLEDO: Let's just say that it's offices All right, I'm just going to give just one more minute

All right, let's just wrap it up real quick You guys, ready? All right, can we hear some of your guys' solutions? Yes AUDIENCE: A number pad BIANCA TOLEDO: A number pad– can you elaborate, please? AUDIENCE: [INAUDIBLE] BIANCA TOLEDO: OK And for you– oh, sorry

AUDIENCE: [INAUDIBLE] BIANCA TOLEDO: Right, and that answers the user's frustrations of they don't want to wait forever to get to the 600th floor, right? That's a good one And for you? AUDIENCE: [INAUDIBLE] BIANCA TOLEDO: Right, exactly That's a good one And you had one, too? AUDIENCE: [INAUDIBLE]

BIANCA TOLEDO: That's a good addition AUDIENCE: [INAUDIBLE] BIANCA TOLEDO: For the picture? AUDIENCE: [INAUDIBLE] BIANCA TOLEDO: I see Oh, that's very interesting That's actually the first time I've heard anybody incorporate visual and audio design into their elevators

Because people get very antsy They want something to do here or look at That's interesting Does anyone have any other insights? No? So that's really good You guys definitely hit a lot of points all separately in your own specific ways, which does bring us back to that one point about diversity

This is why diversity is really good You get lots of viewpoints You guys, I like the idea that you separate residential from commercial And I like the wait times I like how you would specifically have a number pad, rather than looking for a thousand buttons

And then, an audio and visual to enhance their experience All of those, put it all together, you guys have a pretty good start at a working interface that can really improve the user's life So I did this design challenge because I wanted to show you and put the application into practice, what happens when you think about the user And all of you guys came up with such great solutions So I wanted to thank you, guys, for listening

Thank UX for listening And I wanted to open up the floor for any questions that you guys might have Yes AUDIENCE: [INAUDIBLE] BIANCA TOLEDO: I think about this And I, honestly, can never come up with a perfect solution

This is one of the hardest Google Design challenges I was thinking about having kiosks outside and, like, treating each elevator like a bus station I was thinking about doing the wait time so that people can know whether they're getting to work on time Because that's a frustration that they're going to have, am I going to get there? It would have an elevator schedule, kind of like that And the Cancel, that's a good one too because sometimes people are like, I don't want to take the elevator

Or I actually don't need to go upstairs anymore So it's important to reduce that wait time Let's see, also having maybe, like, scanning, like IDs It would scan IDs for security purposes because security is a big issue with a building as large as that People are going to be concerned sharing this building with a lot of people

So you want to make sure, maybe, their card only goes to one specific floor So it's kind of like your guy's ideas all meshed together, but different at the same time AUDIENCE: [INAUDIBLE] BIANCA TOLEDO: Right, exactly AUDIENCE: [INAUDIBLE] BIANCA TOLEDO: Yeah, it is definitely an idea that constantly needs to be reinvented because it's so complex And if you put all that money into developing a system that wasn't perfect to begin with, you need to really apply that user experience design process

That's why it's important to do all of that beforehand, before you build the elevator Does anyone else have any other questions? No? All right Well, thank you, guys, so much for coming to the design talk [APPLAUSE] [MUSIC PLAYING]

Source: Youtube

This div height required for enabling the sticky sidebar