Designing for Low Digital Literacy

How I helped prisoners explore educational content on tablets with ease.
‍

⏰ Duration: 6 weeks
🤫 My Role: UX Design Lead, Front-End Developer

 💁🏻 Client: Prisoner Express
📝 Tools: Vue, Bootstrap, Github

Overview

🤫 My Role

UI/UX Designer & Front-end Developer

♥️ Team

4 members

⏰ Duration

5 weeks

🛠 Tools

Figma, Github

📝 UX Skills Leveraged

ACCESSIBILITY DESIGNUSER JOURNEY MAPPINGPERSONAHTMLCSSJAVASCRIPTVUEINTERVIEW & SURVEYSUSER TESTING

💁🏻 Client

Prisoner Express

Background

Our task
Digitize educational and entertaining materials that our client has been mailing to prisoners.
Client's Goals
Promote Participation and Inspire Innovation: Encourage prisoners to engage in Prisoner Express programs, fostering creativity, critical thinking, and providing meaningful activities.
Facilitate Human Connection and Recognition: Allow prisoners to establish and maintain relationships with Prisoner Express through mail, submitting comments, messages, or creative work, enhancing community ties without needing registration.

The Challenge

Here's the twist
Prisoners often have low digital literacy,
isolated from technology
App must run without internet

User Research

Interview & Survey

During an hour-long interview, we spoke with "Ricky" (pseudonym), a former inmate. Our client also provided past prison survey results.
Major Findings
  • The Power of Shared Stories in Prison: Submissions of personal stories from other prisoners are motivational and encouraging for our interviewee.
  • Desire for Expression and Reentry: Prisoners seek to express themselves and explore new interests both for entertainment and to prepare for reentry, aiming for validation from the outside world.
  • Lack of Digital Literacy: Prisoners often find technology intimidating and inaccessible due to limited exposure and lack of support for learning.

Persona

To better understand how prisoners will interact with our tablet app, we used our research insights to create a persona.

Stakeholders  Conflict

Client   VS.  User Needs

Due to prison restrictions, our client's requirements for the Prisoner Express App and the needs of our primary user – prisoners– were clashing.

Design

Brainstorm

Our team listed the necessary features for our app.
We also discussed the prisoner's ability to upload their work. Although the physical submission of letters is done manually by the prisoners, we agreed that there should be an instruction interface within the prisoner's app to guide them through this process.
Features:
  • Dashboard for display of content
  • Search in case users want to look for specific content such as author of poem
  • Help button for simple explaination of unfamiliar app features
  • Save liked content
Prototype

Sketches

We started sketching to think about the app's layout and structure.
PrototypePrototype
After discussing with the team, we settled on a final design before prototyping.
PrototypePrototypePrototype

Hi-Fi  Prototype

Home View

Overview
Users will see an overview of five categories of content: Newsletter, Journals, Art, Programs, and Poetry. Tapping "See All" reveals an archive of all content in that category.
Design Rationale
Familiar Language for Better Usability:
‍We used plain language that users with low digital literacy are familiar with such as "See All" to ensure that all users can navigate the app easily and confidently.
Improve Discoverability:
By prominently displaying categories like Newsletters, it ensures that users can easily find and explore different types of content that interest them.
Prototype
Overview
On the top bar, users will see "Mail" and "Help" buttons. "Mail" provides mailing instructions to Prisoner Express, while "Help" offers app usage information, aiding those with limited digital literacy.
Design Rationale
Immediate Assistance:
The "Help" button offers easy guidance on app usage, crucial for users with limited digital literacy, reducing frustration and boosting navigation confidence.
Clear Communication Channels:
‍The "Mail" button clearly explains how to send communications to Prisoner Express, boosting user participation by making these instructions readily accessible.
PrototypePrototype

Search View

Overview
Users can quickly locate specific content using keywords. Clicking on each category also allows users to access all archived content easily.
Design Rationale
Enable User Control & Choice:
‍The design empowers them to independently navigate the app, enhancing their overall user experience by providing control and flexibility in how they access the information.
Provide Visual Cues:
Category icons for Newsletter, Journal, etc. make it easy for users to visually identify different types of content.
Prototype

Catalogue View

Prototype
Overview
This page displays individual journal entries from incarcerated authors, each with a preview image, a brief introduction, and a mailing address for correspondence. Other categories like newsletters follow the same layout.
Design Rationale
Encourage Social Connection:
By providing mailing addresses, the app facilitates direct communication, fulfilling user's goal of seeking human connection.
Ehanced Engagement:
‍By providing visual and textual previews along with artwork and summaries for each journal entry, the design draws users in and encourages deeper engagement with the content.

Read  PDF  View

Overview
The layout features an "Overview" section at the bottom for entry summaries and a heart icon on the top right, allowing users to save favorites.
Design Rationale
Inclusivity and info retention:
Catering to users with different reading levels or limited time, the overview section offers content summaries, enhancing accessibility.
Clarity and Focus:
‍The design emphasizes the PDF entry and close button, maintaining user focus on the content while avoiding visual clutter and excessive options.
Prototype

Save View

Prototype
Overview
Users can view content they've marked as favorites. It is organized by categories.
Design Rationale
Demonstrate Functionality for Accessibility:
The "Newsletter" category is expanded by default to demonstrate the functionality and assist users with low digital literacy in navigating their saved content.
Facilitate Quick Access:
‍For users returning to revisit saved content, having the first category open allows for immediate access to items they are likely interested in.

User  Journey  Map

To identify pain points, and ensure our product aligns with user needs and business goals, I decided to create a user journey map guiding future iterations and improvements.
Campaign weathervane

Discover How I...

Helped make learning more engaging and easy for high school students

Stutter Inclusive Space

Discover How I...

Helped make virtual meetings more inclusive for People who Stutter


Thank you for viewing my portfolio. I hope you had as much fun exploring it as I had creating it!
‍
Like what you see? Have a feedback for my portfolio?
Chat with me (or not I won't cry promise)~

Data Visualizations
Designing for & with PwS
HP Data Visualization
Healthcare Visual Essay
Redesigning Educational Game
Designing For Low Digital Literacy
Portfolio Designed By Me & Built With Webflow ~