Athena

Meta
Athena is a risk detection tool utilized at Meta, designed to scan various social media platforms to identify and mitigate risks. These risks encompass hate speech, violence, and misinformation. The primary users of Athena are investigators responsible for monitoring suspicious content, identifying relevant Content IDs, and exporting them for further investigation. In line with these objectives, the focus of this project was to enhance the Signal Detail Page of Athena, enabling users to efficiently explore specific data and locate content related to particular risks.
Timeline
June 2022 - August 2022
7 weeks
Role
Product Design Intern
Skills
Interaction Design
Visual Design
Enterprise Tool

PROBLEM

The Signal Detail Page of Athena consists of three disjointed sections that lack intuitiveness and clarity. This setup poses challenges for users in comprehending tool functionalities and effectively analyzing the presented data

RESEARCH

Users lacked awareness of certain features and struggled with their usage

User interviews revealed issues with all three components of Athena. The chart was difficult to comprehend, the table lacked intuitiveness, and the preview presented challenges in terms of visibility and efficiency. In fact, many users were unaware of the existence of certain features and faced challenges in understanding how to effectively utilize them. These findings highlighted the urgent need for improved clarity and interactivity across all three sections.
image
Users aren't interacting with the Preview
Users have reported that the preview feature in Athena is inefficient and time-consuming. It takes too long to open each preview, leading to frustration and a desire for a more streamlined process. Consequently, users often opt to export the IDs to another tool instead of individually opening and closing each preview.
insert_chart
Chart is ambiguous & disconnected from other sections
Users found the chart in Athena to be confusing and unclear. They noted that the wording was ambiguous, and users struggled to understand its relationship to the data detailed in the table. As a result, they ignored the chart entirely and missed out on potentially useful information.
table_rows
Table lacks clarity and efficiency
Users struggled to understand the meaning of the scores and faced difficulties in effectively filtering the table. Many also expressed a need for more context to aid their understanding. Despite being the main focus, the table's non-intuitive nature hindered users from fully utilizing its potential.

THE DESIGN GOAL

To form connections between all three sections, creating a more streamlined, unified experience. This can be achieved by enhancing the efficiency of the table and preview, while also improving the clarity and interactivity of the chart.

IDEATION

FINAL DESIGNS

By employing visual design and interactive elements, a unified experience can be created, seamlessly connecting all aspects of the user experience

Athena underwent a comprehensive redesign, encompassing both minor and major adjustments. Minor changes involved button placement and wording to improve usability. The layout was made more intuitive for efficient navigation. Major changes included redesigning the graph and improving the connections between the graph, table, and preview. These changes addressed user confusion and frustration, while increasing interactions between sections for a clearer and easier-to-understand page.

DESIGN DETAILS

Chart Visual Design
The chart received a visual lift to enhance its clarity. The focus was on improving readability and comprehension by updating the wording, visuals, and organization. The charts were redesigned to be inviting and informative, highlighting important information such as averages and peaks. In addition to incorporating clearer time markers, a more specific chart legend, and informative tooltips.
Chart Animation
A significant problem was the lack of user interaction with the chart and their confusion about its connection to the table. To address this, I implemented interactive features that seamlessly connected the two sections and encouraged users to engage with the chart. Upon opening the page, the chart dynamically grows from zero, highlighting the peaks and indicating its interactive nature. Additionally, a continuous average line guides users towards important information. Interacting with the chart also triggers a corresponding shift in the table, dynamically reconfiguring it to align with the date and time displayed in the chart.
Preview Animation
Another interaction enhancement was the addition of a preview animation. The preview feature provides a quick overview of content IDs, which can include posts, videos, and more. Users can access the preview by clicking on either the chart or the table. For instance, clicking on a data point in the chart will display the corresponding preview on the right side. To avoid overwhelming users with multiple data points, a pulse animation will highlight the selected data point and remain on the screen. This animation will also occur when activating the preview by selecting an ID in the table.
Table Animation
Lastly, the table animation was implemented to address the disconnect between Athena’s chart and table. Athena operates so that the points on the chart don’t relate to a single Content ID in the table, but rather multiple IDs that occur during that specific date and time. To circumvent this issue, the table animates in response to the chart, or when a data point is selected. For example, selecting the June 17th data point will shift the Content IDs, placing those with the highest views at the top. While it is possible to achieve this without animation, it would lack intuitiveness, interactivity, and visual appeal. This animation serves to alert users of the chart's interactivity and provides a clever solution for developers without requiring a restructuring of data organization.

IMPACT & TAKEAWAYS

01
Impact
These changes have the potential for significant impact. The simplified and intuitive design of the table would enhance productivity, clarity, and reduce the time engineers spend on the site. By linking the chart, table, and preview, users would have a more responsive and enjoyable experience. Additionally, transforming the preview into a side panel would improve accessibility to important IDs. Overall, Athena would become more interactive, clear, and efficient, resulting in time, cost, and energy savings.
02
Takeaways
Athena was my first experience working with a team on such a large scale, as the redesign had the potential to impact millions of users. This opportunity taught me valuable lessons in collaborating with cross-functional teams and prioritizing user needs in my designs. Working alongside talented designers and engineers, I was able to learn from their wealth of experience. Athena reaffirmed my passion for equitable and accessible design, and I am grateful to have contributed to a project that prioritized integrity and security.
Hungry for more? Check out the Slide Deck  favorite
EmailLinkedinresume