ABOUT THE Product
About

Clarity, a cybersecurity AI startup, aims to protect organizations and individuals from the threats of deepfakes. By detecting deepfakes at scale and in realtime, the startup aims to enable users to avoid advanced social engineering and phishing attacks.

The project's main objective was to design Clarity Studio, a platform that allows users to upload media files—images, videos, and audio—to verify their authenticity and detect deepfakes. The platform also provides in-depth explainability for its analysis.

The Goals

The project's aim was to design an innovative and transparent studio from scratch. The targeted opportunities were:

1. Incorporate high explainability

2. Prioritize interactivity

3. Gain user's trust in Clarity's verdict

4. Include customization

Constraints

1. Performance: The studio should be able to handle high data volumes efficiently, minimizing delays or latency issues.

2. Accuracy: The solution should ensure accurate and reliable deepfake scores.

3. Customization: Users should have the ability to customize media files based on their specific needs.

3. User Experience: The studio should be intuitive, requiring minimal training, and should improve users' trust in the media.

My Role

As the sole product designer at Clarity, my role included:

1. Conducting competitor analysis

2. Iterating and exploring solutions

3. Writing documentation and organizing meetings to discuss explorations, pros, cons, and feasibility concerns.

4. Creating high fidelity mockups and prototypes.

5. Collaborating closely with developers to align design with backend capabilities

6. Overseeing the project handoff to the development team until completion.

Product Introduction

Clarity Studio is a platform that allows users to upload media files—images, videos, and audio—to verify their authenticity and detect deepfakes. The platform also provides in-depth explainability for its analysis.

The Problem

Deepfakes in digital media is rapidly evolving due to generative AI. In 2023, 15 billion images were created using AI. Deepfakes grew 10X between 2022 and 2023.

The Solution

Clarity studio detects deepfakes. It can connect to any source of digital media and provides reliable AI detection.

DEFINE
Identifying Requirements

The long-term vision for the studio is to become the universally preferred tool for deepfake detection. To achieve this, our initial user research focused on forensic experts. These experts sought a reliable tool to support their legal reports and provide credible evidence for court proceedings.

The key requirements, gathered from user interviews with forensic experts, are outlined below.

The studio must mirror aesthetics familiar to forensic experts.

Experts seek the ability to customize and add their expertise.

The studio must be fully transparent.

Experts want a highly-interactive studio.

Proposed Solutions

A dark-mode studio to it align with forensic experts' technical backgrounds.

A Step-wizard to upload reports, add comments, edit score, and export media files.

Segment breakdowns providing key details, including Results Analysis, Detector Types, Detector Families, and Detector Levels.

Click and hover functionality for each segment breakdown, and for video and audio files, create an interactive timeline featuring a draggable marker.

DEVELOP
The User Journey

Once I had formulated a clear idea of the requirements and target user, I began by meticulously designing the user journey. My objective was to establish a well-defined pathway for the user to upload media files and analyze their authenticity. This step is necessary to help align with the user's expectations.

Designing the Solution - Light Mode to Dark Mode

During the design process, I tested various design solutions. This iterative process involved creating sketch wireframes to explore different layout options, mid-fidelity designs to refine the user interface, and ultimately high-fidelity mocks that captured the desired end-state.

Initially, I considered a light-mode design for the media analysis screen and began experimenting with colors. However, I quickly realized that dark mode better aligns with the technical background and preferences of the target users. Additionally, dark mode enhances the vivid colors of the detectors and the brand's green, providing sharper contrast and making CTAs more prominent.

Ensuring Customization - The Step Wizard

Customization was a key requirement, and the step wizard fulfills this by offering tailored options while also serving as an accessible guide. Below are the various states: User types (Clarity Admin vs. Expert User), pro view vs. default toggle, and clicked states vs. default states.

Displaying Transparency - Segment Breakdown

Achieving transparency was a key objective to ensure user trust in Clarity's deepfake detection score. The analysis screen is organized into key segments: Analysis Results, the raw media, Detector Types, Detector Families, and Detectors Level.

Incorporating Interactive Features

One of the primary objectives was to design a highly interactive studio. I achieved this by incorporating hover and click functionalities, popovers, and scales to enhance user engagement and interactivity.

Designing The Analysis Media Screen

Given the variety of actions users can take on the media analysis screen, my goal was to ensure they are immediately aware of all available options. To achieve this, I designed a recommended step wizard strategically placed at the top of the screen. This placement provides users with a clear, accessible guide to navigate their actions. Additionally, I incorporated clear segment titles to further assist users in quickly understanding the purpose and information within each section.

DEFINE
Identifying Requirements - Home Screen

Personalization for each user.

Ensure the user understands how to upload media.

Support both personal and organization media.

Ensure that the user has information about the authencity of existing media files before switch into the media analysis screen.

Designing The Home Screen - Ensuring The User is Informed

My goal for the home screen was to design a minimalist interface that clearly communicates the product's purpose while guiding the user through key actions. I wanted users to immediately recognize what the studio does, understand media file requirements. To achieve this, I implemented clear CTAs and used  the color green to draw the user's attention to the upload button, file icons, and media type icons. Additionally, by leveraging the natural left-to-right eye movement, the layout ensures users quickly grasp that the studio is an AI-powered deepfake detection tool.

The design system

I designed the UI library from scratch to support the studio's mission of being innovative, transparent, and trustworthy.

Below are some key UI components. Please note that the full UI library is not included here.

DELIVER
Live Demo

Following the design handoff to the development team, the studio is now live.

Metrics
Measuring success

Since the studio's launch, thousands of media files have been uploaded by forensic experts, news organizations, and government agencies. The studio serves as a vital tool for preserving trust in the media.

next project

Stealth cybersecurity
startup

Copyright © Alyssa Hugel