Case Management System

The homeless crisis in LA is real and continues to deteriorate. In order to address this crisis, Better Angels is taking a holistic approach, tackling five pillars at a time: Prevention, Community, Services, Shelter, Housing. In this case study, I describe my role as a UX/UI designer on a team that includes a project leader, a director of shelter operation, and a senior UX/UI designer, all of whom are involved in developing case management systems that caseworkers will use for sheltering services.

Role

UX/UI designer

Timeline

02/2024 - 03/2024

Project Type

Volunteering

Design Type

Desktop Interface

Responsibility

Task Analysis
Wireframe
UI Kit
High-Fidelity

Team Members

Project Leader
Directer of Shelter Operation
Senior UX/UI Designer
UX/UI designer (Myself)

Project Overview

Some organizations provide sheltering services for unhoused people in LA. In these services, task management is primarily conducted through paperwork, which leads to process conflicts. In this project, the following menus will be mainly developed for the case management system.

Bed Roster

Allows real-time visibility of bed occupation, enabling shelter workers to accurately understand the availability of each bed.

Waiting List for Bed Utility

Allows shelter workers to track clients seeking shelter beds and reserves available beds for them.

Client Forms

Enables the completion and management of client forms required when clients enter and exit the service, allowing caseworkers to manage all types of client information in one place.

Voucher Applications

Facilitates the application process for housing vouchers and allows caseworkers to update clients on the status of their applications.

Problem Statement

Both shelter workers and case managers face challenges in managing client tasks and streamlining processes due to the lack of web case management systems in their workload and the use of multiple systems to manage client cases.

Solution Statement

In response to these problems, we will develop case management systems that provide a smooth workflow for both shelter workers and case managers, allowing them to manage their workloads more efficiently and reduce conflicts.

Grasping the context of sheltering services

Firstly, I had a meeting with the project leader and the director to understand the situation around the sheltering services. Then, we moved on to design the interfaces of the main page for the following menus: Bed Roster, Waiting List for Bed Utility, Client Forms, and Voucher Applications.

Here is the design brief I received from the project leader.

Design Brief

Low-& Mid-Fidelity

Once I received a design brief from the project leader, I started creating low-fidelity versions for the pages. Then, I developed them into mid-fidelity. After creating the mid-fidelity versions, I had them reviewed by the project leader and the caseworker, and iterated on the design process within the mid-fidelity stage.

Developing UI kit

Since Better Angels already has a UI kit for mobile screens, I developed a UI kit for desktop screens based on the mobile UI kit.

Typography

Color

UI Elements

High-Fidelity

Here are the high-fidelity pages I designed for the Bed Roster, Waiting List, Client Forms, and Voucher Applications.

How Can We Elevate the User Experience?

Providing a smoother workflow for both shelter workers and caseworkers, especially for the Bed Roster, Waiting List, and Client Forms, would enhance the user experience.

Reconsidering User Flows

Once I created the high-fidelity prototype, we had a discussion to ensure that our user flows worked effectively, and we iterated on the high-fidelity prototype.

Should the bed roster and waiting list be on separate pages? Is having them on separate pages the best way to enhance user experience?

Allows real-time visibility of bed occupation, enabling shelter workers to accurately understand the availability of each bed.

Is it better to have a client data base?

There are several steps in the entire process for a client, from entering to exiting the service. While clients are at each step, it is beneficial for caseworkers to be able to oversee the entire process for each client on a single page, to ensure they know the client's current status.

Combined Bed Roster and Waiting List

Be able to drag and drop items between the Bed Roster and the Waiting List.

Before

After

Develop Client Database

Manage all client information in one place.

Before

After

Next Steps

・Create additional pages branching from the main menu we have already developed, enabling the completion of tasks within each menu.
・Develop additional menus as required to meet the needs of the caseworkers.
・Design a mobile interface since the project is transitioning to responsive design.

Takeaway

During this project, I discovered the significance of user experience in design. As a UX/UI designer, I recognized that thoroughly understanding user experience is essential for creating effective web platforms. Moving forward, I will prioritize this understanding to enhance my design capabilities.