 So, hi everyone. My name is Amanda McKee. I do front-end development and design at Digital Kidna and today my talk is designing for an empathetic user experience. So, at Digital Kidna, when we're first met with the exciting challenge of designing a new site, one of the first things that we do is create user stories. So, a user story is basically a little write-up about what kind of users we're going to have on our site and what their goals or objectives will be. Knowing this can sort of help us inform the rest of the design process. So, some simple examples that a lot of us have probably come across before. Someone like User A. User A comes to a college website. They want to know more about the course offerings, the tuition costs, and the campus life. Or someone like User B. User B goes to a local news website and they want to know more about what kind of events are happening around them that weekend. These are just some common examples that a lot of us may have run into already, but today I want to talk about a specific subset of a user base that needs a different special kind of attention. What I want to get everyone to do here is try to envision their self as the user that I'm about to describe. So, our user or you are Mary. Mary is a 20-year-old female who has dealt with anxiety and depression for most of her life. Right now she is pretty much in mid-panic attack. So she feels faint, she feels frazzled, she feels scared, she sort of just wants to crawl right out of her skin. She has this skewed perception right now that if she went to her friends or a family member for support she would just be bothering them. So instead she actually turns to the internet. Now, there are certain types of websites that are going to lend themselves more to having users like Mary on them and those are sort of sites based around mental health and I'm going to point out a few examples of sites that I really like. But my hope is even if your next project isn't directly related to mental health you'll see that implementing a couple of the things that I'm going to talk about could help just make a better experience for any user, not just a user like Mary, who has all that anxiety. So where do we begin? So it's actually kind of crazy if we think about the fact that Mary's first point of contact could maybe not actually be a friend or a professional or a family member but essentially a bunch of words and code on a screen. So just because it is a bunch of words and code on the screen doesn't mean it has to feel like it is. We can sort of make it feel almost like it is a human so she can get that sort of compassion mirrored back to her. So an example of a site that I think does a really good job of sort of humanizing their content is the Psychology Today website. Basically this website is a place where you can go and try to find therapists either by specialty or by location but this is what a typical profile page for a therapist would look like. So if we take a look at it there is a nice big picture of the therapist so you can sort of put the face with the name. There's a personalized write-up. It's not just using the same default text. That text was actually curated by Dr. Jinsmore herself. I also like the use of this big happy email me button under her picture. Something about the wording and the use of the button sort of acts as more of an invitation to me rather if she would have used just a simple link saying email just a text link there's something more like that's just more of a statement to me it's not as much of an invitation. I really like below that the special sensitivity that they thought about when they're using their send to friend button. So all of us have put social media sharing buttons on our websites probably hundreds of times but I really like the special thought that they put into this because if you click the send to a friend button it's not just a link that goes right to someone's Facebook wall or something it tweets to someone it's actually just a private form that you can actually email to your friend and put a little write-up about why you're sending it to them. I really like that they thought about it in this way because just a default social media button might be a little too promotional for the context and the circumstances and if someone sent me a tweet for a therapist I might be kind of offended so it's just you got to sort of think about the context and what you're gonna use it. So overall I think there's ways that we can change our content in simple places just to make it feel a little bit more human so instead of just the default placeholder text or teaser text or button text instead of just something like search how about how can we help you today instead of just view more or read more how about learn more about Dr. Dinsmore's philosophy. All of these things may seem small in minuscule but when you think about how many labels how many buttons how many teasers you have on a website if you curated those to make them more personable it can have effect when it's all compounded together. So of course another way to sort of give that human touch to a website is through authentic imagery and video. So at Digital Kidnaut one of the other things we do when we're first designing a site is we define a set of keywords. These keywords are sort of going to be the brand essence or the connotations that we want the user to have with our website so if we were making a site for mental health we might use the keywords like authentic, empathetic, optimistic, soothing, breathable, or friendly. So basically once we have these key terms defined any time that we're going to put images or video into our designs we want to look at those key terms and look at those images and ask ourselves if those are in alignment. So if I asked you to take a moment and think about any imagery that comes to your mind anytime you've seen any products or websites that are sort of related to being calm, soothing, destressing, maybe just wellness in general what do you think of or what comes to your mind. These are some images that I frequently see. So there are people overly excited to be in nature. There are people doing unrealistic yoga poses in dangerous places. There are unrealistic sunset colors, people taking really long deep breaths. There's always a lady dancing on a beach or field with balloons. These are a bit much. If you think about putting yourself in the state of mind of someone like Mary these may actually be alienating to her. She may look at these and think you know where they are internally and where I am internally is so far apart that this website doesn't get me. They don't really understand how I feel. So these images would sort of be one end of the spectrum and ones like this are sort of at the other end of the spectrum. We have people clutching their head. We have weird thunderstorms. We have like abstract smoke coming out of people's brains. People screaming. These are also a little bit much. I'm not saying that either of these picture sets don't have a place in a time but it's just sort of think about the context and what you're going to use them. These images might work really well on a page if it's about someone who is trying to support someone who has mental illness but they themselves don't actually experience it. If they look at these images they might find that they can sort of understand how dark and how deep it really is. But again if we look back at our key terms and I look at these images I'm not really getting optimistic. I'm not really getting soothing. So it's just about being careful how much we want to put images like this into our content. So ideally we would put images a little more like these. These are sort of in the middle of the scale. Nobody is completely desolate but also no one is dancing in a field with balloons. These people when I look at them I'm getting the sense that maybe things aren't great right now but they are hopeful for the future. I think that kind of message is the one that's really going to resonate. So just as images can help give our content a little bit more of a human feel of course so can video. I really like what anxietybc.com did. They have a video on their find help landing page as well as every landing page for every mental disorder type and there's a video with Dr. Michael Catchbull. If you listen to the video a little bit just his tone and just his mannerisms sort of can give you that feeling of compassion. There's like a nice light piano track playing underneath the speaking. He kind of sounds like your grandpa or Mr. Rogers or something. Overall I just felt a little more ease when I heard that video. So it made me start thinking where else can you strategically place video that it would be really powerful. While every mental health site that I looked at has some sort of a page about for someone in a crisis so it has all of the crisis hotline numbers written down. So what if on that page as well as the numbers we also had a video of someone from that organization and that person in that video was saying things like please actually call that number please actually pick up the phone and use the number there are people here to help you we really want to talk to you we really can help you please actually do it. In this sense it could actually just nudge that person a little more into actually getting help and in this sense video can be used in very powerful ways. So another thing to think about when we're talking about mental health is sometimes the terminology can get a little medical or scientific. On the web accessibility initiative website it says complex sentences that are difficult to read and unusual words that are difficult to understand pose a barrier to those with neurological conditions such as anxiety and depression. So essentially someone like Mary is at she has a better chance of becoming disconnected from that content if there's all of these big words that she doesn't completely understand. So what can we do about that? So on the anxiety BC website on their mental disorder pages as well as having the video they also have at the bottom stories from actual experiencers of that mental disorder. And so that person will sort of outline what their everyday life is and how it feels to have that mental disorder. So someone like Mary can come to the site and learn about anxiety almost as if she's learning it from a friend in this sort of story format instead of her almost reading a textbook. So now that we talked a little bit about how you can sort of make your content a little more human how can we help someone like Mary navigate around our content. So complex navigation mechanisms and page layouts that are difficult to understand and use are especially a concern for users like Mary. Of course whenever we're designing something doesn't matter who the user is. We always want to help them find the content in the most efficient way possible. But for someone like Mary we have to just keep in mind that things that we may think are simple for the average user are actually not so simple to her. I really like a talk by Eric Meyer called designing for a crisis that sort of outlines that notion. So essentially in his talk he tells a story about how when he was on vacation his young daughter became very ill to the point where she had to be airlifted to a hospital two hours away and him and his wife were told that they didn't know if she would even survive the helicopter flight over. They weren't allowed to go on the helicopter. So Eric and his wife are frantically trying to get to the hospital and they're looking up for the addresses and Eric realizes that although he can find the address to the hospital he still doesn't know exactly where to go. Hospitals are big. There's many different wings. So he goes on the hospital website and he explains how the way he was looking at the website in that moment is very different than how he would look at it now. He was frantic and his vision was blurred and essentially he wasn't able to really find that content that he was looking for. He talks about painstakingly going link by link through pages trying to find something connected to the information that he needed. He admits at this point what you may be thinking is Eric why didn't you just call the hospital? Well he says that he was actually so frazzled that he had actually forgotten that his phone could actually be used to make actual phone calls. He goes on to describe this notion that we all have a finite pool of cognitive resources. When they're being used up elsewhere we have very little left over to do something like navigate a website. So if you think about how this relates to a user like Mary she's just so anxious right now. She doesn't have as many resources as we might want to navigate our website so how can we help her? One thing we can do is double up on important triggers. On the betterhelp.ca or .com website to get to their help pages they give you four different call to actions presented in four different ways but they all sort of eventually lead you to help. On the Canadian Mental Health Association website they give you three chances to get to their help pages. Essentially in this case and in this context this actually isn't redundant because if Mary misses one of the first triggers she might pick up on the second or third and that could be really helpful to her. So let's say now that we actually have her attention because she's clicked one of our calls to actions. Now what we can do to help her feel the most comfortable is give her multiple ways to engage with the site or to get help. So on the Canadian Mental Health Association for Middlesex what they do is they have this big button that says where to begin need help start here. When you click that you come to a page and it gives you many different options on how you can get help. If you actually feel overwhelmed by all those options there's a form that you can fill out and you answer a couple questions and someone from that organization will actually contact you in your preferred method and they'll tell you what sort of resources they think will work best for you. So aside from having the form there's also the crisis hotlines of course but if we think about Mary being a younger demographic sometimes the millennials don't like making phone calls so they also have a 24-7 chat system if she feels more comfortable to talk in that way. Some other things that I saw that I thought were awesome were on the emmentalhealth.ca if you aren't sure sort of what you're dealing with maybe she doesn't even know if she has anxiety or depression they have some screening tools so basically you go and take a little test and it'll tell you you know you may be suffering from anxiety look for resources connected to that on the Children's Mental Health Ontario website I just really like the visual that they have of the big map that has all the pins with all of the help facilities even just having that visual that can help someone make make someone feel a little better just by seeing oh there's so many pins on that map that means there's so many people around me that can help me. So if one of the end goals of the website is to actually get Mary to get help in person there are things that we can do on the website to sort of help facilitate that outcome. So I would ask you to think about the last time you went on a job interview that you felt nervous for when I think about any job interviews that I've gone on there's one thing that sort of remains the same for all of them and that's that just getting there was actually the worst part once I actually talked to the person I was completely fine what I mean by that is I've had interviews at buildings I've never heard of in downtown Toronto or downtown London and then they always have like weird sweet numbers that don't make sense like go to sweep 302 on floor eight I don't understand that if you've ever if you've ever interviewed at a university sometimes they have just the abbreviation of the college building so you have to go look up their abbreviation first on a legend and then hope to piece it together sometimes you're like is there going to be parking am I going to have to walk 15 minutes from the parking so should I come like 20 minutes early 10 minutes early anyways what I'm trying to say is there's so many unknowns that it can kind of make you feel nervous just as an average everyday person so think about someone like Mary thinking about going to get help there's so many unknowns and she's already in such a vulnerable position so what if we on our website had a page that outlined what to expect if you're going to drop in we could say things like the therapist or the doctor might ask you these sort of questions and we can even go so far as saying to get to our room go in the back entrance near the shopper's drug mart on Glendale Drive go up the staircase to floor two turn left go to room 201 and receptionist will help you and tell you what to do next as I'm saying that some people might be thinking we don't need to put all that on our website that's kind of overkill but for someone like Mary she just really needs that reassurance so anything that we can do ahead of time to sort of ease that transition it's kind of like why not so Eric Meyer in his talk sort of goes on to talk about that as well when he finally got to the hospital he tried a couple different wings and they're actually locked when he finally found one that was open he walked in and there was no one in sight he actually had to end up tracking down a security guard to help him find where to go this is all while he didn't know if his daughter would live or die what he said was if that website had had a page that told him what to expect when you're coming for an emergency after hours that could have just lifted a little bit of anxiety off of him um his daughter was okay don't want to leave you with that cliffhanger but anyways it's just about when it comes to someone like Mary don't ever worry about over explaining so now that we talked a little bit more about humanizing content and wayfinding how do we put our design on top of it to make it all come together and be a soothing experience so as designers we know that color plays a huge role in your feelings and emotions we also have sort of cultural norms or cultural associations with certain color palettes if i asked you to take a second and think about the color palette that you would think about for any products or websites that have to do with calm soothing it's likely that you'll be thinking of a certain color palette the color palette you have in mind for soothing colors probably isn't this one if you felt thrown off by seeing red right now it just goes to show how much we have expectations around color when i return them to their original state everything seems to make a little bit more sense so essentially blue and green tones sort of canote calm so if we have a client and their site has to do with mental health ideally in their branding guideline all of their colors are going to be really nice ocean blues maybe some nice mint greens but what if your client's colors look a little more like this there's nothing wrong with this maybe red means something really significant to that organization but if we know that blue tones are sort of more soothing what can we do at this point wow we could ask the client if we can use blue as a secondary color palette for accents but let's assume that they just they don't want to add any more colors to their color palette what can we do then what i would suggest is using those very bold energetic colors as if they actually were an accent color and not the main primary color in this hypothetical example on option a i just went for it with the color i put the dark bold red everywhere that would kind of make sense and then option b i only use the red for sort of accents and anywhere else i implemented very light grays a lot of white space and i took the red shade and i moved it up until it was a very very light orangy ready tone um overall when you look at the difference just even at a far you don't really even have to see the details to kind of know that option b just gives you a little bit more of that airy field again if we think of those key terms breathable soothing if we zoom into the content a little bit you can see that on option b instead of implementing the full dark brand color in the button i just used it as a border and in the vent section instead of using the full dark color in the date box i just used a little line with the accent color so just like color can affect our emotions of course so can typography we know that changing font type can help give context to our design i don't think anyone here would ever suggest a joker font for a financial website or a healthcare website i don't think anyone here would suggest comic sans for anything but there's still some choices that we can make between seemingly neutral fonts that can help to make a more soothing experience so something that i like to do when i'm designing a site and sort of looking at different font choices is sort of make some mock-up teasers and i'll play around with different fonts but also with different padding different line spacing even putting different call to action buttons around it because i just want to see again before committing to a style are my font sort of in line with my key terms that i defined earlier so i made these hypothetical teasers and i sort of changed those things in both of them one of them may be exaggerated to make you hate it but so in option b what i did was include less buttons you'll see that in the event section on option a we have those call to action buttons whereas in option b i would just be relying on the title to take you to the actual mode i have shorter teasers more space my text that i chose is less condensed less bold basically it just makes it feel a lot more breathable what i sort of like to do is think of this as a metaphor for a physical space before mary and we're going into a therapist office option a as a metaphor if i walked into that room it would be sort of crowded and cramped there might be like seven different assorted couches kind of like a frat house there might be three different lamps papers everywhere a coffee table that's just too close to the couch so you can't get around to even sit on it maybe there's like three different receptionist windows they're all calling out to you it's not a place where you can go and take a deep breath if we think of option b as a literal physical space you walk in it's just spacious it's clean there's a single couch a single accent chair one lamp one receptionist window you know exactly where you have to go overall it's a place that you can take a deep breath i kind of like making those analogies just because i want my website to feel like taking a deep breath so overall there's a lot of things that you can do to sort of make your content a little more human make wayfinding a little easier and there's some things you can do to add to the design of the site to help suit a user like mary but even if your next project isn't directly related to mental health hopefully there's some things that you can implement that will help any user feel better and thank you everyone for coming if you want to have questions or talk any more we can do that now if not have a question so we're like so when you're trying to find your inspiration for your design so you know referring different types of colors and how you're finding the psychology behind those colors there's always a lot of conversation about how colors affect people's you know same deal with fonts right is there a specific place you're going to kind of get some research on it is it a gut thing like how are you approaching that there actually is some research on it that i did read it's sort of culturally based but north america western it's sort of more blues are calming reds are energetic i forget who exactly was it that was saying that but other than that it is sort of more anecdotal that's why i showed all of those products all of those products are for calm and all of them were using blues so it's sort of even making that loop stronger we see more products that are calm we see them with blue so then we even associate it even more right how would you approach kind of testing this and kind of to get a good proxy for what you know someone that's in an emergency in order to know if it did that actually work well yeah back from a user that's see that is what i was sort of thinking of a lot of these things it's anecdotal you can take it or leave it it's just some of like my insights but i was thinking of how these things would actually be tested you can't really force someone to have a panic attack and then use your site so morally morally i don't think i would force a panic attack on someone for this so i'm honestly not completely sure about that let me think about it and we can talk later like user testing at four o'clock on a Friday in the morning before coffee yeah these are good ideas i'm going to do this in the field something interesting that might play into this too if you notice the exit signs it's like the older ones are red the new ones are now green and i'm not sure if that was the red was a you know it gets attention to get out but it might have inspired panic along with the green is the here's the way out it's like please make your way out rather than get out that's interesting right there's oh my god there's another one so you mentioned a while ago about crafting content for for for hospital websites i'm just curious to know if how would you be able to mitigate for example the supposed tendency among doctors to really like no it has to be this super specialized super specialized language and stuff because we are a hospital we want to be known to be these experts in the field so are there any kind are there any say for example any collaboration sessions that you have been into just drill this this sensibility that is not necessarily about your great expertise or the letters after your name or how did you approach it well i would see that sort of being approached where you can still have the sort of textbook speak but like i showed there is also those stories so having both maybe just to make both groups happy we can still sort of explain it scientifically but then also have those stories at the end of that person just saying it in terms like oh i had a tight chest i feel out of it i feel really scared just to have sort of both that's probably how i would approach it if they really were like we need to have the super scientific speak in there thank you okay lunch