Catholic Charities of Santa Clara County Case Study

THE CHALLENGE

CCSCC had a static website with service descriptions and lists (shown below) that are not classified by client interests and need. Users found it hard to search a program or a service from the descriptive and intimidating list. Matching the user with an appropriate program based on their needs was a challenging task.

Another issue was that the Catholic Charities staff was unable to keep a record of how the lives of their clients improved after these services were provided to them.

THE SOLUTION

An intuitive, visually engaging and user-friendly application which would run on both web and mobile responsive platforms.
Clients would respond to a few simple questions to query them on their immediate needs; and based on this input the client would
be presented a user-friendly list of the names and other information of CCSCC programs which might serve them.
The app would also be able to track the status of these clients, the help they received and track their improvement.

TEAM

Backend developers x2, Full stack developer x1, Front-end developer x1

User Research techniques: Interview and Field Study

We interviewed clients, case managers, stakeholders and receptionists to get a good understanding of their pain points and issues with the current system.

PERSONAS

The primary users of the app were individuals with low income and typically possessing limited formal education.
Majority of these users were homeless or refugees and those living below poverty line. The secondary users were case managers,
service providers and receptionists who would handle the primary users. Analyzing the data from interviews and field studies we developed some personas for the project.

Information Design

The initial concept of the project was to build a tool that would allow clients to determine their needs easily and be referred to Catholic Charities services based on such needs and eligibility requirements. The initial project idea was referred to as 'Individual Opportunity Plan' and identified six major areas of need.

User Flow

After we had a solid grasp on user behavior, pain points, and personalities, we brainstormed ideas to address the problem. Based on our ideation sessions with the case managers and IT Director, we progressively built a process flow understanding each interaction at a time.

Process Flow

Using white boards over software tools helps the interactions become visible and transparent to the team, as everyone gets to ask questions during the process.

Initial sketches

Being the lone designer on the team of developers, it was challenging to convince them to allot a fair amount 
of time for prototyping. Although we were on a short timeline, I encouraged them to participate in prototyping stage and
understand the visual layout, hierarchy, and positioning of the elements before moving to development.

Prototypes

TECHNOLOGY STACK

The team decided to go with HTML5, CSS3, JavaScript, Jquery and Bootstrap on the frontend.

HTML pages are rendered on the server side using Node JS and Express. MySQL database is used to store all the data and information, which is aesthetically presented on the Frontend.

Front End: HTML5, CSS, Javascript, jQuery and Bootstrap
Template Engine: EJS
Application Framework: ExpressJS
Back End: NodeJS
Database: MySQL

LEARNING AND OUTCOMES

I learned from this project that it is important to have customers and client's feedback at every 
possible stage of design and development, which provides a great way to track our progress and know if
we are heading in the right direction.

The app performed better than the traditional listings approach. We tested the app with 10 users at the CCSCC location in San Jose.