'Worth' Webapp
March 2024
This project was part of a third-year module at my university. The brief involved choosing a health-related topic then creating and designing a website or webapp in the field of the chosen topic. We were advised to pick a topic that we personally knew someone who was involved in it in some way, as the project involved real user-interviews and testing.
I chose mental health as it’s something that I myself have struggled with and I know plenty of my friends also do, the person I chose to interview is a close friend of mine who was diagnosed with depression a few years ago.
My goal was to create a relaxed, informal space where people struggling could go to speak with one another and share their experiences and solutions.
AnimationsSplash screen transition
‘Speak with a professional’ persistent tab pop-upGroup information drop down
PitchMy pitch for this project involved creating a chatroom-based webapp, this is something that already exists in multiple forms, most of which hinge on a professional, therapy-style medium, however, as someone with a personal attachment to the topic through myself and close friends I felt there was a gap in the market; I aimed to create a relaxed, non-committal space where people can talk with other people who struggle with the same issues.
InterviewThis project involved communicating and prototyping with a real user, as a result, I interviewed a close friend of mine who was diagnosed with depression a few years ago; through this interview I found that she had attended a course that functioned in a similar manner to my webapp pitch, it was a professionally-mediated call where the primary goal was to get multiple people with depression together to talk about their experiences and what worked for them.PersonasAfter my interview and talks with group members I created my three personas for this webapp, primarily aimed at an early-adult audience, these personas ranged from people with diagnosed mental health issues to people who were questioning whether their issues were mental health related or not, inspired by my own interview and interviews from other members of my class. These personas allowed me to design with a target audience in mind and make decisions informed by what would be best for the personas.
Sketches and wireframes
Informed by my interviews and personas I began making sketches and wireframes of paths through the website and how users would achieve their goals.
FeaturesThe primary feature of Worth is the chatrooms where users can go to speak with one another to share experiences and solutions. This section would have intricate filtering and grouping based off of a user’s chosen tags, if they are logged in the available groups would be pre-filtered to show what’s relevant to them, otherwise, an anonymous user would be prompted to select tags for which they’d like to see groups for.
Secondary features include the forums page and ‘speak with a professional’. The forums feature has it’s own section of the webapp where users can go to find/create a forum post, then view and comment, etc on it. The ‘speak with a professional’ option appears initially on the homepage as a pop-up, this comes from feedback in which I found it made more sense for this feature to appear on the homepage and completely separate to other content in the form of a pop-up.
IllustrationsThe illustrations were a huge part of the identity of this app design, I introduced them to further the relaxed visual I was aiming for.
The illustrations use a pseudo-geometric, cartoon style which allows for a lot of expression in the characters through use of minimalism. Expressions and positions were inspired by my interviews, featuring people just getting by and activities that my interviewee said helped a lot during times of crisis, such as music.
Development of homepage
Initial high-fi from wireframeAdding illustrationsReworking illustrations
Restructuring content for better hierarchy/readingRestyling homepage to be less ‘box-y’Introducing new illustrationRestructuring elements to be more cohesive