UX case study: bilingual mobile website for health literacy

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.

The novelas are available in Spanish and distributed locally at clinics and community events.

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.

Demographic research: Pew Research Center, Nielsen Norman Group, academic articles

Process: Concepting and Visual Design

User research had indicated that accessibility would become the primary consideration. I focused on two dimensions:

  1. 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.
  2. Audio narration of text — This would increase accessibility to low literacy users and, I hypothesized, increase user engagement.
The layout of UI elements and the navigation menu items changed after early testing of low fidelity prototypes

Process: Prototyping and Testing

A tangled web in Adobe XD of interactions and transitions

Usability Testing: Considerations

Usability testing session with highlighted transcript visible
  • Remote moderated testing (due to COVID)
  • Bilingual test design
  • Transcription of testing sessions
  • Scheduling sessions using Calendly

Outcome: Final Design

A gif animation demonstrates the language settings feature.
The tabs at the top allow the user to toggle between English and Spanish language content.

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.

  • 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.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Drew Long

Drew Long

Freshly minted User Researcher and Designer finding my footing after a career in K-12 education