The Amplification Project

Redesigning a digital archive raising awareness for art and activism influenced by forced migration
Tools Used
Figma, Whimsical
My Role
UX Designer in a team of 3
9 weeks (Jan 2021 - March 2021)
Project Overview
The Amplification Project is a community-led public digital archive to which any artist and activist can preserve and share their work, and anyone with an account can comment on the archive's content. Its mission is to document, preserve, and raise the visibility of art and activism inspired or affected by forced migration.

Professor Kathy Carbone, one of the founders, asked us to improve the current site to be more user-centered and bring more focus to the star content: the art. Additionally, she hoped for us to reorganize the site's layout and refine the overall user experience.
See final prototype
Images of the original site next to those of the redesign
Intro: Heuristic Analysis
Initial impressions: too much happening at once.
We started off conducting a heuristic analysis using Jakob Nielsen's 10 general principles for interaction design. The first key issue was actually a functional error--the search bar produced inconsistent results. For example, "Refugee" produces no results whereas "Refugees" produces 43. That aside, overall, we felt the submission process and browsing experience in particular had great potential for improvement.

The "Submit your Work" section lacked visibility of the system's status. There was no progress bar, no checklist or visual indicator of which fields were required or optional, and the long form was given all at once rather than split into sections. Error messages only appeared at the top after the user tries to submit the form, and often used odd, redundant terminology (eg: "That email address is not valid. A valid email address is required"). Furthermore, there was no visible method to remove an uploaded file—what if I uploaded the wrong file?—or add multiple files—how would an artist submit a collection?

I found the browsing process confusing because the navigation bar had three options instead of one starting point: "Browse the Archive," "Browse by Artist," and "Browse by Collection." Despite appearing to have many features, I felt overwhelmed by the text heaviness and inhibited by the inconsistencies in the interface. Just to list a few examples...There was no clear search bar for browsing art. When one selects "Browse by Artist," the page's title read "Browse by Exhibit" underneath. "Search Items" felt like it should have been named "Advanced Search," and some of its fields felt irrelevant or used complex terminology. The submenus within the 3 browse tabs were all different. And lastly, I could not see many art images on one screen due to text taking up the space.
Method: Usability Testing & Stakeholder Interviews
Understanding the archive's purpose and pain points
We conducted ~45 minute stakeholder interviews with 2 of the archive's founders to better understand the archive's purpose and current state. While some archives display works from organizations that worked with refugees, TAP was created to provide those directly impacted by forced migration a place to record and preserve their experiences. The stakeholders also viewed users consisting mainly of artists, activists, scholars and students. From these 2 interviews, we confirmed that community participation was crucial to the archive's essence.

We conducted 30 minute usability testing sessions with 4 users in order to discover the pain points users experience while using this archive. The sessions consisted of a survey, 5 tasks focusing on registering an account, browsing/searching art, submitting art, and commenting, and a semi-structured interview focusing on their initial impressions and their understanding of the archive after the tasks.

1. Affinity Diagrams
Transcribed, grouped and coded user inputs, behavior, and suggestions
2. Personas
Created 3 personas based off what we learned about the users
3. Card Sorting
Organized all the form fields in the "Submit Your Work" page into sections
Features were mostly there, but the art needs the spotlight
While TAP's mission was clear to users, the sessions also echoed our concerns from the heuristic analysis: the site was not visual enough. Negative experiences were related to too much text, scrolling, as well as unclear metadata labels—for example, does location of an artwork mean where it now resides, where it was created, or where the artist is?

An unexpected find was that most users deferred to the search bar first instead of any "Browse..." menu options for the tasks. However, because the search bar function provided inconsistent results, users were unsure if their go-to method provided accurate results.
LoFi Wireframes
We ran through our findings, list of features, and defined changes such as adding a call-to-action on the homepage, restructuring the submission process into steps, making browsing image-centric and space efficient, condensing the 3 "Browse" pages into one, narrowing down metadata fields, etc.

We used Whimsical to create low-fidelity wireframes to allow for quick brainstorming. Comparing page variants helped us narrow down which layouts we wanted to finalize, and then we transferred the designs to Figma for initial prototyping. While developing our new Style Guide, we wanted to shift towards a lighter, more healing palette. We also decided to go with a white background to provide a cleaner contrast to the art.

Style Guide
Interactive Prototype & Initial Testing
User testing our higher-fidelity prototype
While we each contributed to every step of the design process, sections I was more in charge of consist of the menu, the browsing pages (including individual art, artist or collection pages), and account creation and logging in. After creating a higher-fidelity prototype based on the wireframes, we modified our original usability testing tasks to match the updated prototype. 2 old users and 4 new users were interviewed following the same session structure but with new tasks using our prototype.

1. Register an account
2. Demonstrate how to get involved with the archive
3. Learn more about the archive's founders
4. RSVP for an upcoming seminar
5. Find work by Hani Alqam without using the search bar
6. Find more information about submitting work
7. Submit work
Final Tweaks
The purpose behind the testing was to make sure we redesigned the site layout to be naturally easy to navigate. While feedback was overall positive, especially on the new color palette, we adjusted our prototype based off some user experiences. For example, "News" and "Events" were originally subcategories under "What's New" on the menu; however, we realized that new users may not know the site has those features, and decided to make them their own pages on the menu. Other features we tweaked include the Events filter, Submission Tool Tips, and the Login/Register sections.

The scope of this project covered the first iteration of "design thinking" in the UX process. After further testing and readjustments, there would have been even more improvements and time to further consider animations and transitions, too. For example, even while revisiting this project for the portfolio, I ended up making some changes based on feedback in the second round of testing to the "Browse All" page. While the original design prioritized making the page image-centric, a user had pointed out that they could not see the art pieces' names and artists by default. This was something I wished to improve, and following Figma's new updates for components and variants, I implemented a solution into the final prototype.