Gary Crisostomo
Work
About
Resume
Haven
Accessible resources for underprivileged communities. 
Type
Interactive Signage Application
Timeline
Jan 2021 – October 2021
Role
UX/UI Designer
Contribution
Product Design, UI Design, UX Research, Branding
About
Haven is an interactive signage application designed to make local initiatives visible and accessible for the general public. This app serves as a directory of resources covering the four largest factors affecting DC's homeless community; food, shelter, health, and safety.
The Design Thinking Framework
Design thinking is a nonlinear process used by teams to better understand users, challenge assumptions, redefine problems, and come up with innovative solutions to prototype and test. It is most effective when dealing with problems that are not well defined or unknown, since it includes five phases: empathize, define, ideate, prototype, and test.
Project Goal
The goal of this project was to create an interactive signage application in a public space that answers the following statement:
How might we connect free resources to those underprivileged communities in the DC area?
Research
Understanding the Scope
To gain a better understanding of the current homeless population and programs in place, I researched the United States Interagency Council on Homelessness' documentations and reports for 2020.

I discovered that human trafficking and mental health greatly impacts DC's homeless population.
2021 District of Columbia Homelessness Statistics from the United States Interagency Council on Homelessness.
Existing Public Facing Interfaces
With the problem statement in mind, we started to do some research on potential solutions. How can we make this discreet and accessible enough for people to actually use?
Milanotes workspace to collect inspiration and research on potential solutions.
User Interviews
To better understand and gain empathy for our target group, I conducted user interviews at A Wider Circle in DC.
During the interviews, I framed questions to allow for a conversation geared towards gaining insight into feelings and experiences related to their daily lives. After analyzing the responses, we found a general pattern among these interviews.

1. Users have a difficult time finding available beds at shelters.

2. Many in the community are aware of the available programs, especially for those at intersections.

3. Some shelters are actually dangerous places for women, members of the LGBTQ+ community and more.
Personas
Homelessness can affect a variety of people, regardless of economic or social background. To gain more insight on real issues, I interviewed while volunteering with nonprofit, A Wider Circle, to create the personas below.
Personas created for Haven.
Initial Sketches + Wireframes
After identifying the problem and creating personas, the next step was to ideate as many possible solutions. Through sketching and wireframing, I created over 30 designs and began filtering out the most promising solutions.
Horizontal vs. Vertical Design
As I designed wireframes, I kept in mind our personas and realized that children and those who are wheelchair bound may need an interface that is easily accessible.

After testing the placement of buttons and the navigation bar, I discovered that a horizontal design would be the most accommodating.
Wireframe of the horizontal layout.
High-fidelity
Working closely with my mentor, Juhee, I began to move from initial sketches to high-fidelity mockups. We attended AIGA DC's brainstorming sessions for inspiration and an opportunity to discover best practices.
AIGA SHINE brainstorm and review session.
After applying the larger group's feedback, I iterated the most promising designs and began adding in visual elements such as colors, icons, map imagery, and photography.
As we continued to engage in review sessions. Some of the common themes that we discovered include:

1. The buttons should be placed at the mid-level or bottom for users to easily access.

2. We need to eliminate excess screens to consider if users are in a hurry to find a resource.

3. Images of people in need of help might discourage users from actually seeking help.

4. Red is a trigger color because it can remind users escaping from domestic violence of blood.
Visual Design
As we began to refine the overall layout, the visual design/branding component needed to be stronger to help users identify and distinguish the application/interface from others.
Iterations of a new icon for Haven.
New typographic styling for increased legibility.
Prototype
Microinteractions
After refreshing the visual design and finalizing a layout, I began prototyping two of the most successful concepts so that users can get a better feel of the experience.
Test
A/B Testing
Two versions of the design approach are created simultaneously and shown to half of the same target audience each to determine which version is better. Concept B ultimately performed better with the target audience in terms of usability, and click rates, and was selected as the version to continue development.
Final Designs
I wanted to expand beyond UX/UI and imagine what kind of products would be included in care packages, whether it's blankets, bags, shirts or more.
Conclusion
The concept for Haven was completed with positive feedback from the tested users. I handed off the research and designs to a developer who is planning to pitch the concepts to the Prince George's County Department of Social Services and Arts & Humanities Council in 2023.
Lessons Learned
1. Skip assumptions and test.
User testing and feedback is the best way to discover the true attitudes and feelings users have towards your product.
2. Keep your process simple and intuitive.
Users should be able to access your product without having to read a manual or having someone guide them throughout the process.
3. Never delete early designs and concepts.
Some elements of my initial concepts and wireframes were able to solve user issues in the second or third iteration.