Prisoner Express — Re-designing Art & Writing Archives
Team: Cornell Hack4Impact — Designers: Gloria Shi, Huey Le, Jiho Lee, Project Manager: Jiwoo Tech Lead: Kassie
Developers: Daniel, Shefali, Sohni, Suhani
Timeline: Fall 2021, 10 weeks design
Prisoner Express creates an opportunity for incarcerated men and women to get information, education and a public forum for creative self-expression. Through their newsletters and programs we step through the isolation and alienation of prison life — their goal is to bring hope and foster a sense of community among the prisoners who participate.
Problem
Prisoner Express’ current online archive is on Airtable. Some of the pain points with the current archive are:
- Unintuitive design, difficult to use
- Displays large Airtable spreadsheets, which are difficult to take in at once or find a specific entry
- The archive crams in a lot of information in a small amount of space, and much of that information isn’t relevant for users
Solution
We helped Prisoner Express create an updated online archive to better display prisoners’ works. There were three main features:
- Different types of cards to better organize and display the content per type of work
- Unique expandable views of each type of work allow users to focus on one work at a time
- A feature page to allow Prisoner Express to showcase works that haven’t received a lot of responses
What do users think…
To learn more about the different users’ experiences on the current archive, we conducted user research with two types of users: ones who volunteer with Prisoner Express to upload and update the archive, and ones who are browsing the archive to send letters to the prisoners.
From these interviews, we created an affinity diagram. Although some of the pain points they expressed were based on the location and structure of the archive, which are things we cannot change, they provided helpful insights into a user’s perspective.
We took away several key insights:
- Users think too much information is included and displayed and oftentimes only need to view the work, its title, and some basic information about each prisoner, such as their id and address.
- Users want to be able to write as many responses to as many different people, currently, there is no easy way for them to see how many responses a work has gotten.
- Users want to see other works from the same person as they start building a pen pal relationship with the prisoner.
How to organize…
Currently, the works in Airtable are organized into 5 different types: artworks, poetry, journal, essay, and chapbooks. After analyzing the different types of work, we decided that it made sense to keep the current organization and create 5 different gallery pages. Due to the differing amounts of information that is included for each type of work, we organized the information to include accordingly.
Additionally, we considered two things based on the user research:
- How to display all the contents on each page in terms of how it’s organized and sorted
- How much information is needed to meet the user’s goals of browsing, interacting, and reacting to the prisoner’s works
What are others doing…
Before creating our designs, we examined various “galleries” across the internet. We noticed that not many websites featured galleries displaying multiple different mediums of work. Galleries seemed to be either completely text-based or image-based. Since our site featured both image-based and text-based content, we realized that we had to find a method of incorporating both of these types of content into our display while remaining visually consistent. We settled on a modern card-based design to achieve this goal.
How it started…
Using the information architecture and the insights we gathered from our user and market research, we sketched out a few initial explorations of our gallery pages and the expanded view. We focused on outlining the important information to give about each type of work so that viewers are able to pick works to browse and successfully view.
How it went…
Artwork
We wanted to highlight each artwork so we opted for a simple design with the thumbnail as the primary focus of each card for our artwork page. After discussion with our partner, we decided that we’ll also include the other works by the artist in the expanded view to foster further exploration. If a user likes one work by the artist, they can continue exploring their other works.
We explored many different types of cards but narrowed it down to these three concepts for our final design. We ultimately decided on option B.
- Option A, though minimal and visually appealing, was sometimes inaccessible. The contrast between the background and the text wasn’t guaranteed
- User feedback indicated that the response icon used in option C might be ambiguous
- Option B is sufficient minimal and visually appealing without running into accessibility issues
Artwork — Pushing to High-fidelity
In the final design of the expanded view, we decided to keep the artwork pop up non-vertical-scrolling so as present all the necessary information in one view. The horizontal scroll including other works by this artist includes a small thumbnail of the work and the title.
Essay
Prisoner’s Express essays are based on monthly themes/prompts. These themes can be pieces of art, phrases, or even other essays. Thus we made sure to include theme tags on individual cards and an overall theme filter in our initial mid-fi design.
We ultimately settled on option A for our final essay card design.
- User feedback indicated that the extra line of text was helpful without cluttering the card
- Users also preferred colored theme tags over non-colored ones as it helped them distinguish between the different themes.
- After further discussion with our partner and as a team, we decided that the mail icon in Option D was too ambiguous, much preferring the response text.
After speaking with our partner, we discovered that they had over a hundred themes, so we created a page displaying all of these themes so that users could skim over them and pick the themes they were most interested in. We experimented with using a bookmark icon to differentiate the themes, but ultimately settled on using a line as the bookmark icon could be confusing for users and mistaken as something they bookmarked.
Essay — Pushing to High-fidelity
When users click on our individual cards, an expanded view featuring the full content of the essay will appear. We included mailing addresses so that users can mail responses to authors.
We introduced a toggle so that users could swap between viewing essays and viewing themes.
Here is how our filters and sort will work.
Journal
The Journals are currently organized by scanned documents that could include multiple entries. However, there is no way to view all the journal entries of an individual in one place. We thought that since journals are personal to the person, it would be more effective to organize them together. So we decided to display the Journal page by author name.
Journal — Pushing to High-fidelity
In the expanded view, we wanted to display all the author’s journal files so we chose to lay them out in small thumbnails labeled with the month of the first entry. When a user clicks on a thumbnail, they will then be directed to the pdf file of the journal entries.
Poetry and Chapbook
Designing our poetry and chapbook pages turned out to be a similar process as they are fairly similar in content type and are all.
We initially explored designs with tags/keywords. However, discussions with our partner revealed that most of the works in their database aren’t tagged as they mainly use tags for internal purposes. Thus, we removed tags from our designs, making them very simple with the title, author, date, and responses.
Poetry and Chapbook — Pushing to High-fidelity
- We refined our visual design, using drop shadows instead of borders
- We kept the thumbnails for our Poetry and Chapbook cards to show the visual forms of the work. Some chapbooks had cover pages that could help users choose which work to browse.
- If Prisoner Express expands its programs to include other types of work, this card style, and the expanded view is applicable to those works as well.
Our expanded view for Poetry and Chapbook includes a carousel that will feature other works by the same author. We designed this feature so that users who only care about one author (e.g. family members) can navigate to their other works easily.
Featured
To create our Featured page, we took the different types of cards we designed and put them together in an uneven grid so users can browse a mix of content types.
Featured — Pushing to High-fidelity
Prisoner Express can pick what goes on the Featured page of the Airtable backend. Works featured here are from prisoners who haven’t gotten a lot of responses. This way, users who are trying to write as many letters to prisoners have a place to start.
Final prototype
Reflections
Overall, this project was hugely rewarding. It’s rare to get the chance to create socially impactful designs; this was one of those instances. From the very first chat with our partner to the user interviews and testing, we met people who are greatly invested in what we are doing and creating. We could feel their excitement and passion for this cause and that really resonated with us as designers; we wanted to create something that will be helpful for them.
A few improvements we would make if we had more time are creating a better way of differentiating between different types of works and making cards stand out more by using (hover) animations. Here are a few lessons we learned from this design process:
- Collaborative designing is easier in-person — it’s harder to brainstorm and to give/receive criticism over a Zoom call
- Understand your project and your partner — our creativity was sparked after visiting the Prisoner’s Express office at the Alternatives Library.
- Always keep an eye on the big picture — we designed for individual pages before designing our Featured page with all the different types of cards. This meant that there were a few inconsistencies between the cards that we needed to fix.
This project wouldn’t have been possible without the wonderful PM, Tech Lead, and Devs who worked so hard to turn our designs into a real product. We also would like to thank the other designers on Hack4Impact Cornell who gave us such valuable feedback during our weekly design crits.
