ProjectCase Study

CatchScan

A dashboard concept for automated copyright monitoring that helps creators review ownership signals through a clear workflow.

Date

2021

Overview

CatchScan helps content creators protect their work through automated copyright monitoring. Creators upload images to a web application, and the platform scans for potential unauthorized use.

Our task was to redesign the dashboard and improve the product architecture around CatchScan's existing matching algorithm.

02Problem

Problem

The beta product proved the core functionality, but the dashboard had fragmented user flows and an unclear hierarchy. The experience did not yet reflect the value of the service.

03Objective

Objective

The goal was to create a clear dashboard around the copyright-matching algorithm. We focused on information architecture, navigation, and task flows so creators could upload work, monitor results, and understand their options.

04Design Thinking

Design Thinking

We used a design-thinking process to keep the work grounded in creators' needs and revisit assumptions as we learned more.

The process moved through empathize, define, ideate, prototype, and test, with iteration between stages when the evidence called for it.

05Empathize

Empathize

We started by identifying the creators most likely to use the product and understanding their needs, expectations, and concerns.

Benchmarking

Benchmarking helped us compare competing solutions and identify the strengths, gaps, and distinctive aspects of the CatchScan concept.

User Research

Before the interviews, we grouped potential users to define the audience for the web application.

We combined behavioral and psychographic criteria with demographic and geographic factors.

The research pointed toward English-speaking content creators aged 18 to 35 as the primary audience.

Empathy Map

We organized interview findings in an empathy map.

This helped us understand the users more clearly and prioritize their needs.

Personas

We created two personas to make those needs tangible and identify which parts of the experience deserved the most attention.

User Journey

A user journey mapped the process from submitting a case onward, including opportunities to improve clarity and reduce frustration.

06Define

Define

Human-centered problem statements

We reframed the challenge from the users' point of view.

We condensed the findings into clear, one-sentence problem statements.

We turned those statements into questions that could guide ideation.

Content Inventory

A content inventory helped define the scope and ensure the necessary product elements were covered.

07Ideate

Ideate

With the user needs defined, we moved into ideation.

Brainstorm

Brainstorming translated the research findings and problem statements into possible product directions.

We chose a dashboard structure because it could support the required tools while keeping the main actions visible.

We used restrained glassmorphism to separate important objects and create hierarchy.

Information Architecture

The information architecture was designed to minimize effort: clear grouping, readable typography, and direct access to the tasks creators needed most.

08Prototype

Prototype

Sketches

We started with sketches to capture the initial direction.

Low-Fidelity Wireframes

Low-fidelity wireframes made the layout and key interface elements more precise.

The research supported a desktop-first approach because the product needed to present several professional tools in a single workspace.

High-Fidelity Mockups

The wireframes then developed into high-fidelity mockups.

We used Atomic Design to organize the interface and support collaboration.

Atomic Design

The system started with atoms: the smallest reusable interface elements.

Combining atoms produced molecules such as navigation buttons and content cards.

Those elements formed larger organisms such as navigation areas and content libraries.

Templates established the page-level structure.

The final pages combined those templates with real content.

Colors

Color shapes the first impression and helps users read the interface. We kept CatchScan's existing blue and orange palette to connect the dashboard with the brand.

Maintaining consistency with the marketing website made the product feel more coherent.

Iterations

Several iterations helped us simplify the visual direction and find a more balanced solution.

The final concept uses a simple background so the content and actions stay in focus.

09Test

Test

We used five-second and think-aloud tests to check whether the calls to action were visible and whether users could move through the product without confusion.

010Realization

Realization

We implemented the project with HTML, CSS, JavaScript, and Tailwind CSS.

Because the service depends on personal content and case tracking, sign-up and login were essential parts of the experience.

The sign-up sequence asks for essential information first, then introduces additional inputs only when they are needed.

012Summary

Summary

The final dashboard gives creators a structured way to upload work, review matches, understand analytics, and decide what to do next.

The project combined research, information architecture, interface design, and frontend implementation into a clearer copyright-monitoring experience.

MoreSelected Work