Designing a Homeless Shelter Management System
How Family Promise of Spokane is disrupting the shelter industry and what I learned while developing its new shelter management application
Family Promise is an organization dedicated to solving the problem of homelessness and helping low-income families become independent.
One of the big issues with operating a homeless shelter is simply the amount of paperwork and logistics you have to deal with to check in a guest. Keeping track of how many beds you have available also becomes cumbersome when you’re tracking everything manually.
The application we developed aims to solve some of these problems and provides a more streamlined approach for checking into the shelter.
Dealing with technical challenges
For this project, I took on the role of design lead. There were a lot of changes that needed to be made before our app was ready for real users in the wild.
Our team was under pressure to get everything ready so we could have the application shipped by the end of the month. In terms of design, we needed to create a more user-friendly experience. The current experience was very unintuitive and confusing to potential users.
One of the first updates we had to make was to simplify the content throughout the application so that titles, text, and alignment were all consistent. We also needed to make navigation easier so much of the user flow had to be restructured. Another addition we made was to give guests the ability to edit their information from their profile. For our design library, we decided on Ant Design to handle most of our styling updates.
Ant Design makes developing a good-looking, intuitive user interface as simple as importing the element you need into React and then applying those elements as needed in your application. The following code is an example of how we used the library to implement an avatar with a dropdown of menu items linking to the user’s profile.
const goToProfile = () => { history.push(`/familyprofile/${idRoute}`);};const menu = ( <Menu> <Menu.Item onClick={goToProfile}>Profile</Menu.Item> <Menu.Item onClick={handleLogout}>Logout</Menu.Item> </Menu>);<Dropdown overlay={menu}> <Avatar size="large" icon={<UserOutlined />} /></Dropdown>
Shipping our application and what’s next
Overall, I’m very proud of what our team was able to accomplish in such a short amount of time. We were able to successfully ship our Shelter Management System and the stakeholders were impressed with the amount of progress we made.
Our live app's main features include a user flow that enables supervisors to check a new guest in using DocuSign — allowing for a more quick and efficient check-in process, analytics that tracks how many beds are currently available in the shelter, and a clean, intuitive user experience throughout.
In the future, some more features could be implemented like tracking services provided by the shelter and a goal tracker that guests can use to keep up with what they need to do daily to improve their housing situation.
I’m thankful that I got to be a part of this project. It’s a really great feeling when something you worked so hard on is being deployed and used by real people to make a difference in their life.
