Spirit Up
A platform to help & support people who may fall victim to homelessness.
Context
Overview
Spirit Up is an iOS app that consists of accommodating information for people who may fall victim to homelessness.
Its key features are to help people find food, shelter, and employment.
​
My Role
User Researcher and UI Designer.
​
Project
End-to-end conceptual project.
​
Timeline
2 Weeks
RESEARCH
Project Brief
Research the pressures associated with homelessness and create a platform for people to get help tackling and reducing the daily pressures they face.
​
Achieved this by:
​​
-
Looking into the leading causes of homelessness.
-
Pulling out users' pain points through interviews.
-
Comparing apps currently on the market.
I used this data and gained key insights that helped me construct an application allowing users to cope with homelessness and prevent falling victim to it.
Problem
People suffering from homelessness due to their current circumstances have a difficult time finding what support is accessible to them and what they can do to avoid becoming homeless. SOURCE
'Reports state 58% of people did not receive any meaningful support.’
My Hypothesis
Create a platform that will help homeless people find shelter, employment and meals easily, helping them to better their current situation. SOURCE
‘People want all-rounded support when it comes to their health, housing, and employment all in one place.’
Background Research
Homelessness is the incapability of having somewhere permanent, sufficient, or safe to reside in.
It is an ongoing issue worldwide and can affect anyone at any place or time.
The leading causes of homelessness are:
​
-
Lack of affordable housing
-
Poverty
-
Unemployment
​
You can still be homeless if you have a place to stay but it is unsuitable or you do not hold the right to stay there, for example, squatting or staying in poor conditions. SOURCE
Research Findings
Although there is help available out there from charities and local councils, there are many reasons why people do not/cannot use these services.
​
People feel misunderstood
People feel medical professionals do not understand their circumstances, so they don’t get the support they need.
​
Difficulty registering at the GP
GP surgeries do not allow people to register without an address, even though this is not a legal requirement. This dramatically affects homeless people who require medical advice or healthcare.
​
No set location
As homeless people do not have a set location, they miss out on services such as free meals from shelters, due to the lack of knowledge of what's around them.
Competitor Analysis
None of the competitors provided a package of all the services users required to create a space that had access to all these resources in one place that was easily accessible for users to use.
Competitors
Key Features
Competitor Insights
Only Centrepoint and Beam offered help with employment, housing, and a general help/advice section.
Only Next Meal offered people a place to find food.
Only Beam offered a section on money help and how to save.
All the apps had desktop versions, Street link also had a mobile application.
EMPATHISE
User Interviews
Due to the sensitivity surrounding homelessness and accessibility issues, I found it difficult to collect user data from interviews or surveys.
However, I was able to overcome this problem by finding previously conducted interviews and surveys online. SOURCE
User Interviews: Key Insights
People emphasized the need to be able to access any basic information and online services that will help them with their questions and issues.
‘We need information on jobs, and more information on chemist opening times for prescriptions.’
Although there is support these services are not signposted well enough and due to the lack of knowledge people have, they do not get to make use of these services.
‘It’s there, but unless you know where things are, it’s kinda pointless.’
People without a permanent address get turned away from shelters or cannot register with a GP as they can't prove their homeless status.
​
‘I couldn’t register with a GP until I had a permanent address.’
People were treated with prejudice by health services when it came to their addiction problems and weren’t guaranteed the service that they needed.
‘I feel like I’m being judged by them, even before I say anything.'
User Persona
From the data so far, the key services people deemed important were:
​
-
Finding shelter
-
Finding food
-
Finding employment
​
I then created a primary persona to get a clearer insight into who I am designing for & what needs/wants are.
IDEATION
Mindmapping
I was able to put all my ideas and thoughts out there to get a visual representation of how my design will function.
Crazy 8's
The Crazy 8’s allowed me to freely sketch out any design ideas that popped into my head. I was able to design spontaneously without any restrictions or constraints.
DESIGNING + TESTING
MID-FID
WIREFRAMES
I created mid-fidelity wireframes to see how my app's interface would look and what features should be added.
​
I tested the wireframes with users to see which design they felt was more useable.
I took two sketches from my crazy 8's activity which I felt are the most functional and got users' feedback.
Users liked screen 1 more as it showed the main resources instantly instead of personal resources.
They felt there was more convenience in this.
The menu bar has too many icons making the experience overwhelming and complicated.
Should be an easier way to view the map, such as a button on each screen for people to find services around them more quickly.
Add an audio speech button to the search bar to help people with disabilities.
This section should be condensed. Less information on the screen.
​
''This page was quite overwhelming, I had to look for a while and absorb a lot of information.''
Feedback & Improvements
-
Changed the home screen to services and resources homeless people are looking for. This will allow them to find what they’re looking for faster.
​
-
Added an audio speech button to the search bar to help people with disabilities.
​​
-
Made the enquire section more condensed with relevant information.
​​
-
Added button to view the entire map to set locations or see all services available in the area.
​​
-
Added 4 main icons to the menu bar instead of 5.
Final UI:
The Solution
FEATURE 1
Easily Find A Room Or Shelter.
​
A few simple steps to take to find a room or shelter. Designed for a convenient experience to reduce confusion and increase positive user experience. Also a clear indication of what is available to avoid disappointment and frustration.
FEATURE 2
Finding Foodbanks Using Map Services.
Using the maps services you're able to find food by clicking on a pin or searching nearby. Also clearly indicates how many meals are left, and you can reserve directly in the app.
FEATURE 3
Section For Jobs & Advice.
Find available jobs, mentorship, or help directly in the app with instant booking & scheduling.
Book, manage and track all your interviews and appointments at glance.
Prototype
Testing
-
‘I like the look of the screens but sometimes I just want to see what services are around me faster, there should be a way to access the map quickly and directly from the home screen.’
​
-
‘The design is clean however there was no way to go back from the job search screen to the homepage.’
​
-
'Having double search buttons is confusing.'
​
-
'CTA buttons may be inconvenient to users as they may be hard to click.'
Final Iterations
Made the 'View all' CTA button bigger so it is easily clickable. More accessible for homeless people to use who may be sleeping rough in the cold as the smaller button would be difficult to navigate.
Changed the UI appearance as well as replaced the search CTA with a profile button. Also changed the menu bar and added a map icon so you can access the map faster.
Style Guide
DESIGN FUNDAMENTALS
UX/UI Laws
UX/UI design laws were used throughout my design process to ensure my design is useable and functional.
Aesthetic Usability Effect
-
Clean design with the apparent use of negative space.
-
Use of colour and boxes which coordinates with each different section.
-
Colours are used as a key so users can easily find what they're looking for.
Law of Common Regions
-
Key sections are placed into their own colour-coordinated clickable boxes. Easy for the user to locate and access.
-
Each specific section is grouped with clear headings and individual clickable boxes.
Hicks Law
-
The home page is clean and concise with minimal information.
-
Each section is boxed and clearly labelled.​​
-
Simple and clearly labelled choices give the user a better experience.
-
Use of white space for a less cluttered interface.
Millers Law
-
Resources are split up and put into groups which are easier for people to consume.
-
Carousell for resources, however, only 3 are shown at a time on the screen to avoid overwhelming the user.
Law of Similarity
-
Ensured links or buttons are visually different from normal text by making buttons larger with arrow icons and of different colours.
-
Also made sure any clickable link is bold and underlined so the user knows it is clickable.
WCAG & Accessibility
Creating an accessible and inclusive design was a priority for me, especially considering that there are homeless individuals with disabilities who may not have had much experience with technology. I implemented relevant features and design elements to ensure that the application is usable for everyone.​
​
What I did:
-
Optimised font sizes, with 14px being the standard, except for the navigation bar labels which were set at 12px, supplemented by clear icons.
-
Ensured button sizes and search bars met minimum touch area requirements, tested through Figma Mirror app to ensure ease of use and accessibility.
-
Highlighted errors in red, including incorrect search bar inputs, to facilitate easy identification and resolution.
-
Designed with clean and concise aesthetics, utilising white space to prevent user overwhelm.
Colour Contrast
To ensure accessibility for users with visual impairments, I carefully selected colours in my design that meet accessibility standards.
Using Figma's built-in colour contrast checker, I checked that all colours met at least AA standards. If any colours did not meet these standards, I revised my designs to ensure they were accessible to everyone.
Takeaways
In conclusion, this project was a rewarding experience that allowed me to step out of my comfort zone and design an application that could benefit a minority group of individuals.
Carrying forward I will...
1. Conduct more user research/testing.
I plan to conduct more user research and testing to gather more accurate and corroborated data from homeless people. This will ensure that the application is designed to meet their specific needs and preferences.
2. Iterate and test my design more.
I will iterate and test my design more rigorously. This will involve testing earlier on in the process and with real-life users to identify any issues and fix them as soon as possible.
​
3. Validate my hypothesis.
I will validate my hypothesis by testing the final design with the homeless community to gather feedback and improve the application. This will help me to identify what works and what needs to be improved to ensure that the application is useful and beneficial to the intended users.