Out Again

Logo and Mockups
Logo and Mockups

reintroducing users into social interactions one step at a time

My Role
Timeframe
Programs Used
Stats

UX / UI Designer

6 Weeks

Miro, Figma, Notion, Canva

270+ Interested Testers

Why do this?

What is it?

When is it used?

Who is it for?

The project was aimed at helping those, myself included who found that their social skills took a considerable knock during the COVID-19 imposed lockdowns.

I saw a need for a digital service which could help ease those like me back into social interactions one incremental step at a time, helping them practise while remaining accountable for their progress.

I knew this mental health issue affected a broad user base. It being a near universal issue, it came down to the way in which a person would approach taking positive steps to get on track with the help they need to overcome their issues.

Some people like to use technology to help, and use it as their companion on their journey to where they want to be. This solution would be aimed at those people.

This app being a companion app to assist users in their journey towards regaining their social skills, it would be used at a time seen as fit by each individual user.

The feature which pairs users with another user anonymously to chat and partake in the journey together, intends to spur users into completing prompts quicker, also adding accountability.

Out Again is an app to help users practice being social again after periods of isolation.

It uses a prompt based program of social interactions from making eye contact with a stranger, to reaching out to an old friend.

The users can take on each prompt, setting reminders to do them, and can find places in their local area to complete them.

The Challenge

This was my third project with Cyber Patio.

The challenge of this project was more of trying to contribute to tackling a social issue which I felt strongly about.

The issue being the issue of people, particularly young people, handling the loss of social skills as a result of the isolation caused from the Covid-19 lockdowns.

Research Questions

Research Questions
Research Questions

My Research Questions made with Miro

Due to this being a project more based around psychological thought processes, it was important in my dealing with people to respect their privacy and anonymity when gathering information.

The market I assume would have plenty of apps for mindfulness, meditation and other techniques to help people to manage their mental health.

Due to anxiety and the subject like the loss of social skills being stigmatised, i was aware that I would need to find folks to interview in non conventional means to gain the insights I needed.

Initial Hypothesis

In the case of loss of social skills due to covid related isolation, there is a need for a service for help ease people back into communicating socially.

Main Questions to Research

What apps are already out there for people’s mental health?

What kind of frustrations do people have when it comes to being social?

Are there any common threads to the reasons / causes for the losing of social skills?

What has helped people during quarantine / lockdowns?

Where would people like to arrive to after working through the issues they are having?

Market Research

I did market research of 5+ apps to see the types of features they were prioritising.

Here is an example of that research;

Example of Market Research
Example of Market Research

Generative Interviews

Repeating Anonymity

The approach I took to interviewing users was different to the approach I took with my other two projects. In knowing the sensitive nature of the subject I was researching, I wanted to be respectful of peoples anonymity.

Different Approach

This would mean instead approaching people for a face to face interview to ask them personal questions.

I went to reddit, mostly mental health subreddits to post about my own experiences with losing social skills coming out of lockdown, and then asking people if they too had encountered similar experiences

Reddit Icon
Reddit Icon
Reddit Post
Reddit Post
Interview Questions

The questions I asked were;

  • What is happening with you at the moment?

  • Would you have social anxiety? if so, could you describe it to whatever extent you feel comfortable explaining?

  • What is currently helping you feel better?

  • What kind of frustrations would you have when it comes to being social?

  • Do you use any kind of mindfulness / CBT based treatments?

  • Do you find talking with people has helped at all?

  • What has helped you during quarantine/ lockdowns?

  • What would be your ideal situation? - like where would you like to arrive to after working through the issues you are having.

  • Have you tried any apps to help?

Once I gathered 5 responses, I compiled the answers into Notion to extract some insights.

Generative Interview Insights in notion
Generative Interview Insights in notion

I will link the full notion database at the end of the case study.

Some patterns of the ...

Problems
Needs
Opportunities
  • Unable to contribute to social interactions in a meaningful way.

  • Feeling socially stunted.

  • Being “out of practice”.

  • To have someone to share the journey i.e.. Accountability.

  • Feel wanted by those connected to.

  • A level based system of small social interactions.

  • A section to show events in their area to help spur on participation.

  • A random pairing system with another user to chat with and rely upon, and be accountable to.

Research Analysis

Persona
Persona
  • I made the persona of Brianna, a 19-year-old office assistant who has struggled with the loss of her social skills from lockdowns.

  • Her main goals are to obtain fulfilling social interactions once again.

  • She is frustrated due to the fact that she was once very social and is aware it requires practice to get back to where she once was.

  • Brianna reinforced the notion that practice is necessary and awareness of the users current level of being social.

Brainstorming Ideation Session

Ideation Session
Ideation Session

I felt I still needed to get some ideas out about how to analyse this research, while also beginning the ideation stage, so I had a brainstorming session with my lovely sister to try to get a few ideas out there to see how I could further analyse my research and how I could approach the ideation.

Thanks, Aimee!!

Value Proposition

For the session we focused on the Value Proposition of the project, trying to find the core value of what I was to design.

Our mobile app helps socially anxious people who want to regain their lost social skills due to isolation caused from Covid related lockdowns by providing a levelled, practice based method of reintroducing users into social interactions one step at a time and encouraging accountability with an anonymous pairing system with another user on a similar journey.

We also solidified that the app would be made up of...

#1
#2
#3
Various Prompts of interactions to be completed
Various Prompts of interactions to be completed
Anonymous chat system to do the prompts together
Anonymous chat system to do the prompts together
What's on section to find places to complete the prompts
What's on section to find places to complete the prompts

Sketching and Lo-fi Wireframes

Designing!

Sketches and Low fidelity wireframes
Sketches and Low fidelity wireframes
  • The initial sketches were to see how I could fit each of the solutions I had into the screens.

  • I used some inspiration from tinder for the resources for user safety page

  • Knowing I was going for a more practice based method, sectioning the prompts into levels ensured for a flow through the varying intensity of each prompt.

Hi-Fidelity Wireframes

Hight Fidelity Wireframe
Hight Fidelity Wireframe
Hight Fidelity Wireframe
Hight Fidelity Wireframe
Hight Fidelity Wireframe
Hight Fidelity Wireframe
Hight Fidelity Wireframe
Hight Fidelity Wireframe
Hight Fidelity Wireframe
Hight Fidelity Wireframe
Hight Fidelity Wireframe
Hight Fidelity Wireframe

Dashboard Page

Initial Prompts Page

Main Prompts Page

Inside a Prompt

The prompts functionality adds the practise element to help user get back into their social interactions gradually.

Pairing Chat Page

Resources Page

What's on Page

This pairing functionality adds the element of accountability and helps users stay motivated.

These resources help users with information if they have any concerns about their safety.

This helps spur users into participation.

Here's what I learned from these stages of prototyping...
  • I had the fact reinforced about the importance of the sketching phase, to really map out after my brainstorming session where all these ideas where going to go.

  • The wireframing was a fun process this time. Before I definitely struggled with them but this time I was able to make stronger more informed decisions from the start, such as keeping things pixel perfect, with accurate spacing to make things fit nicely.

And now introducing...

Out Again

an app to help you practice being social again after periods of isolation

Mockups of Out Again
Mockups of Out Again
UI - Style Guide
Colour Palette
Typography
Icons / Cards
Brand Colours
Brand Colours
Brand Typography
Brand Typography
Brand Icons
Brand Icons
The Logo

I was somewhat nervous about having to design a logo as it was something I had little experience in. But it was great to experiment! This side of UI is something I’m very excited to do more of and expand my knowledge and skills.

Logo Ideas in Canva
Logo Ideas in Canva
  • I went to Canva to find a few logo examples since my graphic design skills at the time were lacking

  • I wanted something that had aspects of the outdoors, though still something hinting at the inner thought processes that go on within, and also a social element.

  • Having found 3 logos I like, I thought I’d chance making a Frankenstein from them!

Draft no.1
Draft no.1
Draft no.2
Draft no.2
Final Logo
Final Logo
Draft no. 1
Draft no. 2
Final Draft
Here's what I learned from these stages of UI..
  • I had a lot of fun experiment with the colour palette I would eventually use! Seeing how some colours that don’t conventionally “work” with other colours when used right can add to a palette.

  • I also learned a lot from the making things more uniform in the choosing of the UI elements, keeping things rounded, of similar sizes, or within the same icon family.

  • Finally, as stated above the logo was a challenge for me, but a very fun one which I’m happy with how it turned out. I’ll definitely be spending more time in the future building my illustrating skills, so I can create these kinds of things from scratch!

User Testing!

User Testing
User Testing

Testing this time came with its surprises! In my attempt to find folks to test, I wrote a post r/socialskills on reddit inquiring if anyone was interested in testing it with me.

  • I got over 270+ replies from folks interested in helping! I’ll leave a link to the post below!

  • This also confirmed my hypothesis that users out there would be interested in such a service. It was quite reaffirming, helping me to realise to trust myself and what I design.

Testing Goals
  1. The first goal of my testing to test the usability of the app and find any possible usability problems, also test the copy writing to see users understand the concepts

  1. Second was to validate whether the approach I’ve been taking towards the easing back into social interactions was an appealing one.

Some patterns from the testing...
  • The main pattern was that of various UI errors I had made. For example, the opacity of the prompts that were available to be used (level 1) and the remaining ones. (levels 2-5)

  • The second pattern would have been the fact of the prototype not being extensive enough for users to get a full idea of how the service would work. ‍

  • The final pattern was more so a reoccurring suggestion of having a stage for people to complete prior to getting out of their house, ie. grounding techniques as something to prep them for going out.

Some simple fixes after the testing...
  1. Adding the names to the bottom icon navigation bar and updating the UI of the cards

  1. Making a better distinction of the prompts which are active and inactive.

Before
After
Before and After Testing Fix no.1
Before and After Testing Fix no.1
Before and After Testing Fix no.2
Before and After Testing Fix no.2
Before
After

One bigger fix would be adding the full capabilities to the app, allowing users on the next round of testing to be able to fully use the app

Conclusion

Concluding this project, it was encouraging that my hypothesis was confirmed in the huge response I got from people showing interest in the app and wishing to test it.

This project really opened my eyes to how different the UX / UI process can be each time you undertake a new project. It was nice to think of different approaches to say, the generative interviews for example.

As there are always areas to improve, this time round it would have been my testing skills. I'm slowly but surely crafting my questioning style and allowing for people to open up more when using the app more and allowing them to speak their mind to allow for as many insights as possible.