The north central Florida area is an increasing destination for Hispanic immigrants, but online health literacy efforts face distinct challenges — e.g., the language barrier, low digital and basic literacy, and mobile-dependent usage patterns — in this sparsely populated rural area. This project is my prototype for a bilingual, mobile-first website that is driven by user research and accessibility considerations.
Background
The Rural Women’s Health Organization (RWHP) has provided health literacy education to Hispanic immigrants and families in rural north-central Florida for over twenty years. One of their primary educational tools has been the fotonovela: a narrative and visually-based educational tool with photographs of actual community members, similar in format to a comic book.
However, their educational materials have always been print-based, distributed primarily at health fairs and in local clinics. The printed format fails to reach residents who are digitally connected but who have not visited a local clinic.
Problem Statement
How can we create an engaging and informative website for health literacy that is accessible to Hispanic immigrants in north central Florida?
Solution
My prototype includes:
- mobile-first design pattern;
- fully bilingual site design and UI elements;
- integrated audio narration built into UI, for accessibility to low-literacy users
Process: User Research
The users were initially identified as Hispanic, first-generation immigrants with low income and limited access to technology, spread across a wide geographic area. I wanted to find out more.
In the best of times, this population presents a difficult scenario for user research, even for a researcher who is also a fluent Spanish speaker. Long work hours limit many individuals’ availability, their network coverage is often spotty and many have uncertain legal status, leaving them hesitant to be interviewed. I set up an online survey, but received only two responses. I designed user interviews, but I was only able to interview one community member myself (I am forever grateful to a work colleague who completed another interview on my behalf).
On primary device for internet access (from user interviews):
We don’t have a computer. We use cell phones. (Teodora)
I use mobile mostly. My phone is very important. The internet doesn’t work at home. (Isaac)
On the greatest challenges or barriers to finding information online:
Understanding English. The data runs out. Many times, the cell service where I live isn’t strong. (Teodora — 44-year-old female, from Guatemala)
The language is the limit. That’s the most frustrating thing, not reading English.
With limited direct access to potential users, I had to find secondary sources: other individuals with insider knowledge of this community. This was rewarding but not straightforward, since I am neither local to the area nor a potential user. Ultimately, I interviewed health care professionals engaged in local free clinics, community leaders and organizational staff from the Rural Women’s Health Project.
For a broader (if less precise) picture, I conducted a literature review of academic articles, as well as existing market and demographic research from superset populations overlapping with my narrow user community.
With these data, I narrowed my description of the target user:
Hispanic (and Spanish-speaking), first-generation immigrants with mobile-dependent internet access, limited reading literacy and limited technological literacy, spread across a wide geographic area.
Interview quotes and research data were color-coded and affinity mapped. I went on to develop user journeys and personas based on two distinct but likely user scenarios, given this data.
Process: Concepting and Visual Design
User research had indicated that accessibility would become the primary consideration. I focused on two dimensions:
- Bilingual content — This would allow users of English or Spanish to access the site. It would also potentially afford Spanish-speakers an opportunity to practice their English.
- Audio narration of text — This would increase accessibility to low literacy users and, I hypothesized, increase user engagement.
Grounded in these features as essential, I worked from the top down. From user flows, I developed the site’s architecture. From the site map, I moved to wireframing.
After paper and mid-fidelity wireframes, I moved to prototyping in Adobe XD.
Process: Prototyping and Testing
This was my first go with Adobe XD, so it took some months “in the woodshed” to finish a prototype that integrated my essential features of language settings and audio narration.
Adding the audio was fun and challenging. Originally, the RWHP team had planned to record these stories with actors. Since that hadn’t happened, I searched online for text-to-speech APIs. I found one that generated surprisingly authentic-sounding voices in both languages, but the dialect of the Spanish narration was European, or peninsular, Spanish. This is both a little jarring, since the faces are clearly Latin-American, and potentially harder to understand (as noted by one participant in testing). This should be addressed prior to further development.
Through preference testing, I resolved my own hesitation about where to place the language settings. Everyone agreed that placement at the top was clearest.
Usability Testing: Considerations
It was time for usability testing, and I was excited. Real people, interacting with my design, giving me feedback! As a novice designer and student working on my own, everything wasn’t perfect. That said, I did make some important decisions worth mentioning:
- Remote moderated testing (due to COVID)
This was unfortunate but necessary.
- Bilingual test design
Being bilingual was essential to this project, since all users would be native Spanish speakers and I was on my own as tester/facilitator. I was able to design, schedule and administer tests using scenario-based tasks in English or Spanish.
- Transcription of testing sessions
Again, since I was flying solo on this project, I opted to have all sessions transcribed. Temi is a great automated transcription service. This removed the distraction of note-taking during sessions.
- Scheduling sessions using Calendly
A one-stop shop for scheduling, automated communication with participants and collecting background data, Calendly greatly simplified the logistics around testing sessions.
Outcome: Final Design
Usability testing and analysis identified two significant errors: low visibility of the UI for language settings and ambiguity around the UI elements for internal navigation. Both of these were addressed in the final prototype, which can be viewed here.
Next steps
This was a student project, but the next obvious step would be developer handoff. This prototype could also be used as a template for adapting other fotonovelas from the same organization to grow their outreach online.
Future features that would support this effort include:
- buttons for sharing to social media;
- an ability to add comments;
- a calendar of community events,
- a searchable database of local organizations and resources (The RWHP already maintains localized ‘guias’ for different counties so this would be a great integration)
What did I learn?
As my first UX project — and one that spanned the design lifecycle — every stage of work was a learning moment. The role of researcher especially captured my fascination. It became clear on this project how wrong the design could have gone if I hadn’t first understood (as best I could) the users. A visually dazzling web app designed for desktop devices — cool though it might be — would not solve the problem facing real users as I came to understand them, i.e., mobile-dependent, low tech literacy.
I also learned that feeling personally invested (this project was both work-related and it supports causes and people I care about) is neither a precondition nor a guarantee for success. In fact, it can even make the work more challenging, especially when on your own.
Final words
Thank you, thank you to the Rural Women’s Health Project for providing the source material and networking contacts that made this project possible. I hope their ‘fotonovelas’ will find a digital format, and I would welcome the chance to continue this collaboration.
Want to learn more? View the full case study and other completed projects on my portfolio. Thanks for reading!
