The Amplification Project
The Amplification Project is a digital archive that utilizes artistic forms of storytelling to document the experiences of those who were affected by forced migration. In this project, as a part of a UCLA Digital Humanities initiative, myself and three others collaborated with Dr. Kathy Carbone to redesign the current outdated archive website to best uplift the voices of migrants around the world.
Overview
Challenge: Reevaluate the usability of the current digital archive through user research and usability testing and redesign the archive based on user feedback
Solution: Updated website with a rebranded color palette, additional features, and comprehensive information architecture
Timeframe: 10 weeks
Team size: 4 people
Key Features: Earth-tone Color Palette, Slideshow Banners, Guided Submissions Process, Streamlined Menu Bar, Search Bar with Categories, Heat Map Directory
RESEARCH
Heuristic Evaluation
Given the redesign nature of this project, it was important to conduct a heuristic evaluation of the current website using Nielson’s ten usability heuristics. We each conducted a separate walkthrough of the website and noted violations of each heuristic, as well as scored each violation on a scale from 0 (not a usability problem) to 4 (usability catastrophe). These were the major violations and recommendations from this exercise.
MATCH BETWEEN SYSTEM AND REAL WORLD
Problem: The legend on the interactive map was not intuitive for users to understand.
Recommendation: Fully replace the Google Maps embed with a more intuitive visual.
ERROR PREVENTION
Problem: There was no standardized format for tagging, hence different capitalizations made topics difficult to find.
Recommendation: Provide examples or a template for how to tag topics.
Problem: The search bar did not inform the user on how to search for topics and did not yield results from basic searches.
Recommendation: Eliminate the search bar completely, include a guided search system, or provide suggestions for alternate searches.
Problem: The submission page prompts were vague with no descriptions of what information to include and how to format it. The submissions guide and submissions page were also on separate pages.
Recommendation: Consolidate the submissions process onto one page and incorporate drop down options for prompts, instead of free response answers.
FLEXIBILITY AND EFFICIENCY
Problem: Browsing options were listed in separate places, which took up unnecessary space and was difficult to navigate.
Recommendation: Combine all browsing options in a drop down menu under “Browse by” on the main menu bar.
AESTHETIC AND MINIMALIST DESIGN
Problem: The entire website was text heavy, with inconsistent text formatting and difficulties distinguishing headings, clickable links, and important information.
Recommendation: Standardize text formatting throughout the site, and showcase more of the artwork while minimizing the amount of text, especially on the home page.
Problem: The color palette made the text unreadable and the overall website look severe and intimidating.
Recommendation: Update the color palette to improve readability and make the site more welcoming while remaining professional and engaging.
Competitor Analysis
We examined nine different competitor websites, which included other digital archives, museums, art galleries, and art marketplaces, to draw inspiration from their strengths and features and make recommendations for the updated Amplification Project website. These were the main takeaways from competitor analyses:
Large slideshow banners for page headers allow sites to highlight artwork more prominently even when users are not looking at artwork specifically.
Viewing individual works of art should focus on the artwork as the center of attention while minimizing the amount of text description.
Allowing users to distinguish more common tags through bolding the text or highlighting the boxes helps with the search process.
A comprehensive search bar that allows users to search by different categories centralizes the searching feature on one page and makes it easier for users to navigate the site.
On the homepage, buttons that signify a clear division between exploring the archive and submitting to the archive streamline the process for users who are using the site for a specific reason.
Including the donation form directly on the site instead of redirecting to a third party site increases the trustworthiness of the website.
User Interviews
We interviewed five participants who had varying levels of experience with digital archives and asked them to speak about their browsing habits and research methods. We then asked them to navigate through the site and complete four tasks:
Finding a specific artwork using the map feature
Searching for related artwork using the tags
Finding a specific artwork using the search bar
Submitting an artwork to the archive
We then asked them to give their impressions of the archive after using it and also suggestions for improvement. These were some key takeaways from the user interviews.
The importance of guided exploration
Participants commonly visited archive sites (in person and online) without a specific purpose in mind, especially if they were not super knowledgeable about the topic before they visited. They enjoy wandering, taking the route that would be most convenient and easiest to view the greatest number of artworks.
“I need more information to gather interest in the topic. I’m not sure how to use it as someone without prior knowledge.”
“I want more highlighted work, like featured or popular, so I have somewhere easily that I can go to”.
These insights show that participants are usually unfamiliar with the information on the sites that they visit, but even though they prefer exploring to looking for specific pieces of information, they would appreciate the site offering guidance and suggestions on how to navigate the site and how to best prioritize which artworks to visit.
The map feature is not intuitive
During the first task where participants had to locate an artwork using the interactive map, all the participants struggled with deciphering what the color distribution on the map meant, especially the difference between the yellow and green dots. Some participants thought that the colors signified a heat map, with warmer colors suggesting greater amounts of artwork, but the colors did not align with this hypothesis. The numbers on the map that signified how many pieces of artwork were in each region were also in low contrast to the colors and overlooked by many participants.
“You should include information about where the artists are from and where they live, since this is about migration and it would be cool to see the movements.”
These insights showed that using a heat map may be a more intuitive way for participants to locate “hot spots” for artwork and locate pieces more easily. Identifying patterns of migration movement may also be a unique way to use the map feature in the context of this particular archive.
The submissions process needs more structure
Participants felt that the submissions process was overall too “unguided”. Four out of five participants did not consult the submissions guide while submitting their artwork, likely because it was on a separate page and difficult to navigate to. Participants were confused about the terminology used and did not understand the difference between “creator”, “contributor”, “format”, and “rights”. They also were not clear on how to format dates, cities, and countries where the artwork was made. Overall, these insights showed that participants wanted more guidance on how to format their answers to the submissions guide, which suggests that free response text boxes may not be the best option for users new to the submissions process.
The current aesthetic design of the site does more harm than good
“The site is intimidating for people who don’t know what they’re looking for and looks like a 2010 powerpoint”.
“The About Page needs to have an image because it currently looks creepy and like a security alert, and the overall color scheme of the site is stressful”.
Many of the participants suggested that the website could improve with cleaner colors, which would make the artwork and text easier to see. They also suggested utilizing more negative space to draw attention to important elements and give information room to breathe, as well as interesting typeface, accent colors, and larger images and videos to create a more immersive browsing experience. These insights showed that the current website did not do a good job of conveying its purpose and highlighting its artwork and could benefit from many aesthetic changes.
IDEATION
Problem Statement
Given the results of the user research, we knew that many changes would need to be made to the current Amplification Project site to best improve the user experience with the digital archive. We knew that we first had to improve the aesthetic design of the site by switching to a less threatening color palette and placing a greater emphasis on the art instead of the text. We also wanted to incorporate migration more thematically into the design through an additional resources page, a more prominent blog page, and an enhanced map feature. Finally, we proposed a complete restructuring of the site architecture to best organization information and facilitate the exploration and submissions process.
Feature Set
Updated earth tone color palette to better capture a natural and organic feel
Slideshow banners and clickable cards displaying art throughout the site, as well as featured art on the homepage
More negative space when viewing individual art pieces and gallery walls to showcase art collections
Resources and blog pages
Updated heat map feature
Streamlined menu bar for browsing options
Prominent search bar on home page allowing searches by category
Browsing by random option for users who want easy access to artwork
Separate browsing and submission options on the home page
More streamlined and guided submissions process
Embedded donations form
Contact and Login pages
DESIGN
User Flow
Our user flow reflects all the decisions we made in updating the site architecture to improve the navigation on the site and the grouping of information.
Low Fidelity Prototype
Prior to our low-fidelity prototype, we created a moodboard where we drew design inspiration from the sites we conducted competitor analyses on. We highlighted organizational features and page layouts that we believed would work well with our site, and completely updated the site structure from its original form in the low fidelity prototype.
moodboards and inspiration
initial wireframing
High Fidelity Prototype
Our high-fidelity prototype was a completely functional walkthrough of the redesigned archive with clickable links and reactive images. We maintained much of the content from the original archive and preserved all the images that had already been uploaded, simply showcasing them in a different way. For the additional elements that we added, such as the resources and blog page, we created the structure and design, but Dr. Carbone and her team had complete freedom in incorporating the content that they wanted. We also choose an earth-tone color palette to bring life to the site while reflecting the global nature of migration. Below are a few highlighted features that best encapsulated our design revisions.
Image Banner
Separation between browsing and submitting to the archive
Search Bar with Search by Category Options
Slideshow banner (which I am very proud of for animating :) )
All browsing options located on the same page under "Archive"
Artwork gallery that highlights the images and minimizes text
Submissions process with detailed guidelines and icons
Text hidden in tabs to decrease the amount of text on the screen at one time
Utilizing the map feature to showcase where the image was located from
Negative space
Prioritizing images over text (image fills up at least half of the page)
Conclusion
This was the first time that I got the opportunity to redesign a website, and it was very interesting to see how the redesign process was different from ideating a product entirely from scratch. I found that many things were the same, from user interviews to prototyping, and in fact, some things were even easier with the original archive site to reference at all times. I was extremely proud of the project because of how detailed my group and I were able to get into both the research and the design process, especially in such a short period of time. I felt extremely confident about our insights and the direction we were headed in throughout the project, and I loved how meaningful this project was to our group, Dr. Carbone and refugee activism.