The Amplification Project

Redesigning a digital archive raising awareness for art and activism influenced by forced migration
My Role
UX Designer in a team of 3
Tools/Skills Used:
Figma, Whimsical
Duration
9 weeks (Jan 2021 - March 2021)
Project overview:
The Amplification Project (TAP) 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
Problem:
The current site's UI feels outdated and its text-heavy features confuse users who are trying to submit and view art.
Solution:
Redesign the site to better embody stakeholder goals, address user pain points, and be more image-centric.  
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. Overall, we felt the submission process and browsing experience in particular had great potential for improvement.
Visibility of system status:
The "Submit your Work" feature had no progress bar, checklist, or visual indicator of which fields were required versus optional. Users may struggle since the whole form is given all at once, and not split into sections.

Error messages only appeared at the top after attempting submission, and often used redundant terminology (eg: "That email address is not valid. A valid email address is required").

Another confusing factor is the navigation bar not indicating which page the user is on.
User control + freedom:
The "Submit your Work" feature had no visible method to remove an uploaded file—what if a user uploaded the wrong file?—or add multiple files—how would an artist submit a collection?

Additionally, the search bar had functional errors. "Refugee" produces no results whereas "Refugees" produces 43. This is on the developer's end, but restricts users nonetheless.  
Consistency:
The browsing experience was confusing because the navigation bar had three starting points: "Browse the Archive," "Browse by Artist," and "Browse by Collection." Despite having many features, users might feel overwhelmed by the text heaviness and inconsistencies.

Just to list a few examples:
  • When one selects "Browse by Artist," the page's title read "Browse by Exhibit" underneath.
  • "Search Items" felt like it should be  named "Advanced Search," and some of its fields felt irrelevant or used complex terminology.
  • The submenus within the 3 browse tabs were all different.
  • Users can't see many art visuals on one screen due to the text and header taking up the space.
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 is crucial to the archive's essence.‍
Usability testing:
We conducted 30 minute usability testing sessions with 4 users to discover the pain points users experience with the archive. 

The sessions consisted of:
  • User survey
  • 5 tasks focusing on registering an account, browsing/searching art, submitting art, and commenting
  • Semi-structured interview focusing on their initial impressions and their understanding of the archive after the tasks.
Analysis:
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
Findings:
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.

Tasks
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.

‍
Afterthoughts
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.

‍
Contact: khuang99@g.ucla.edu