iPhone 12 Pro (Wooden Hands).png

The Kick-off

Project Overview

PLATFORMS

iOS

Responsive web

TOOLS

Figma

Figjam
inVision

ROLE

Researcher
Design Strategist
UX/UI Designer

LENGTH

10 weeks

RealTalk is an IOS app that encourages trauma survivors to connect with and confide in others who share their experiences and create a safe and secure support network. It allows users to form encouraging and meaningful relationships, where they don’t have to worry about feeling misunderstood or ashamed. Users also have the opportunity to connect with a RealTalk trained mentor, who can provide them with emotional and motivational support throughout their journey.

Real people, real experiences, real conversations.

Methodology

My Approach

To ensure that I was approaching this project with my users in mind, I focused on leveraging design thinking methods and the double diamond design approach.

Group 8.png

EMPATHIZE

Secondary Research

Primary Research

Problem Space

DEFINE

Personas

Experience Map

IDEATE

User Stories

Task Flows

PROTOTYPE

Mid-Fi Wireframes
Mid-Fi Prototype

TEST

User Testing

Revisions

REFINE

Brand Development

Hi-Fi Prototype

Human-centred design process

Double Diamond Design Approach

Empathize

Problem Space

As a trauma survivor myself, I had never met anyone who shared the same experiences that I had. Opening up to someone looked something like, “Yeah that sounds hard but you’ll get over it.” After speaking to my therapist about it she explained to me that most of her clients reported receiving the same conversational feedback as I was getting when they attempted to open up about their feelings to others. I was on a mission to dive deeper into this problem space and figure out why there wasn’t more connection and support over these experiences rather than loneliness and isolation.

Group 10.png

SECONDARY RESEARCH 

From increasing natural disasters, hate crimes, facing a two-year isolation period due to a pandemic and sudden losses of loved ones, traumatic experiences happen all around us. Through my research, I found striking data that validated my problem space was a compelling issue.

Group 1.png

of Canadians have experienced a traumatic event in their lifetime.

of them reported feeling "lonely always or sometimes."

of them reported feeling as though nobody understands them.

With a verified problem space, I composed a How Might We statement as the framework of my design challenge: 

HOW MIGHT WE HELP TRAUMA SURVIVORS FIND THE SUPPORT THEY NEED IN ORDER TO HELP THEM FEEL UNDERSTOOD AND ENCOURAGED THAT THEY ARE NOT ALONE?

PRIMARY RESEARCH

To better understand my problem space and exactly whom I was designing for, I conducted five-30 minutes interviews with Canadian residents between the ages of 18-60 who have experienced a traumatic event in the past. I wanted to understand their feelings, wants and needs as a trauma survivor.

MY HUNCH

Before I began interviewing, I had a hunch that trauma survivors, who do not have a solid support system that was giving them the emotional validation they needed, are left feeling alone and misunderstood.

THEMES & INSIGHTS

I began analyzing my interview notes and started affinity mapping insights into similar pain points, motivations, behaviours and then into themes. Was my hunch true or was there another underlying problem here?

From my conversations with my interviewees the following 3 themes emerged:

Group 7.png

Lack of Support

Group 23.png

Emotional Detachment

Group 24.png

Avoidance

I decided to focus on the theme of Lack of Support to explore further. The following 6 key insights swayed me in this direction:

“The way I see it is after you experience a traumatic event, the world gets divided into the people who understand and the people that don’t.”

“Yeah I have friends, but i’ve never spoken to them about my experiences because they wouldn’t get it so there isn’t really a point.”

"I enjoy listening to other people's stories because it brings me a sense of normality and I don't feel like it's just me who's gone through it"

"Sometimes I think the only time I could have these types of conversations about my feelings is with a therapist, and to me that's kind of sad in a way because we have to pay someone to truly listen to us? I dunno man.”

“I just needed support after it happened and guidance. I needed people to listen to me and encourage me, I didn’t have that.”

“I personally don’t know anyone else who has gone through what I have, I’m sure there are people out there but I mean how would you even go about finding them?

Define

Understanding my User

After synthesizing my interviews into themes and establishing my focus, I began to visualize exactly who I was designing for. I was able to do this by creating a user persona and experience map that focused on exploring their goals, frustrations and behaviours. It was within my users low points that I was able to recognize opportunities for design.

USER PERSONA

My primary persona, Camryn, is a 25-year-old virtual assistant who struggles to open up to people who don’t understand her past experiences. She ultimately feels alone, misunderstood, and as if she doesn't have a solid support system intact.

Persona.png

Primary Persona: Camryn Weaver

With a solid understanding of Camryn’s persona, I put myself in her shoes and mapped her current end-to-end experience trying to open up to somebody. Through this process, I was able to identify her low points and where there were opportunities for my design to intervene.

EXPERIENCE MAPPING

Group 13.png

Experience Map: Camryn Weaver

Now that I have solidified whom I am designing for and identified where my design can intervene in their current experience, I went back and decided to revise my How Might We statement so that it best fits my target user in this design challenge.


HOW MIGHT WE HELP ISOLATED TRAUMA SURVIVORS FIND THE SUPPORT THEY NEED IN ORDER TO HELP THEM FEEL ENCOURAGED AND UNDERSTOOD?

Ideate

Developing a Solution

With my opportunities for design established, I began creating user stories that represent the realistic wants of my user persona. From these user stories, I was able to determine the core functions of my app under different epics. 

Primary Task Flow:

As a trauma survivor, I want to connect with others who share my trauma so that I can feel understood.

Core Epic:

Build a Support Network

User Story:

Matching with another trauma survivor in a chat room and adding them to your support network.

Screen Shot 2022-03-30 at 9.14.34 PM (2).png

Initial Task Flow

SKETCHES

Once I was clear on my task flow I began sketching out applicable screens to accompany the task at hand. Drawing inspiration for existing UI components, I started sketching out my ideas.

Exploratory Sketches

Screen Shot 2022-03-30 at 9.47.49 PM (2).png

Prototype

From Paper to Figma

I began converting my paper solution sketches into digital mid-fidelity wireframes. From here, I created a working prototype that showcased my initial task flow. 

MID-FIDELITY PROTOTYPE

Group 39.png

Mid-Fidelity prototype

Test

Is my Design Intuitive? 

I conducted two rounds of usability testing with 10 different users over zoom in 30-minute sessions. Following my first round of user testing, there were a lot of revisions to be made now having a more concrete idea of what my users wanted. This led me to go back and revise my initial task flow:

Revised Task Flow:

As a trauma survivor, I want to connect with others who share my trauma so that I can feel understood.

Core Epic:

Build a Support Network

User Story:

Matching with another trauma survivor in a chat room and adding them to your support network.

Screen Shot 2022-03-30 at 10.35.29 PM (2).png

Revised Task Flow

In order to prioritize the most impactful problems to solve, I ranked my user testing feedback on its value to users and the resources required to solve them using a prioritization matrix. 

REVISIONS

Feed Screen:

Users said it didn't feel natural to log in and land on your profile page, so I gave them the desired feed page.

Version 2

Version 3

Group 80.png

Clear CTA

Refine

Brand Development

Sharing stories, especially those of a traumatic experience, can be hard. Therefore I knew my target users needed to feel welcomed and safe. To establish my products’ brand, I began writing a list of keywords that captured the feelings I wanted my brand to convey. 

Welcoming, Supportive, Warm, Real, Safe

MOOD BOARD

I created a mood board with a collection of photos that I felt resembled the feelings I was seeking to convey.

Screen Shot 2022-03-30 at 11.42.36 PM (2).png

COLOUR PALLETE

I extracted multiple colour swatches from my mood board and landed on a colour pallet that set the ambience and tone for my app. I ran these colour swatches against the WCAG 2.1 guidelines to ensure I was designing with accessibility as my top priority. 

Group 98.png
Group 99.png

WORDMARK

I chose the name realtalk because it represents two-way communication that moves past what's obvious, superficial and assumed to get at the core of authentic meaning and connection. I also liked this name because it is a slang word against millennials so it makes the brand familiar and approachable.

Wordmark font:

RETROICA THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG retroica the quick brown fox jumps ov

Tagline font:

POPPINS THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG poppins the quick brown fox jumps over
Screen Shot 2022-03-31 at 10.47.35 AM.png

Word mark digital iterations

I played around with different weights, spacing sizes and customizations to land on my final word marks and application icon:

Final Word Mark.png
Group 97.png
Group 95.png

HIGH-FIDELITY PROTOTYPE

Ahh finally, the final product!

Before I was satisfied with my final prototype, I had to inject my brand's visual identity into my wireframes. When doing so, I kept accessibility at the top of my mind which assisted me in all of my decision-making when it came to colour balance and type hierarchy.

iPhone 13 Pro.png

Below you can see the Task Flow that Camryn follows to match with a realtalk mentor:

Login

ezgif.com-gif-maker (3).gif

Users log in and land on their feed page where they can see posts from those who are in their support network.

Preferences

ezgif.com-gif-maker (5).gif

Users can now select their mentor preferences so that they find the best person to understand them.

Mentor Bio

ezgif.com-gif-maker (6).gif

Users get matched to a mentor who matches their preferences, they can read their bio and request a chat.

Chat

ezgif.com-gif-maker (7).gif

After the initial chat, if the user is satisfied they can add the person to their support network. Now they are able to chat anytime and see each other's posts on their feed.

Groups

ezgif.com-gif-maker (8).gif

On the group's page, the user can find groups to join that resonate with them, as well as join a weekly live stream event where a speaker comes online to share their story.

ezgif.com-gif-maker (9).gif

Profile

On the user's profile page, they are able to utilize their online journal and see their training progress if they wish to become a realtalk mentor.

Marketing

Responsive Website

To encourage users to download realtalk, I created a responsive marketing website using breakpoints. My process included gathering UI inspiration, sketching, wire framing and peer critque before landing on my final marketing product.

iMac 24 inch.png
[Mockup] iPhone 13.png

Expanding

Multi-Platform

I decided to expand realtalk to a desktop version for multi-platform use as it is more convenient to type, chat, and scroll through feeds using a mousepad and full keyboard. A desktop version would also suit my target demographic best as I have a wider age range who would be most familiar with desktop functions.

iMac 24 inch.png
iMac 24 inch2.png

Future Thinking

What's Next?

Further testing would need to be conducted on my high-fidelity prototype. With safety being a huge concern for my app, more safety features would need to be implemented such as the ability to report users and possibly a direct crisis hotline connection. I would also focus on how I could address my other two themes with added application functions.

Takeaways

Key Learnings

Removing Bias

I learned to remove myself from the problem space and not design based on my own experiences. Although I was passionate about this topic of conversation, I was able to remove my potential biased opinions by focusing on deep conversations with my users and their way of thinking. Every human experiences things differently and has different opinions but the commonalities are where I am able to help by the power of design. 

Pivoting

A design is never meant to be perfect. If a design seems perfect to me I have not done my job. Designing for my users sometimes meant scrapping a lot of my original ideas and that's ok! The willingness to accept that your initial idea is no longer a part of your design and make the pivot means that you are a true user experience designer. 

Thanks for reading!