My Well Being

Goal

'My Well being' is a service navigation app to help individuals receive aid from Catholic Charities of
Santa Clara County (CCSCC). CCSCC is a 60-year-old social service and change organization with 80 programs
and services in 60 locations across the United States and serves 54,000 disadvantaged residents annually.

The goal of the app was to make the services more accessible to the diverse, multilingual population
so that they can better engage them in transforming their lives.


The Challenges

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 image below is the list of programs and services that their clients
accessed before this project.



The Solution

An intuitive, visually engaging and user-friendly application which would run on both mobile and web 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

My role: UX/UI designer, Front-end developer, Team Lead.

User Research

User Research techniques

Interview, 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.


Design Process

Information and Interaction 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.

The six areas of need also called as the Self-Sufficiency Matrix included
Housing, Food, Healthcare, Education, Income and Employment.

User Flow

After we had a solid grasp on user behavior, pain points, and personalities, we brainstormed ideas
to address the problem by creating a journey map with our personas. Based on our map, we progressively built
a process flow understanding each interaction at a time.

Process flow

We used white boarding to draw out the process flows. The reason for using white boarding
instead of a software application is that the interaction and information design becomes clearer and more transparent
to the team, as everyone gets to ask questions during the process. It helps the team to be on the same page.






Prototypes

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 jumping onto development.


Low-Fidelity Prototypes

We used pen and paper method to create rough low-fidelity prototypes. We were able to gain some really important
feedback from the clients that would have been difficult had we directly shown them the polished hi-fidelity prototypes.



Mobile UI paper prototypes


Desktop UI paper prototype


Hi-Fidelity Prototypes

Once the paper prototypes were in good shape for both the clients and the team, I went onto create
hi-fidelity interactive prototypes using Axure RP and sketch 3. Axure RP is a really well built tool to do rapid prototyping
and create hi-fidelity mockups. I used Sketch 3 to create the mobile mockups.



Mobile UI mockups designed using Sketch 3




Desktop UI mockups designed using Axure RP








Interactive mobile protoype using Invision

Invision is a fantastic tool to create interactive mockups. I imported UI screens created from Sketch
and added interactions and gestures in Invision.

Development

System Architecture

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.


TECHNOLOGY STACK

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

Learning and Future scope

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 CC staff will be the beta testers/users for the first version of the application. The beta
version of the app will be launched soon.