Fotonovela mobile prototype

Role: UX Designer (student, CareerFoundry UX Design Program)

Time frame: March-October 2020

Tools used: Adobe XD, Adobe Illustrator, Figma, Zoom

Skills: User research, wireframing, prototyping, usability testing and analysis

image

Overview

By applying user centered design principles, I developed the prototype for a mobile-first website on health literacy education. User research targeted a sensitive population and resulted in an emphasis on accessibility. This was a student project in completion of CareerFoundry's UX Immersion bootcamp.

User research led to an emphasis on two accessibility features.

💡

bilingual site content

💡

audio narration

Problem statement

How can we create an engaging and informative website that is accessible to users with mobile-dependent internet access and low literacy?

About the client

The Rural Women’s Health Organization is a non-profit with over twenty years promoting health literacy education to Hispanic immigrants and families in rural north central Florida. However, their educational resources and outreach have always been primarily print-based, limiting their availability and accessibility to lower literacy users spread across a wide geographic area.

image

Process: Discovery

Identifying the users

Through generative research, the target users were identified as:

Hispanic, first-generation immigrants with mobile-dependent internet access, limited reading literacy and limited technological literacy, spread across a wide geographic area.

Research challenges

In the best of times, this is a tough community to interrogate. With limited access to potential users, I had to find other individuals with insider knowledge of this community.

image
image
image

For a broader (if less precise) picture, I also consulted existing market and demographic research from superset populations overlapping with my narrow user community.

A sampling of reviewed research articles, sourced from Pew, Nielsen and academic journals
A sampling of reviewed research articles, sourced from Pew, Nielsen and academic journals

Research analysis

Affinity sorting

Interview quotes and research data were color-coded, affinity sorted and aligned with two likely personas.
Interview quotes and research data were color-coded, affinity sorted and aligned with two likely personas.

User journey

image

Research outcome

I built two user personas - "Astrid" and "Isaac" - through a composite of first hand interview data and third party market-based and demographic research.

image
image

Insights

I realized that accessibility was the primary consideration and guiding principle for this project.

Process: Concepting

Grounded in the needs and realities of my two personas, I worked from the top down.

infographic: Drew Long
infographic: Drew Long

Process: Prototyping and Testing

Prototyping in Adobe XD

After weeks 'in the woodshed', I successfully developed a prototype in Adobe XD that integrated UI elements for audio narration and language settings.

Text-to-speech

Prototyping audio in Adobe XD
Prototyping audio in Adobe XD
Actual API used to generate audio files (
Actual API used to generate audio files (http://www.fromtexttospeech.com/)

Image of talk bubble with audio button
Image of talk bubble with audio button

Language settings

Buttons and styling were used to visually differentiate language settings. Testing revealed that users preferred placement at the top.
Buttons and styling were used to visually differentiate language settings. Testing revealed that users preferred placement at the top.

Testing, finally

Real people, interacting with my design, giving me feedback?! I was really excited about user testing. Prototypes were developed iteratively in response to multiple rounds of feedback.

Remote moderated testing

Participants were given scenario-based tasks. Sessions were transcribed to minimize distraction during testing.
Participants were given scenario-based tasks. Sessions were transcribed to minimize distraction during testing.

Bilingual test design

Since I am bilingual in Spanish, I was able to design and administer tests in English or Spanish.

Scheduling with Calendly

Participants schedule testing appointments at their convenience while also providing personal and demographic data. Less to do in the testing session!

Usability testing analysis

image
image

A/B preference testing and analysis

image
image

Outcome of testing

Of course, a design is never 'finished'. That said, the essential features of the UI were greatly improved and polished thanks to multiple rounds of feedback.

See the final prototype

Follow-up

This was a student project, so it has not been developed beyond the prototype stage.

However, I would have planned to measure the site’s success as follows:

  • Site traffic monitoring
  • Number of site-facilitated contact requests to the RWHP
  • Number of shares on social media
  • Asking local health providers to include a question for patients whether they visited the site