Maria — COVID-19 mHealth App

Team Context

A community-driven team project

Maria was designed by a team of 6, with contributions from 2 community representatives who provided cultural insight and user context. My contributions spanned UX research, UI design, and logo & branding.

Eric Gardner — UX Research · UI Design · Branding 2 · UX Designers 2 · Web Designers 1 · Motion Designer 2 · Community contributor

01 — Problem

Health disparities leave communities behind

COVID-19 has claimed over half a million American lives. As rapid testing and vaccinations emerged, health disparities in the medical field meant resources were limited to POC communities; causing the Latinx/Hispanic community to test and vaccinate at lower rates than others.

COVID Affects POC Disproportionately

Rate vs. White Non-Hispanic	Deaths	Hospitalizations	Cases
American Indian / Alaska Native	2.0x	2.4x	1.6x
Black or African American	1.6x	2.0x	1.1x
Hispanic or Latino	1.7x	1.8x	1.5x

Source: CDC · 2021

Social Determinants of Health

Food access, housing stability, employment, and transportation all intersect with the ability to access COVID-19 testing and vaccination resources.

Systemic barriers, not individual choice

Access to Information

Language barriers and lack of culturally relevant health communication left Latinx communities without timely, trustworthy COVID guidance.

Language = access

02 — User Research

Community leaders as research proxies

We interviewed community leaders and representatives who provide services to our target users in New London, CT; capturing ages, device preferences, needs, cultural backgrounds, and aspirations. This data informed three user personas.

Persona 01

Alex

18–26 · Male · New London, CT · Southeastern CT Latinx community

"Live your life to the fullest."

NeedFast, mobile-friendly access to trustworthy COVID guidance, food resources, and education support without having to search across disconnected services.

Goals

Stay connected through technology, support family needs, and keep momentum toward school or early career opportunities.

Opportunities

Stable income, higher education, mentorship, and community resources that feel easy to find and act on.

Basic Necessities

Food access, health information, financial support, and resources for higher education.

Persona 02

Maria

45–60 · Female · New London, CT · Family-centered caregiver

"I do everything I can for my children."

NeedClear bilingual health updates and local support services she can trust, share, and use to protect her household.

Goals

Protect family health, make informed choices, and find reliable resources for children and relatives.

Opportunities

Better life opportunities for her children and up-to-date information on COVID-19 testing, vaccination, and prevention.

Basic Necessities

Job stability, housing, food access, and dependable health care information.

Persona 03

Humberto

65–90 · Male · New London, CT · Older adult community member

"Wisdom comes with age."

NeedReliable, culturally accessible health care information and community support that does not assume high digital confidence.

Goals

Maintain health, stay connected to family and community, and access resources without unnecessary complexity.

Opportunities

Community connection, comfortable retirement support, and simple pathways to trusted care resources.

Basic Necessities

Reliable health care, transportation-aware access, and clear prevention information.

Product Goals & Requirements

Goals

Bilingual & bicultural. Evidence-based COVID-19 information including testing and vaccination. Family friendly. Education and prevention focused.

Requirements

Up-to-date information. Notifications and text updates. Calendar for food, gift cards & resources. Educational modules. Peer support features.

03 — Style Guide & Branding

A name and identity rooted in culture

Maria is named after a popular Latina name; a signal of cultural belonging. The Alstroemeria (Peruvian Lily) inspired the logo, symbolizing friendship, love, strength, devotion, and mutual support through life's challenges.

Color Palette

Warm public-health clarity

The palette balances credibility with warmth. Indigo anchors trust and safety, orange makes the experience feel active and human, and green signals health, growth, and access to local resources.

Indigo#3040A0 · Trust

Orange#F09020 · Warmth

Green#A0C040 · Health

White#F4F6FB · Clarity

Foundation#07080A · Contrast

Design Rationale

Culturally clear, not clinical

Maria needed to feel like a trusted community resource, not an institutional bulletin board. Every visual choice supports bilingual comprehension, lower cognitive load, and an approachable tone for health information.

Trust first

Blue and indigo create a dependable foundation for public-health guidance and sensitive community resources.

Warm action

Orange adds energy and cultural vibrancy without making alerts or calls to action feel alarming.

Resource access

Green connects health, growth, and support services such as food, education, and community care.

Typography

Readable before decorative

Fira Sans was selected for both display and body type because bilingual health content has to scan quickly across languages and literacy levels. The hierarchy keeps headings friendly, body copy spacious, and labels predictable so users can move from information to action.

Display / Fira Sans

Maria cuida

Body / Fira Sans

Find COVID-19 testing, vaccination updates, food resources, and community support in one clear mobile experience.

Utility / Navigation

Calendario · Recursos · Comunidad

UI Language

Simple mobile affordances

Icon-based navigation, circular controls, and high-contrast active states make the experience easier to recognize at a glance. The goal is to reduce friction for users looking for timely information under stress.

Compact, recognizable controls

Large icon targets support quick navigation between home, community messages, calendar events, health education, and profile access.

Logo & Branding

A flower mark rooted in mutual support

The Alstroemeria, also known as the Peruvian Lily, shaped the logo because it carries meanings of friendship, love, strength, devotion, and support through life's challenges. The flower helps Maria feel community-rooted rather than institutional.

Identity system

The mark pairs cultural symbolism with a bright, approachable mobile-health palette.

Wireframes — Key Flows

Onboarding — language selection & auth

Calendar — events, testing sites, food pantries

Education — COVID Q&A + modules

Community — messaging & peer support

Prototype

Interactive prototype — bilingual health resources and community flows

04 — Outcome

What Maria demonstrates

Maria demonstrates the ability to design for underserved communities; conducting culturally sensitive research, creating a bilingual design system rooted in community identity, and building an app that addresses real public health disparities. This project required balancing accessibility, cultural resonance, and functional health information all within a team context.

Cultural fluency in design

From naming the app "Maria" to the Alstroemeria logo; every choice signaled belonging to the community being served, not just utility.

Community as research source

Interviewing community leaders rather than end users directly was the right methodological choice due to stay-at-home restrictions imposed during the panademic. They had longitudinal knowledge and trusted relationships that surveys couldn't capture.

Want to discuss this project?

I'd love to walk through my contributions, the team process, and the design decisions we made together.

Get in touch