Envisioning Justice UX Case Study

BRIEF
A design that extends the lifespan of the Envisioning Justice, New Visions Beyond Incarceration exhibition. Through interactions and browsing art, the design resonates an explorative experience of what justice means to you, I, and we.
PROJECT OVERVIEW In collaboration with the Illinois Humanities Council, the Columbia team was tasked to provide an organizational solution to a multimedia database. This included ephemera from the Fall 2019 Envisioning Justice exhibition. Where it once lived as a physical experience. The IHC team wanted to explore the possibilities of the exhibit on an accessible web medium. What did that mean? Who would use the site? How would that look? That is the task we took to hand.
WHO IT’S FOR? Our “who” was not exclusive. In designing a complement to the conversations surrounding justice, we wanted to ensure that everyone had access to our site. In not prescribing “who”, we were able to ask: is there anyone we are accidentally excluding with our design? Versus the latter, of designing for a specific individual. With this in mind, we targeted: - Community Artists - Activists - Leaders - Educators as the primary users of the site, with an emphasis on engaging a younger generation of activists.
CLIENT NEEDS + BUSINESS GOALS We kicked off the project with a group-led interview with Envisioning Justice to get a sense of their needs, goals, and the impact they were wanting to make. They were looking to create a digital home for the exhibition, highlighting content, artists, and community hubs from the exhibition to give the exhibition a second life beyond the physical experience. They approached us unsure of how to use the wide array of multimedia from the show on a website, which including 200+ .jpgs, .pdfs, and .mov’s that needed organization and a system. Our team took to the whiteboard and set up taxonomy spreadsheets to organize the massive amount of content we’d be working with. We also worked on a pin-up sheet to understand how exhibition pieces were organized.
EMPATHIZE
We discovered that the exhibition audience and website users were not the same. We realized that this wasn’t about recreating the physical exhibition experience, but rather capturing an emotion, the essence of the art exhibit, in digital space. What did these new users want or need? They would be entering the experiencing curious to learn - we would inspire them They would be looking to access resources - we would offer a place for them to access them.
DEFINE
While the exhibition focused on transforming the audience’s perspective: a query card measured what people think about certain topics coming in, and how their perspective shifted after going through the exhibition, the website would be about inspiring others and offering them resources. The exhibit prompted a reaction and transformation to a question that inspires a personal relationship with the exhibition. We determined that the website experience could do the same thing through an exploratory experience that create an opportunity for personal reflection.
IDEATION
CHALLENGE 01
SOLUTION
The team strategized about how to design an experience to serve the audience and their goals. Because the audience was so varied, from schoolteachers to young activists to artists and beyond, we spent a lot of time brainstorming about how to come up with a solution that would allow each type of user to engage quickly with content that was relevant to them. Because the client also valued interactivity, we questioned how to design something more engaging than the traditional navigation system.
We brainstormed lots of different possibilities to define a user flow that could be both inclusive and interactive. Two different navigation systems and user journeys arose from this: 01 Navigation based on their answer to an introductory prompt: “What does justice mean to you?” to set users on a personal and targeted experience. 02 A traditional, less interactive experience that would present the user with artists and content for each type of user - teacher, student, artist, activist - giving the user the freedom to explore content relevant to them. Time was spent debating whether one system would function better than the other. In our earliest iterations, the team decided to develop both versions of navigation.
CHALLENGE 02
SOLUTION
Time was spent trying to map out the user journeys of dierent personas within our target audience.
The choice to go with both styles of navigation led us to mapping out numerous user journeys via both avenues of navigation. Our first pitch focused on a visitor using either navigation method while being guided by prompts or keywords and filters. Our first pitch also contained a glossary that could be accessed and used as a keyword navigational tool.
ITERATION 01 Our first iteration focused on the use of a prompt to guide visitors based on keywords and categories. Our first pitch wanted to create an interface that helped draw visitors into a conversation similar to the conversations that would have been held during the actual art exhibit. Two options were presented to the client for our first pitch. The general framework of the exhibit was included for both options so that the client would have more flexibility and variety in their decision making process.
SPRINT 01 Collaboration with the client combined with a the COVID pandemic caused the team’s design to change from the original iteration. The prompt idea was scrapped as was the idea of a keyword sorting system that could be used to navigate the artwork. We began to experiment further with a map-based navigation that conceptualized the citywide scale of the Envisioning Justice exhibition.
IDEATE The change to map-based navigation led to some members of the team spending time creating different iterations of the map concept. Some members of the team envisioned a 3D replication of the art exhibit that would allow a visitor to navigate the exhibit by clicking on different locations. Other members of the team wanted to design a map similar to the maps interface on the iPhone.
UX TESTING
USABILIT Y TESTING SCRIPT We gathered some basic information from users including age, ethnicity, education level, occupation, hobbies, where they live, how comfortable they are with technology, their familiarity with our client and Illinois Humanities. We asked them questions to better understand where our prototype could be improved. Some of the tasks we asked users to do included: - Find a photo from an artist - Find the community hub an artist belongs to - Find out who curated this project
We also designed common scenarios that users might experience while visiting the website: 01. “You went to the Envisioning Justice exhibition and thoroughly enjoyed it. You mention the exhibition to one of your friends and really want to show her some of the art work that you loved. Especially of [ artist ] from [ community hub ]. You go to their website and look around to find that artist under that hub.” 02. “You heard about the exhibition. You are curious to know what exactly they are and how this organization works. You also heard about the “Marshall Art Project” that Envisioning Justice is running. You go to the website and look for it.” 03. “You really enjoyed the information you found looking through the exhibition, and you want to learn more about the team that put it together. You look to find more info on the team and the organization that put it together.“
USABILIT Y TESTING User testing for this project was a significant challenge for our group. Due to the pandemic, we were not able to do in-person testing. Another hassle was that since we were on a short time frame, we couldn’t test with as many people to get detailed results. As a result, our user testing team relied on online testing to get feedback, intending to use recording software and screen sharing to get as detailed results as possible. With this in mind, each of us on the User Testing team tried to get a couple of people to test with. Each participant went through the tasks or scenarios on their own with one of the testers sharing their screen. The second hurdle that the User Testing team faced was that they had only 2 days to collect their data, limiting the amount of responses possible.
DATA COLLECTION The most common note we got was that the layout of the landing page is confusing and that people didn't know where to go first. We might want to use a part of our color scheme to try to guide the users' eyes across the page since we are short on time to redesign completely. Many also struggled with the multiple menu options. People complained of links being broken and information not being fleshed out, problems that would not make it to a final deliverable, but that can be excused in a prototype.
PROTOTYPING We began working with an agreed upon color scheme and team members began to work on dierent elements of the new design. The simple and clean looking version of a map with the connected points was a compromise of interaction and navigation. This way visitors still have some interaction with the interface beyond scrolling through images of art. Once a functional iteration of the prototype was up and running a team was formed to run usability testing.
PROTOT YPING The results of the usability research along with a final check in with the client were applied to the interface. A clean and easy to follow arrangement and a change from purple color to a softer blue and gray. Our Data Entry and Prototyping teams faced hurdle after hurdle due to the constraints brought about by COVID-19, including lack of access to technology needed to further progress on the project. However, every member of the team persevered, and we were able to deliver a final product to the client.
ACHIEVEMENTS The final product produced by our team is wildly dierent from the original concepts that were originally pitched a few months ago. The team worked together in order to create several dierent iterations of numerous prototypes throughout the creative process of this product. Every member of the team was pushed outside of their comfort zone due to the Coronavirus pandemic and the elaborate nature of the product. Even with the change from physical meetings to an only remote setting, this team was able to overcome these challenges to design and build a website.
COVID-19 As a result of the unfolding of the COVID-19 global pandemic, our team lost about two weeks on a mandatory break. Class time became virtual, and we all converted structured class time to athome work. The pandemic made usability testing slightly unorthodox, but the results were still worthwhile and taken into consideration in the later designs of the interface.
Created under the guidance of Lauren Liss’s Interactive Arts & Media Team class at Columbia College Chicago, Spring 2020.
Artur Ciecierski, Interaction Designer Cassie Seifert, UX Designer Elliott Isaac, Development Eric Olson, Communications Manager Kyle Cook, Data Entry Lorelei Miyamura, Team Lead Nijah Marshall, UX Designer Renee Tranter, Presentation Design Riley Jakusik, UX Designer
 Saman Mirza, UX Designer Sarah McDonald, Project Manager Tyler Morales, Development Tim Bradish, Documentation Lead Vicki Lei, UX Design + Development Zoey Reyes, Development