top of page

TalkLife

A social network for adolescents facing mental health and other personal issues

Discovery

​

 
Existing App Analysis
 
During our existing app analysis we discovered
  • Navigational issues
  • Confusion around the colours relating to the mood of the user when posting
 
We also discovered Accessibility Issues within the app which wasn’t included in the brief. Much of the text was too small and there was not enough colour contrast on a number of interactive elements.

 

​

Tools Used

Sketch, Illustrator, InVision, Photoshop, 

Team: Myself, Josh Lofgreen and Mungo Tatton-Brown
Design Sprint: 2.5 week Sprint
Role: Research | UX Designer

Introduction

​

TalkLife is a peer-to-peer social support network for young adults with mental health struggles. A safe environment for young people to talk about life’s ups and downs without feeling like they are being judged.

 
The Brief

 

Our brief was to streamline the newsfeed of the app to help coordinators deal with the rising levels of user activity and keep track of those who need the most help. We were also tasked with improving the user profile experience.

 

​

​
 
For instance, on the green buttons you can see the white type is difficult to read, even for someone with good eyesight. The dark grey arrow in the nav bar and ‘…’ on the bottom right also fail international w3c AA and AAA accessibility guidelines.
See highlighted elements above. This research informed our design decisions going forward. We then implemented changes into our prototype - so the app now meets AAA accessibility standards.

​

 

​

Before we begin, due to the nature of the subject some quotes you will see on screen shots and throughout this case study may be upsetting. They are based on real quotes used within the app but all names have been changed to preserve anonymity.

User Interviews and Affinity Mapping

​

We sent out a screener survey to enrol suitable candidates for interview. We spoke to 16 people who had used social media to post about personal problems in the past. We also posted a survey directly onto the TalkLife app of which we received 

103 replies. 

Our aim was to get to the heart of how users really felt about using the app and the likes and dislikes to give us a user centred approach when making changes to the design and newsfeed directly.

Key Quotes:

Anonymous

“It’s important to have

common interests to build friendships.”

Ellie

“I like sharing my problems

as I get advice and validation

for my feelings.” 

Kieran

“In private I can talk about

things like questioning

my sexuality.”

​

Some of the key themes that were important to people and their reasons behind sharing on certain social media newsfeeds were as follows:

​

 

​

  • Privacy & Anonymity

  • Relief from offloading problems

  • Belonging

  • Building connections

Key Themes

Define

Personas
​

To help us focus on some of the delicate issues our users face, and to ensure we continue to develop our project with a user-centred approach, we created two personas that address the user groups needs.

Emily

22, Los Angeles

In a relationship

Barista

Has started to question her sexuality and because of shyness and social anxiety, she finds it hard to reach out to people about her worries.

​

GOALS

  • To make friends and reduce her isolation

  • To connect with others in similar circumstances​

​​

NEEDS

  • To have a space where she feels safe to discuss her problems

  • To be able to reach out and get support when she needs it most.

​

Sarah

19 , Seattle

Single

Student

Emily has had an eating disorder in the past. She also has anxiety and often has thoughts around self harming.

​

GOALS

  • To make friends and reduce her isolation

  • To connect with people who share her experience

 

​NEEDS

  • To speak anonymously about her issues

  • To use TalkLife as an outlet to offload her worries

​

Develop

​

Ideation

To begin to generate ideas, we came together with our client in a co-creation exercise, Design Studio. We presented our personas and scenarios for both Emily and Sarah to the group as a design challenge, using these to drive ideation around solutions.

​

​

The main solutions we would take from the design studio and bring into the paper prototype were:

​

  • Selecting a topic for your comment

  • Filtering and choosing which feed your comment goes into

  • Setting a priority for your message using a variety of iconography ideas.

Paper Prototype

​

Emily's Scenario Emily feels like self-harming and posts on TalkLife

to see if anyone will listen to her problems

​

​

Paper to Low Fidelity

​

Using a paper prototype, we conducted usability testing for both Emily and Sarah's scenario's .

Key observations from testing were

 

  • The topic and feed were too similar,

  • The list of drop-down menus felt too wordy

  • The comment and message icons were too similar

​​

So we set about resolving these issues as we moved from paper to low-fidelity.  We changed the feed menu from drop down menus to a slide along carousel and used emojis for the emotions.

User Testing

​

Low to High Fidelity

​

Prioritising urgent posts was a big challenge for us. Initially, we tried out an exclamation mark to make urgent comments stand out amongst others. However user tests indicated that it could be alarming for others and how do users determine which is more urgent. We implemented a more subtle approach whereby the style of the comment box changes on priority posts by encouraging other users to post below.

Profile

Paper to High Fidelity

​

For the profile page, based on our survey results and our feature prioritisation exercise we reorganised various elements that needed improvement. We added a ‘read more’ under the bio and we also improved the general navigation of where to find popular items on the profile.

 

We then added a new ‘wave’ feature at the top. For shy users who may not want to message directly and to add a more social hello element to the app. We also added an accessible ‘follow’ button, which users expected during their interaction.

InVision Prototype Link

​

You can view the final, high fidelity clickable prototype on InVision here. In the mock-up, Emily has just had an argument with her boyfriend. She feels like self-harming and posts on TalkLife to see if anyone will listen to her problems.

Here are the key UX improvements:

 

  • User can select which feeds their post goes into

  • The prototype now meets AAA accessibility standards

  • High-priority post are easy to differentiate

  • Emojis replace worded mood selection

  • Redesign of profile based on user survey with added wave feature

Deliver

​

High Fidelity Key Screens

​

Next Steps

There is always more that can be done but here are some of the initial areas which need improving below. Also a complete rebranding exercise looking specifically at the use of colour. Certain bright colours can be triggering to people with mental health so a more neutral pallet would be beneficial to TalkLife users.

​

​

  • Address internal messaging issues

  • ‘Return to home’ navigation issue

  • Creating groups within the app

​

​

Conclusion

​

I learned the importance of getting the right people for interview and perfecting the questions needed to delve deeper into the core of the problem, especially as we were dealing with such delicate issues. The interviews are what sets the precedence of great research needed to solve the brief most effectively.

​

I am most proud of how we worked together as a team to deliver a successful working prototype that the client absolutely loved. The changes are now going to be implemented into the app. The client was so impressed they have also asked for further UX guidance.

​

 

Thank you for reading.

Click here if you would like to view my full case study on Medium.

bottom of page