Brief

Find out what charity needs and design for them.

Role

UXUI, Motion Graphic Designer

Duration

4 weeks

Tool

XD, Premier Pro, After Effect

Overview

My group designed a website where people can communicate together during the pandemic. The aim of this website is for mental well-being for young people in the Battersea area youth club. So the visual language is designed to give the user a soft, intimate feeling.


Group

Lisa, Daisy, Hannah, Ella, Soyoung

Introduction video

Background Research

Caius House is a charity and youth club that has served the Battersea community for over a century. In 1887 some undergraduates and fellows from Gonville and Caius College Cambridge rented a house in Battersea. They started a College "settlement" where former undergraduates from the College lived and ran a range of clubs for residents. This research tells me that Caius house has a long history and is closely related to the Battersea community.

The staff of Caius House said they needed more promotion of Caius house, so we went to see what their brand is and how we can change them. CH has a colour scheme, but the tone is rapidly changing. Also, there are three so different colour codes which make it hard to recognise. CH is not only for very young people, but it is also for young adults and even parents of the youth. But the design of the website reminds me of the nursery. So I decided to design the right tone of voice so that they could adapt their contents on certain pamphlets.

We did a competitive analysis to find the right tone of visual language for the youth club. We researched the Wealdstone youth workshop, The Brighton school, and a project by Steve McQueen. I noticed they had used playful and simple visual language that could attract youth and adults. However, those are the way to promote the club, not fix the problem they already have.

User Research

We interviewed one of the staff to identify more practical help we could give the youth and the staff. Before the interview, we thought promoting the Caius House was more important. However, staff and youth need help connecting. Likewise, the staff needed help to provide the service they already had. Among the service that Caius House has, the youth especially need mental support as they are physically and mentally isolated during the pandemic. So this gives us that the audience(user) is not only staff but also the youth.

For young people, being in a society and keeping them social is very important. So forming a community online was crucial. However, forming a community needs enough people, so more than the youth and staff in Caius House are needed. Youth should feel they have a community they can rely on every time they access the online place. So we decided to expand the users to the Battersea area. Caius House has a long history in Battersea; according to our competitive analysis of the youth club, other youth clubs in the Battersea area are experiencing the same issue as Caius House.

What does the charity need?

  • Raise awareness

  • Reach out to young people

  • Form an online community

Competitive Analysis

Our group researched the current mental health support and community websites in terms of how we can make them more helpful to the youth club. Then, by using the app ourselves, we realised the mental health app mainly focuses on anxiety and meditation, but the youth need to form a community and meet new people. So we decided to change our approach to the chatting app. There are many chatting apps, but in any case, young people have a higher chance of getting exposed to crime or dangerous people. So there should be a system to filter out the users. Also, those apps' UI is more private and based on 1:1 conversations. It would be helpful for the therapy session, but having an open group conversation needs a bit of change.

User Persona

To design for both youth and staff, we identified two different persona.

User flow

We wanted a simple user flow so that the staff and youth don't get stressed by contacting each other. We removed many pages to meet that goal. The most important thing is that the community page should be the first page when users access the website(app). The step to the online conversation should be as similar to the actual conversation on-site.

Wireframe

Prototype

Design System

When designing the interface, our group thought it was essential to use the original colour scheme and font of Caius House. In addition, we made the UI round and approachable so that the user would feel intimacy.

Key feature

Guidelines

Sign in/up

Profile

Homepage (Chat page)

Private chat

Conversation box

Drop down bar

Conversation of the Day page

Previous
Previous

Feelinked (UX/UI)

Next
Next

Home (Game design)