Fotonovelas for health literacy

Fotonovelas for health literacy

Client
Rural Women's Health Project
Project title
Fotonovelas—Full UX case study
Disciplines
UX DesignWireframingPrototypingUsability testing
image

Background

The fotonovela is a traditional narrative medium similar to a comic book that uses photographs to tell dramatic stories with a morale. The Rural Women’s Health Project has used printed fotonovelas for thirty years in community health education.

On this volunteer project, I collaborated with the RWHP on an end-to-end product design for a digital fotonovela. My role was User Researcher and UX Designer.

image

Problem

The target users are Hispanic immigrants who seek basic health literacy online to access medical services in rural north-central Florida. These individuals face distinct challenges, including low literacy, limited English skills, and limited internet access.

How can we create a digital fotonovela that is engaging, informative, and accessible to these users?

Solution

I created a mobile prototype based on user research, and I iterated on the design after usability testing. Once built, the completed website will be implemented in education and outreach by community health educators.

The completed prototype includes:

  • mobile-first design pattern;
  • fully bilingual site design and UI elements;
  • integrated speech-to-text within user interface.

Approach

image

DISCOVERY

Research methodology and challenges

I established the problem based on existing knowledge of the target users from the client. I broke this problem into smaller objectives and narrowly defined research questions.

image

Real world challenges complicated my plan for contextual inquiry, user surveys, and interviews:

  • onset of COVID-related health risk to in-person contact,
  • lack of insider knowledge or connections, and
  • physical and cultural distance forced a revised approach.

Insights

I had to scrap contextual inquiry and user surveys. I modified my approach to incorporate secondary research and non-primary users as participants. Along the way, I learned valuable lessons about recruiting.

Competitive Analysis

A competitive analysis revealed few existing products of similar design and purpose. However, these examples served to inspire and shape the business requirements and overall concept for this product.

Other deliverables

  • Market analysis
  • SWOT (Strengths, Weakness, Opportunities, Threats) Analysis
  • Business objectives
  • Functional requirements

Market Analysis

Market analysis of two similar educational products
Market analysis of two similar educational products

UX Competitive Analysis

UX Competitive Analysis
UX Competitive Analysis

A flexible approach to user interviews

The difficulty of contacting primary users forced me to modify my approach to the interviews. I incorporated five secondary users to gain additional context.

User Interviews

User interview participants
User interview participants

Through desk research, I collected important demographic and technology usage data on superset populations that overlapped with my small subset target population (for which no existing quantitative research was available).

Secondary Research

image

Research analysis

Research goal

  • Characterize users’ online activity, device usage, and preferences when searching for health-related information
  • Reveal qualitative insights about user needs, motivations, attitudes

Findings

  • Hispanic residents in rural Levy County have limited access to internet due to multiple factors: cellular network, data limits, sharing device with other family members, work hours.
  • Hispanic residents in rural Levy County (and nationwide) prefer Spanish language and/or bilingual content.
  • Hispanic residents in rural Levy County generally find the English language as a significant barrier to information accessibility online.
  • Hispanic residents in Levy County (and nationwide) are significant consumers and sharers on social media.

Insights

  • A mobile-first website would serve time and data-limited users better than a mobile app.
  • Bilingual content increases accessibility and engagement to wider audience
  • A minimalist approach to site design - simplified navigation and interface, reduced animations and enhancements - will maximize accessibility to time and data-limited users.

DEFINE

User Personas

I built two user personas based on analysis of foundational research.

image
image

User Journey Maps and User Flow

Based on these personas, I created user journey maps and user flows. These artifacts in turn informed the interaction design at multiple breakpoints with a primary focus on the mobile breakpoint.

image

DEVELOP

Card sorting and site mapping

I employed cart sorting to design the information architecture of the site. Five participants sorted twenty (20) cards online (optimalworkshop.com) into three categories:

  1. “home page”,
  2. “individual chapters in home page”,
  3. “other site pages (top level navigation)”.

Results suggested that it made most sense to simplify homepage content and assign remaining content to other site pages accessible from the top-level navigation.

image

Wireframes

I created low fidelity paper wireframes - not by drawing each individually, but by creating modular elements and moving them around a template. As a lefty without great handwriting or drawing skills, this allowed me to quickly redraft and consider different layouts.

image

Mid-fidelity wireframes were a leap forward.

image

VALIDATE

Usability testing

I faced the same recruitment-related and contextual challenges in usability testing as I had previously in the discovery research. In response, I opted for:

  • remote moderated testing
  • six (6) secondary users as participants (individuals with direct cultural and/or professional knowledge of target users)

Goals

  1. Determine usability problem areas, focusing on the navigation and accessibility features
  2. Assess learnability and satisfaction for first time users
  3. Identify opportunities for improvement based on participant feedback

Test Objectives

  1. Assess the learnability of the site’s navigational scheme
  2. Assess learnability of the site’s accessibility features: the language and audio settings
  3. Identify problem areas and opportunities related to the site’s accessibility feature
Usability Testing Report
Usability Testing Report
I labeled observations and quotes using this rainbow spreadsheet. I also created an affinity map to sort data by theme.
I labeled observations and quotes using this rainbow spreadsheet. I also created an affinity map to sort data by theme.

Preference Testing

I conducted a quick round of preference testing to assess the best location to place the language selection toggle. 83% of participants preferred the top placement, which sealed the deal for me.

image

DEVELOP

UI and styling improvements based on testing

I made final improvements to reflect the suggested changes:

  • updated styling on audio UI makes functionality more obvious
  • Horizontal page navigation with label makes navigation more obvious
  • Updated color scheme increases contrast, legibility, visual interest
image

Final prototype

The final prototype reflects all recommended changes from usability and preference testing.

image

See the final prototype in Adobe XD here.

Next steps

The obvious next step for this project would be handoff to developers. In this case, there is no developer available, so I will need to build out the site myself to move the project forward. I’ll update here on any progress made. 

Appealing additional upgrades would be those features that serve to build community, such as:

  • buttons for sharing to social media;
  • an ability to add comments;
  • a calendar of community events,
  • a searchable database of local organizations and resources

Final Thoughts

I learned from this project that foundational research is the most important stage in design (and it’s where I want to hang my hat as an experience designer and user researcher).  Primary research was difficult and labor-intensive. However, if I had settled for desk research alone, the problem would have been ill-defined. And no solution can solve a problem that is the wrong problem to begin with.

drewlong.ux@gmail.com · Linked In · Resume · Medium