__light_blue/w=3840,quality=80,fit=scale-down)
__light_blue2x/w=3840,quality=80,fit=scale-down)
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.
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.
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
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.
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
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
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
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.
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.
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:
- “home page”,
- “individual chapters in home page”,
- “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.
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.
Mid-fidelity wireframes were a leap forward.
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
- Determine usability problem areas, focusing on the navigation and accessibility features
- Assess learnability and satisfaction for first time users
- Identify opportunities for improvement based on participant feedback
Test Objectives
- Assess the learnability of the site’s navigational scheme
- Assess learnability of the site’s accessibility features: the language and audio settings
- Identify problem areas and opportunities related to the site’s accessibility feature
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.
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
Final prototype
The final prototype reflects all recommended changes from usability and preference testing.
/w=3840,quality=80,fit=scale-down)
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.
Made with Super.so + Notion.so + Cy template