Havensent
UI/UX Design for responsive web app
Overview
A winner of the inaugural UndocuHacks, Havensent is a data-driven resource allocation web application designed to help community service providers better address the needs of immigrant communities. Havensent empowers immigrants to safely voice needs to their safe havens, which propels our resource allocation and data aggregation technology to improve profitability for organizations and inform policymaking.
When I was hired to be part of this project, Havensent had two goals:
Goal #1
To rebuild and improve upon the Havensent UndocuHacks demo into an MVP release ready to use.
Goal #2
Expand on Havensent by ideating and implementing a workflow for organizations to visualize data from requests on the external-facing end of Havensent.
Problem #1: Undocumented immigrant access to healthcare
In a review of studies of undocumented immigrant access to health care services, 65% identified fear of deportation as a barrier, 36% cited language and cultural differences, and another 36% noted that lack of resources like transportation. They are not accessing care or delaying health care access.
Problem #2: Organizations' barriers to collecting data
For organizations that serve immigrants, there are barriers for collecting essential data. According to the Nonprofit Technology Network (NTN), the 4 most commonly cited
Nonprofit challenges with regards to data were (1) issues related to collecting and working with Data, (2) lack of expertise, (3) issues of time and prioritization, and (4) challenges with technology.
Problem #3: Turning data into actionable insights to create impact
Furthermore, when outreach data is collected, a low number of Nonprofits are actually using that data to make decisions.
While many nonprofits are tracking various types of marketing, communications and fundraising data—what can be referred to as “outreach” data—the NTN survey indicated a surprisingly low number are actually using that data to make decisions.
Solution: Resource allocation tools propelled by anonymous data
Havensent is an anonymous needs assessment & resource allocation web application that incorporates mapping, data visualization, and a database of 5000+ safe havens & service providers.
Background
Role
UX/UI Designer
In this project I was responsible for the UI Design, writing copy for the external-facing end of Havensent, and optimizing interactions by streamlining tasks.
Team
6 members
Co-founder
Project Manager
React Developer
Fullstack Developer
UX/UI Designer (me)
Graphic Designer
Constraints
Simplicity against the clock
Constraint #1: 8-week timeline to release a Havensent MVP.
Constraint #2: Previous research shows that immigrants rely more on mobile devices than overall U.S. population. With this in mind, along with previous considerations about barriers for immigrants, we concluded that having a lightweight, secure, responsive build was of vital importance to address the core issues of our audience.
Users/Audience
2 main segments
On the external-facing end, our projection for primary users was immigrant youth and their families. For the internal-facing end of Havensent our primary users are the decision-makers at the “Havens” (Decision-Makers at schools, places of worship, community centers)
My Process
What, How and Why
Kickoff: Setting Expectations
When I was on-boarded to Havensent as a UX/UI Designer, I checked in with the whole team for all of us to strategize on what could be the most impactful way to improve the experience in 8 weeks.
We concluded that addressing cultural barriers would be the area where I would focus the most during our short timeline. On the more technical side, our React Developer focused on great responsiveness, our Fullstack Developer would focus on finding ways to make requests truly private and secure, and both of them collaborated to make Havensent lightweight in order to optimize loading times and data usage.
Addressing Cultural Barriers: Copywriting
After going through some of the initial research our co-founder made for UndocuHacks, I found out that more than 35% of immigrants in the US as of 2017 are from Spanish-speaking countries. Since I’m bilingual in English and Spanish, I decided that going over copy would be my first stop in making an assessment of potential cultural barriers in Havensent.
My first step was checking in with my team to see what would be the most cost-efficient way to tackle this. Ultimately, we concluded to use the Google Translate API, instead of making a language selection on the homepage and using manual, custom translations. This decision appealed more towards our goal of keeping Havensent lightweight.
With this decision at hand, I started to test how accurately Google Translate communicated our copy in Spanish. Over time, I noticed that Google Translate gravitated more toward translating word-by-word rather than contextually translating expressions.
This caused problematic results because sentences in English and Spanish are structured differently, and this caused inaccurate/nonsensical translations to take place more often when complex sentences and/or words with multiple meanings came into the mix.
I refined the copy through trial and error by looking for synonyms for the words we had in the first place. My approach was looking for less common words that didn’t have multiple meanings to prevent Google Translate from picking a translation that was out of context, but common enough for the API to effectively translate it.
Addressing Cultural Barriers: Iconography and Visual Language
At first, there were 4 available needs, and only one could be picked from a dropdown. After 2 more were added and up to 3 could be picked, I proposed that we replaced the dropdown with a small 3-column grid, with each tile needing a corresponding icon. My reasoning was that adding icons could help with the potential inaccuracies of the translation API. However, this posed a challenge of its own, since this would mean we'd distance ourselves a bit from the text-heavy direction we were going in.
The first guideline we decided upon for the icons was that we’d use black line icons. We made this decision to address both accessibility (in terms of contrast and color blindness) and avoid potential miscommunications due to color having different connotations across different cultures.
This narrowed down options when picking icons, but it was rewarding because it helped us to make our visual language more universal, accessible, and simple.
Implementing this grid resulted in an improved layout that made the mobile view less monotone and more expressive, making it easier to communicate meanings with visual hierarchy.
Enabling Orgs: Implementing the Business Model
In the midst of trying to get Google Translate to say “raza” instead of “carrera” for our “Race” dropdown, I connected with the co-founder to start creating the experience for organizations. Havensent has a 3-tiered, “freemium” model for organizations to acquire. The tiers are differentiated by increasingly specialized data visualization tools, with the last tier suited with an “Insights” panel that points out noteworthy changes that deviate from usual activity.
For this part of Havensent, I was tasked with making quick sketches/wireframes of the main dashboard screens for the different tiers to explore different possibilities.
Outcomes
A space to review, reflect, and look forward
The Havensent Release
By the end of the 8 weeks, we had successfully rebuilt the external-facing end of Havensent with an improved user experience. However, the implementation of the workflow for organizations was postponed due to a need to downscale the scope of the project to fit our short timeline of 8 weeks.
On a brighter note, our MVP propelled the co-founder of Havensent to secure 10K in funding to continue the development of the product.
The State of Havensent
Even though Havensent has steadily continued to find success with the great work of our 8-week run, there’s always space to make improvements, especially after years of growth as a designer! Check below for my refreshed rendition of Havensent.
