SUMMARY
During the time of slavery in America, enslavers would put ads in newspapers to try and find runaway slaves. These ads not only helped them locate the slaves, but also preserved information about the individual’s personality, appearance, and life story. By collecting and organizing these ads, they have become a valuable resource for studying the experiences of enslaved people.
The project “Freedom on the Move” has taken these ads and made them available for crowdsourcing, where people transcribe and add searchable data to the database. This project serves as a tool for research, education, and genealogy. Scholars, students, and anyone interested in history can use the information from these ads in new and interesting ways.
I became involved in a semantic app project after its initial development and usability testing, with the aim of improving its user interface (UI) and overall user experience (UX). The testing method used was a cognitive walkthrough test, which revealed several areas for improvement, including user confusion regarding the transcription process, inconsistent UI controls, excessive user input, and accessibility issues. As a result, the decision was made to redesign the UI and user flows, and I also had to create wire flows for searching and displaying ads, as these functions were not originally designed.
THE PROCESS
The main challenge we faced was minimizing the amount of user input required through forms. Since this is a crowdsourcing application where users do not receive payment, we wanted to avoid burdening users with excessive data entry. Our goal was to keep users engaged and create an easy-to-use interface that simplifies the process of curating data.
The original UI was cluttered and used incorrect UI controls, resulting in a distracting interface without a clear visual hierarchy for completing tasks efficiently. Below are a few screenshots of the original UI.
To begin, my main focus was on developing a consistent UI design system and planning all possible user interactions for adding data. My primary objective was to create a smooth and effortless experience for users when inputting data.
For example, the original UI included a select list with only three items to choose from. This meant that users had to waste time clicking on the select list UI control. Instead, for a small number of options (between 3-5), it is more efficient to use a group button, as it provides a cleaner and more effective UI. Additionally, the user interaction for adding a new item was not user-friendly and required improvement.
Task flow for selecting and adding a new language.
Interactive wireframes for adding a new language.
Another example was the process of adding the height of a runaway. The original UI had several UI controls, including a slider that was meant to add the height if it was known from the ad. However, this was not obvious to the user, and the interface attempted to communicate adding an approximate, known, or unknown height. The process needed to be simplified and made more intuitive for the user.
Proposed solution below.
The following example illustrates how to add relations when dealing with multiple runaways. The UI is designed to accommodate up to 2-3 runaways, but for larger groups, modifications to the UI will be necessary.
Design System
Based on the issues that were identified, the following design changes were made to improve the UX:
- A consistent UI design system was created, which included standard UI controls, especially for inputting data, such as group buttons, sliders, and dropdown menus. This created a consistent visual language across the app, making it easier for users to navigate and use.
- Data input was streamlined by minimizing the amount of user input required through forms, using intelligent defaults, and auto-populating fields whenever possible. This reduced the burden on users and made the data input process more seamless.
- A clear visual hierarchy was provided to guide users through the app and accomplish their tasks painlessly. This was achieved through the use of typography, color, and spacing.
- Data entry was simplified by making UI controls more intuitive and easy to use.
- Visual clutter was reduced by eliminating unnecessary UI elements, reducing visual clutter and distraction, and allowing users to focus on the task at hand.
WIREFRAMES
The wireflow illustrates the steps involved in transcribing an ad, covering all possible steps in the process. The goal is to transcribe the ad accurately, and the following steps below have been designed to achieve that objective.
This wireflow pertains to searching for an ad, covering all possible steps in the process. The design allows users to search Runaway Ads using three categories of advertisements: fully transcribed, waiting to be transcribed, and partially transcribed. The objective is to enable users to find the specific ad they are looking for efficiently.
Although creating visuals wasn’t explicitly part of my role for this project, I took the initiative to develop some visual explorations and shared them with the client to provide a more comprehensive view of the UI.
