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
