Helping Hand — A UX/UI Case Study

17 min readSep 14, 2021

Roles: Product Designer, UX Researcher

Project duration: 2 weeks

Introduction

What is homelessness?

“The definition of homelessness means not having a home. You are homeless if you have nowhere to stay and are living on the streets.” Homelessness also means people who don’t have a permanent home or roof over their head. This includes those who are sofa-surfing, staying in hostels, night shelters, bed and breakfasts and any other type of unsuitable temporary accommodation. People who are squatting, at risk of violence or abuse in their homes or living in poor conditions that affect their health also count as homeless.

Homelessness can affect a wide variety of people for a wide variety of reasons. According to Shelter.org, those most vulnerable to becoming homeless are:

Leaving home for the first time or leaving care
pregnant with nowhere to stay when the baby comes
struggling to live on benefits or a low income
from abroad without the right to claim benefits
an asylum seeker or refugee
leaving prison

How has it changed over the past 10 years?

According to data collected in 2019 by Our World in Data, the number of rough sleepers in England alone has increased by more than 250% since 2010, despite England being the world’s sixth biggest economy. Homelessness is a a persistent and growing issue. In 2010 there was an estimated 1,768 people sleeping rough on any given night in, but this had increased to 4,751 by 2017 as seen in the graph below.

By 2019, there was an estimated 4,266 people sleeping rough, which had decreased by 37% by the autumn of 2020. Despite this, the 2020 figure was still “52% higher than the number of people counted as sleeping rough in 2010. Rough sleeping has increased steadily over the last decade.” Although there are statistics for rough sleepers, there is no national figure for how many people are homeless across the UK. The Crisis charity states that “this is because homelessness is recorded differently in each nation, and because many homeless people do not show up in official statistics at all.”

What impact has COVID-19 had on homelessness?

COVID-19 saw a huge decrease on homelessness/rough sleeping. The drop was due to the impact of the governments ‘Everyone in’ scheme which saw “37,000 people brought into hotels and emergency accommodation to protect them against the pandemic. However despite the scheme, the partial figures still saw 2,688 people spent the pandemic out on the streets. A 2021 report from the Public Accounts Committee highlighted how the ‘Everyone In’ scheme exposed the true extent of rough sleeping prior to the outbreak. The report also found that the number of people who were helped under the scheme was nearly nine times the last official estimate of people sleeping rough, and that the government has still not yet set out a plan to achieve its manifesto commitment to ‘end rough sleeping by May 2024’.

What am I going to do?

The brief for this project is — ‘create an app that aims to eliminate pressures associated with homelessness. Propose a user journey that supports and educates user’s on relevant material that can help a homeless person successfully integrate into a local community. The app needs to be easy to use and engaging; think about hardware-enabled features like geo-location services, NFC, Bluetooth, social media capabilities etc., as ways to enhance the capabilities of the app.’

In this case study, I will be discussing my project, the objectives, and present the following deliverables:

3 app screens: A home screen and 2 other screens.

Alongside this, I will provide key insights into each stage of the Double Diamond Process (the method I will be using), and detail my user research and design process. I will be looking at different apps and websites designed to help the homeless, and from there I will go on to identify pain points that users face, and implement design thinking in order to resolve these problems in a way that will meet user and business needs and objectives.

The problem statement:

People experiencing homelessness, or have just been released from care/prison/hospital, and have moved into new accommodation need a way to ensure successful local community integration.

Hypothesis

What I am going to do/change and a prediction for the outcome of results?

In order to create a solution for the problem outlined above, I will collect and compile user, business and secondary research in order to create an app that people experiencing homelessness can use that will serve as an educational and support platform to help make certain tasks easier, and in the long run provide them with the building blocks to help get them off of the streets.

The outcomes I hope to achieve are:

A user friendly and engaging app
A smooth user journey
A platform that is educational and provides support/helps users to access real life support
An app that is accessible to users with visual, auditory or any other disabilities

Research Phase

Research Tools: Whimsical, Figma

Business Research

The first stage of my research was to carry out a competitor analysis — a method of collecting quantitative and qualitative data about a company’s direct and indirect competitors and their products (websites in this case). Direct competitors consist of companies that share the same industry, customers, and offer the same product, whilst indirect competitors offer a similar product but may be based outside of your industry or have a different target customer base.

A competitor analysis can shine a light on where a specific product stands out, helps to identify strengths and weaknesses, and discover what the reasons behind a competitor’s success may be. By using this research method, I can use the insight from the data collected to make informed UX design decisions.

I was surprised to realise how challenging it would be to find competing apps, as there aren’t many apps out there to help the homeless. After researching, I found 3 apps designed for the homeless that would be direct competitors — Street Link, Greater Change and Next Meal. I then chose Too Good To Go as my indirect competitor. The reason I chose this app was due to its map feature and the feedback it provides to users when carrying out actions.

Competitor Analysis

In terms of design, all four of the apps share a lot of common. They all make use of clear call to actions and have simple, clean layouts. This especially makes sense in terms of the apps designed for rough sleepers, as the functions are for helping people who may be in dire situations. Making sure that the user journey is simple and easy to follow is critical.

Street Link, Greater Change and Next Meal all made use of hamburger menus which is common in mobile web and app design, whilst Too Good To Go has a fixed navigation bar at the bottom of the screen; which supports discoverability by informing users of the available functionalities/features without them having to click and navigate through a drop down menu. Another important feature that all of the apps (apart from Greater Change) contain is the use of GPS and Geo Locators. Users of Street Link can send out an alert with their location, Next Meal provides users with a list of support services in their nearby vicinity, whilst Too Good To Go provides users with a list or map view of nearby cafes/restaurants/shops based on the users current or chosen location.

Aside from Too Good To Go and Street Link, none of the apps have enough reviews in order to gain user feedback. This could be due to the lack of updates — the Greater Change IOS app was last updated in 2019, whilst the Street Link app had its last update in 2018, and has since developed a lot of bugs and issues. The lack of updates has meant that the app has become outdated, is no longer fully compatible with newer versions of IOS, and improvements are not being made to the usability of the app. All of these factors may contribute to a poor user experience. The app has a 2.3/5 rating from a total of 57 reviews — some of which can be seen below.

Image 1: 2/5 rating for Street Link on the App Store

Image 2: 2/5 rating for Street Link on the App Store

Image 3: 1/5 rating for Street Link on the App Store

Too Good To Go however, has a 4.9/5 rating from a total of 99.4k reviews. The majority of reviews concerning the usability of the app were positive as seen in the example below.

Image 4: 5/5 rating for Too Good To Go on the App Store

User Research

I decided to gather and use secondary data to gain a more detailed understanding of the problems people who are homeless face, as it was not possible to collect primary research for this case study.

One of the personal problems that people experiencing homelessness often face is getting access care.

“Why does everything have to be about accommodation? Full-time job? Help with mental health? Can’t get that because I’m not in full time accommodation, I can’t get accommodation because I’m not in a full-time job. It is always back and forth. And I’ve got to the point where I’m like, what’s the point?”

— Patient story, Healthwatch West Berkshire

Local Healthwatch across England spoke to 1,200+ people experiencing homelessness, and found three common issues were:

Difficulty accessing services due to not having an address, suitable identification, or don’t have enough phone credit to call to make an appointment. It can also be difficult for them to attend appointments or stick to health advice.
Difficulty registering with GP services. An address is not legally required in order to become a patient however, despite this, some GP surgeries will not allow people to register if they don’t have a fixed address. Local Healthwatch heard from at least 5 areas that were turning people away which was having a huge impact on those who were in need of healthcare support.
Difficulty getting holistic support. The organisation discovered that “people don’t feel their circumstances are understood by medical professionals, so they don’t get the full level of support they need. People want holistic support with their health, housing and employment all in one place.”

Apart from issues accessing healthcare, according to joyjunction.org other problems those experiencing homelessness can face are food and shelter insecurity, income insecurity and basic need insecurity. Shelter, food, and basic needs (such as warmth, dry clothes, water and food) aren’t always guaranteed everyday. This makes it more difficult for for those experiencing homelessness to overcome their situation when their basic needs aren’t being met.

The infographic below by Homeless Link displays the experience of homeless people compared to the general population.

With people often experiencing feelings of isolation, homelessness can also increase your chances of taking drugs or experiencing physical or mental health problems. Evidence suggests that the longer someone is in this position the more difficult it can become to get back on your feet. As someone’s problems become more complex, anti-social behaviour, involvement with the criminal justice system and acute NHS services become more likely.”

User Persona

User personas in UX are an important part of the design process, and based on qualitative user research. They are a way of provoking empathetic, user oriented thinking and help to focus on “what matters the most to the users by making us put ourselves in their shoes when making design decisions” (Nielsen Norman Group). By using the secondary research I had collected, I was able to create a persona that will allow me to make better design decisions based on the user’s behaviours and needs.

Ideation Phase

Ideation Tools: Figma, Whimsical, Miro, Invision Freehand, Pen & Paper

Mind Map

For my first stage of ideation, I decided to create a mind map. Mind maps are great for creating a visual representation of thoughts, concepts and processes during the early phases of projects. In my case it was particularly useful as it helped me to understand what the scope of my app would be, as well what the core mechanisms would be and ideas for features to include within the app.

User Flow

After creating a mind map, I had a much clearer idea of what services I wanted my app to provide. Moving on to the next stage of ideation and using the ideas I had come up with in the previous stage, I was able to design a user flow for the onboarding process, and a site map detailing the features that would exist with the app.

User flows are diagrams that help to map out the logical path a user should take when interacting with a system. They are visual tools that show the relationship between an app’s functionality, potential actions a user could take, and the outcome of what the user chooses to do.

During this stage it was important to keep the results from the secondary research I had collected in mind, as well as the user persona I created. This ensured that I was designing for the user and was always placing myself in their shoes, as empathy was a key point in this case study.

User flow for onboarding — created in Miro

Crazy 8s

Crazy 8s is an ideation technique that results in 8 different ways or variations to solve a problem. A timer is set for 8 minutes, which is spent sketching 8 different design solutions — one minute per design. It is a commonly used technique as it results in a lot of designs in a short amount of time, and non designers can also take part. However, after sketching these quick designs, I found I was unsure of what content would fill some of the boxes I had drawn. As a result, I decided that carrying out the Straw Man Proposal method would help me to refine my ideas into a more clear and organised layout.

Strawman Proposal

This method is part of ‘lean UX’, where all hypotheses are stated and discussed to quickly improve design solutions. This approach can include product managers, front-end developers and UI designers. Involving people in these roles can help with understanding any technical constraints that may be a part of the project.

The method works by gathering colleagues and carrying out a 10 minute iteration on designs independently. After the time is up, everyone gathers and discusses the disadvantages of each design. In my case, I sketched a design for the home screen and spent 10 minutes refining it.

Staw Man Proposal — Created in Invision Freehand

Wireframing Phase

Design Tools: Figma

For this stage of the project, I designed the screens on both iPhone 8 and iPhone 11 frames, as I needed to keep in mind the fact that people who experience homelessness may not necessarily have access to the newest and latest smart phone models, but this shouldn’t be an assumption as people’s situations will vary.

Low Fidelity Wireframes

Following on from the sketches I created for my crazy 8s and straw man proposal, I created three low fidelity wireframes for the screens of my app that I wanted to focus on — the home screen, map, and profile/account screen. I ended up taking elements from previous sketches I had drawn in order to come up with a layout I was happy with. It was important to keep the research results I had collected in mind in order to make sure that I was solving the initial problems.

Mid Fidelity Wireframes

Moving on to the next stage, I began to develop my low fidelity sketches into mid fidelity wireframes. During this process, some design changes were made. In image 1, I drew squares in the header as placeholders to represent where the icons for ‘Log-in/Account’ ‘Wishlist’ and ‘Shopping Bag’ would be located.

I made use of icons — especially for the navigation. However I chose to use text as an addition for accessibility purposes with the reasoning that screen readers will be able to pick up the navigation bar options. The text also provides clarity for users who may not understand the meaning of every icon.

In order to keep my layout as consistent and accurate across the different screens I was working on, I used a baseline grid and followed IOS guidelines. I utilising grids and guidelines to sure that any padding, margins and elements were well aligned and equally spaced out.

Mid Fidelity Wireframes — created in Figma (iPhone 11)

High Fidelity Wireframes

For the high fidelity wireframes, I replaced all of the placeholders with imagery, and added the colours I had selected for my palette, as seen below. I adjusted the layout for the Account page, as I realised that the horizontal blocks (seen in the mid fidelity wireframes) were taking up unnecessary amounts of real estate, especially since the only information inside the blocks is a single line of text. By reducing the size of the blocks, I was implementing Hick’s Law and reducing the amount the user would have to scroll down the page to access all of the information presented.

Final Deliverables: Home Screen Map and User Account Screen

Horizontal Scroll on Home Screen (iPhone 11)

UI Phase

Design Fundamentals

The laws of UXUI played an important part in my designs, starting from the first sketches created for the Crazy 8’s and Straw Man Proposal stages of the process. The laws I focused on were:

Hick’s Law — To avoid prolonging the user journey by extending the time it takes to make decisions, the furniture present on each screen was minimal, and included only necessary information. This lowers the risk of potentially overwhelming users. The use of this law can be seen in the minimalist layout of each screen, where only the necessary information is presented the user.

Law of Common Region — This law states that humans naturally perceive objects as organised patterns — so elements tend to be perceived into groups if they are located in the same region.

The use of this law can be seen all throughout each screen — each category of information is broken down and grouped together in sections that can be scrolled through horizontally (on the home screen). The use of borders and background colours are utilised to make it clear which piece of information belongs to which group.

Aesthetic Usability Effect — Huruso and Koari’s study resulted in findings showing that users often perceive aesthetically pleasing designs as designs that are more usable and functional on the initial look. This means that users have a more positive emotional response towards any visual design, making them more tolerable of minor usability issues. The colours , imagery and icons I selected for my app help it to look clean and visually pleasing.

Jakob’s Law — Jakob Nielson’s study concluded that users transfer their expectations from one familiar product to another, so they will expect them to work in the same or similar way. To execute this law, I looked at the layout used by the app Too Good To Go. Despite not being a direct competitor of my app, it is an app that the homeless could potentially use due to the low costs of food being given away by restaurants/shops at the end of the day. The layout is similar in terms the ability to scroll horizontally.

Typography

I decided to use the Roboto typeface (a san-serif) as it is free, and very easily readable in all of its various font styles. It is also transferable from IOS to Android, which prevents an alternate font from having to be selected if this app was to be built on Android as well as IOS. This was important to keep in mind, as not all people who are homeless would necessarily have access to an iPhone.

I used a range of different font styles as seen in the typography guidelines below — specifically ‘Regular’, ‘Medium’ and ‘Bold’. Alternating between font styles and adding kerning allowed me to create hierarchy where needed on different sections of the designs.

Style Guide

WCAG, Accessibility, and Inclusive Design

Accessibility guidelines were particularly important for this project, as according to the Independent, new figures show that “the number of ill and disabled people becoming homeless has surged by 53 per cent as local councils are increasingly unable to provide them with support”. This means that an increasing amount of disabled people are being made homeless, so it was important to take steps to ensure that my design solution was accessible.

I selected colours with a high contrast so that they were accessible to users with visual impairment, and used font sizes of 14px and above, with the exception of 12px which was used for small labels. As well as this, it was important to stay with the target sizes for call to actions (44px), so I tested my mobile screens using Figma Mirror during the design process to check that elements such as icons and buttons were large enough to tap on easily. Another solution I had in mind was to allow the user to select font sizes during the onboarding process (which could later be changed in the app settings if needed) to allow for flexibility.

The screenshots below display a Figma plugin called Color Contrast Checker, which assisted with making sure colours and fonts met the accessibility standards.

1 — Home screen, 2 — Map, 3 — Account/Profile Screen

Conclusion

Overall, this case study was a big learning process. I learned the importance of iteration — it’s rare to reach the final design solution on the first go. By going back to my research and ideation phases, I was able to realised that my original idea (to create a food collection app) wasn’t solving the original problem. Once I had realised that, I was able to get past my block, and proceed to design a solution that does solve the problem stated. I am happy with the final outcome from my research and my final design solutions. On further reflection, the app could be developed even further. In my research I discovered that many people who are homeless are declined by GP Surgeries — this was also the case with banks until fairly recently. HSBC now allow those without a fixed address to open a bank account — so money/finance management resources could also be something to include with the app.

If this were a real app I was designing, it would be good to collect primary research by interviewing the people or charities who provide care and assistance to the homeless. Interviews would have also helped me to gain more qualitative data, as I would have been able to see things that qualitative data and secondary research doesn’t reveal. I would also like to design the app for android too, as they can be a more affordable option for many in comparison to iPhones.

If I had more time or the ability to launch this project and collect user feedback to support my hypothesis, I would like to user test with the target audience of the app. This would provide the opportunity to go back and reiterate some aspects of the app to ensure the user journey is as smooth as possible, whilst also helping the people it was designed to help.