catherineliang39@gmail.com

Penn & Slavery Project

App Design
2019

Unity, Adobe XD, Sketch, Photoshop, Illustrator

The Penn & Slavery Project was started by a group of UPenn students who were curious about the university’s link to slavery. As the project evolved and more links were uncovered, there was soon a need for an app to educate and spread information. During summer 2019, I worked with a team of 7 students on the Penn & Slavery Project’s App Design team. We aimed to create an AR app that would take users on a tour around the UPenn campus in a journey of discovery. As the chief graphic and UI designer on the team, I was responsible for everything ranging from creating wireframes to implementing the UI in Unity.



Design Process

1. Drafted, designed app flow, and created simple wireframes.  There were many initial design questions, including whether to have a set tour route or to allow users to visit stops freely, how to best direct users to each tour stop, and whether to include a include a section in between stops to engage the user, such as a quiz question or an audio description. The team and I discussed having a set tour route as well as a quiz or audio section between stops, which I depicted in the wireframes to the right.

(wireframe.cc, draw.io)


2. Created a basic, low-fidelity, interactive prototype, finalized the elements on each page. At this point, an advisory was added to warn users of potential triggers within the app, since slavery is a heavy topic. I also visualized the info page that would introduce and supplement the AR experience. At the top of the info page I included an image that depicts the stop location, which would better guide users on where to start the AR, as well as a “Start AR” button. The page scrolls down to an introduction of the AR experience, descriptions of the stop’s relevant history, as well as an image gallery displaying archival images.

(Adobe XD)


3. Created a more elaborate, high-fidelity prototype. I played with various motifs, colors, and patterns. At this stage, we also decided to remove the tour ordering so users can access the stops more easily, and start and end at anytime. It would simplify the app flow as well, and speed up the app creation process. In addition, a focus group was held discussing word choice of the content and usability issues.

(Sketch)
 



Color Scheme


During the design process, I researched the subject matter and took inspiration from the team. The easiest direction was to lean into the historical aspect, but I wanted to avoid the cliche yellow paper textures and ornate script. Instead, I opted for a more minimalistic interface to improve readability. These designs are inspired by Carolyn Purnell’s article on color and culture. While western cultures are more chromophobic, seen in the white minimalistic designs associated with modernity, cultures like Africa and India are chromophilic, which is reflected in their colorful textiles.
Since this project explores the intersection between a Western institution and African roots, I decided to mix the theme of chromophobic and chromophilic into my designs. Hence the composition has a minimalistic black and white color scheme with pops of color, added using African textile patterns.

Logo Designs


I was also asked to create the logo for the Penn & Slavery Project. I made many variations, playing with using a diagnol slash to show Penn’s difficult confrontation with its past, and the ampersand to tie Penn and Slavery together. The final design on the right, chosen by the team, involves a bell. The bell represents both the school bell that one of the slaves who lived at Penn rang between classes, as well as the Liberty Bell in Philadelphia, symbolizing freedom.

(Illustrator)


Unity UI Demo
Reshu Catherine Liang
catherineliang39@gmail.com