Information

Role:

UX Designer - Team Lead


Collaborators:

Emily K

Kim L

Eileen P


Timeline:

4+ weeks

About

Online piracy was costing content creators both revenue and control over their intellectual property. WebWatch set out to tackle this problem, but users encountered obstacles such as a disorganized interface, technical language, inflexible workflows, and inconsistent branding.

WebWatch is designed to offer a seamless, user-friendly platform for content creators—including photographers, brands, and PR, news, and picture agencies—to track the use of their copyrighted content, simplify invoicing, and ensure proper compensation.


The Problem

How can we make WebWatch more user-friendly for creators? 

1

How can we make WebWatch’s navigation straightforward for content creators?

2

Problem Statements

01 - Research & Discovery

Heuristic Evaluation - What Wasn’t Working?

Our Process

Define

Ideate

Design

Discover

Cognitive Load

Critical information was obscured by excessive non-essential data and technical jargon. The former site contains an overwhelming amount of information that the user may not need immediately—or may not find relevant at all. The primary focus should be on enabling the user to upload their first photo seamlessly.

Redundancy

Having multiple items that seemingly do the same thing, resulting in cognitive overload.

Non-Functional Features

Tick boxes next to individual images as well as the clickable image labels below each image result in no discernible change when the user clicks on these.

Lack of Distinction

Establishing a hierarchy through visual design distinctions emphasizes the importance of using visual cues to distinguish between different types of content or elements in a user interface. Having the same button style for “Search” (which carries through a specific user action) and “Result” (which is actually a link to the Results page) is confusing to the user.

Unclear Navigation

Without clear categorization and navigation, users felt lost in a maze of information. User should have a way back to different pages (breadcrumbs, back buttons etc.)

User Interviews - Thoughts?

Shallow Branding

There is disconnection between the brand and its customers, as the branding appears to be superficial, incoherent, or inconsistent with what the company actually stands for.

Interviews were conducted in order to gain insights on target audience’s preferences and needs. These participants were selected by stakeholder.

Takeaways

need personalization

more user control

need clear navigation and organization of tools

Bruce Odell, 26

Freelance Photographer

“Most tracking platforms are too costly and complicated for me to use regularly. I want to combat piracy in a way that’s both efficient and easy to manage.”

Ellie Brown, 42

Agency Manager

“The options were a bit unclear, and some of the terminology felt confusing. I had trouble understanding certain sections, and navigation could be smoother. A few elements, like the statistic and success messages, could be more intuitive for better clarity.”

This competitor analysis examines the offerings, user experiences, and pricing models of key players in the market for image tracking and copyright protection solutions.

Competitor Analysis - What Do We Need to Do Better?

Onboarding

Dashboard

Blog

Pricing

...and the ultimate question is...

This analysis aims to provide insights that can shape the product strategy and design direction for WebWatch, based on what competing companies lack: personalized insights and detailed analytics.

How can we redesign WebWatch to enhance user-friendliness, streamline navigation, and empower content creators with better control over their content management?

Research Questions

02 - Define

User Research

User research is required to validate the design decisions and ensure the platform meets the needs and expectations of its target audience, starting with photographers worldwide.

What are the primary reasons why photographers find image tracking challenging?


What are the primary goals and pain points of photographers when using image-tracking platforms like Webwatch?


How do photographers currently approach the process of tracking the online use of their images?

How do photographers currently use image-tracking platforms, and what features or functionalities are most valuable to them?


What types of metrics do photographers keep track of when it comes to the use of their images?


What are photographers’ expectations and desires for a solution that simplifies the image-tracking process?

User personas were designed to help better understand the target audience and create user-centered designs

User Personas

User Interviews - Insights

There is a need for a streamlined, user-friendly platform that can consolidate image tracking across multiple sources and provide comprehensive results.

Offering an API or customizable interface could cater to the needs of larger agencies with high volumes of images.

Automated notifications and reporting features could save users time and effort while keeping them informed.

The ability to track posting dates and differentiate between authorized and unauthorized usage is crucial for many users.

Tracking image usage can lead to new business opportunities and revenue streams* beyond just licensing fees.

03 - Ideate



Goals:

Protect intellectual property rights and ensure proper compensation

Monitor reach and impact of his work

Streamline process of tracking image usage

Frustrations:

Existing monitoring methods are time-consuming

Paywalls and restricted access hinders image-tracking in certain publications

Working with companies that take a large percentage of settlements

Robert Simpson, 45

Professional Photographer

Personality Traits:

Pragmatic and attentive

Objective and analytical in decision-making

Organized and prefers structure

Motivations:

Wishes for fair compensation for work

Wants to demonstrate value and impact of his work

Fears losing potential revenue

Renee Pearson, 51

Agency Owner

Personality Traits:

Forward-thinking and focused

Logical and objective in decision-making

Organized

Motivations:

Wishes for fair compensation for clients

Wants to identify new business opportunities and expand client base

Fears losing potential revenue

Wants to maintain strong bonds with clients



Goals:

Monitor online image usage

Identify potential clients and brand partnerships

Streamline process of monitoring image usage and generate comprehensive reports

Frustrations:

Existing monitoring tools are not designed for agencies with large volumes of images

Manual validation of matches is time-consuming

There is lack of comprehensive coverage across platforms

Monitoring the Web,

Protecting Your Digital Assets

Enabling content creators to monitor and safeguard their work across the digital world

Overview

Notifications

Upload

Hello Megan,

This is what we have for you today

Statistics

Found Content

View All

Here are your recent matches.

Image 1.png

05/02/2025

Content Name

Status

1

Publishers

We found...

More Information

2

Composite Matches

We found...

More Information

This is the...

More Information

2

Total Matches Found

Quick Summary

20

Upload Remaining

You have...

More Information

Dashboard

Contents

Matches

Account

Settings

Support

Jan 15, 2025

Total Matches: 4

Image 2.png

06/12/2025

Image 3.png

07/23/2025

Image 4.png

08/01/2025

Image 5.png

08/02/2025

Image 6.png

08/03/2025

Line Graph

March, 2025 - April, 2025

After tackling WebWatch’s original structure and receiving users’ input in order to provide more autonomy, we were able to articulate the problem that needs to be solved and set a strong foundation for the design process.

User Flow

The user flow aims to deliver a seamless and intuitive user experience, enabling effortless navigation, easy access to features, and efficient task completion.

Sketch

To rapidly explore design possibilities, I started with hand-drawn sketches to visualize different user flows and screen layouts before moving into digital wireframing. This allowed me to iterate quickly and refine ideas before committing to high-fidelity designs.

Logo

Font family

Header and Body Font

Poppins

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

This is Header Size & Weight for Handheld

40, Regular

This is body size and weight for handheld

16 px, regular

This is meta data size and weight for handheld

12 px, regular

This is sub-header size and weight for handheld

20 px, bold

Mood Board

Iconography

HEX

000000


HEX

F6AE2D


HEX

77B1DB


HEX

6A6A6A


HEX

416F92


HEX

D4DEE6


HEX

FF312E


Colors

Other Elements

Try it for Free

Sign Up

Sign Up

Sign In

Sign In

First Last

EmailExample@gmail.com

**********

EmailExample@gmail.com

Sign In With Google

Image 123.png

Image 123.png

Image 123.png

Need More Uploads?

Want more uploads? Update your subscription/plan to get the most out of your uploads by switching your plan!

Switch Plans

Composite Matches

The image or part of the image was matched but it wasn’t in its original form

Ex: a collage with something else

Where has it been Published?

This is how many places your image was published in.

Ex: Daily Mail, New York Times, Peoples Magazine etc.

Name

Email

Password

Email

04 - Design

Unpopulated Dashboard

BEFORE

Unpopulated Dashboard

AFTER

Overview

Notifications

Upload

Hello Megan,

This is what we have for you today

Statistics

Found Content

Upload photo

View All

Upload a Photo to Start

0

Publishers

We found...

More Information

0

Composite Matches

We found...

More Information

This is the...

More Information

0

Total Matches Found

Quick Summary

0

Upload Remaining

You have...

More Information

Dashboard

Images

Matches

Account

Settings

Support

March, 2025 - April, 2025

Redesigning UI screens to transform a frustrating user experience into an intuitive and seamless one, through user research, design iteration, and strategic improvements

High Fidelity Screens

Content Page, Pt 1

BEFORE

Content Page, Pt 1

AFTER

My Contents

Notifications

Upload

Dashboard

Contents

Matches

Account

Settings

Support

My Contents

Matches

1 Publisher

2 Composite Matches

2 Headlines

Image 1.png

View Full Details

Uploaded On

May 02, 2025

03:12 PM

Library

Select Status

Sort

Image

Title

Date

Total Matches

Composite Matches

Status

Image 1.png

05/02/2025

4

2

View Details

4

Image 2.png

06/12/2025

2

View Details

8

Image 3.png

07/23/2025

4

View Details

Populated Dashboard

BEFORE

Populated Dashboard

AFTER

Overview

Notifications

Upload

Hello Megan,

This is what we have for you today

Statistics

Found Content

View All

Here are your recent matches.

Image 1.png

05/02/2025

Content Name

Status

1

Publishers

We found...

More Information

2

Composite Matches

We found...

More Information

This is the...

More Information

2

Total Matches Found

Quick Summary

20

Upload Remaining

You have...

More Information

Dashboard

Contents

Matches

Account

Settings

Support

Jan 15, 2025

Total Matches: 4

Image 2.png

06/12/2025

Image 3.png

07/23/2025

Image 4.png

08/01/2025

Image 5.png

08/02/2025

Image 6.png

08/03/2025

Line Graph

March, 2025 - April, 2025

Content Page, Pt 2

BEFORE

Content Page, Pt 2

AFTER

My Matches

Notifications

Upload

Dashboard

Contents

Matches

Account

Settings

Support

Detailed Results

Sort

March, 2025 - April, 2025

Full Match

Date Found

May 02, 2025

03:12 PM

Publisher

Beautifyl

Beautiful Landscapes

Headline

www.beautifylandscapes.com

Image URL

Matches

Download Full Report

2

Composite Matches

We found...

0

Publishers

We found...

0

Full Matches

We found...

0

Total Matches Found

We found...

Image 1.png

Uploaded On

May 02, 2025 at 03:12 PM

Composite Match

Headline

Cool Scenery

Image URL

www.awesomesceneries.com/black-white-red-landscape

Publisher

AwesomeSceneries

Date Found

May 02, 2025

03:12 PM

Full Match

Full Match

Headline

Amazing View

Image URL

www.traveltopia.com/top10placestovisit

Publisher

Traveltopia

Date Uploaded

May 02, 2025

03:12 PM

Profile

Log Out

Notifications

Upload

Hello Name,

This is what we have for you today...

Dashboard

Content

Settings

Click to upload or Drag & Drop

(Max. file size: 25 MB)

Upload

Upload a photo to begin

No Record Found

Quick Summary

Statistic

Meta Data: (caption, headline, date range)

Upload a new photo to see some data

Found Content

10

Upload Remaining

You have...

More Information

0

Publishers

We found...

More Information

0

Composite Matches

We found...

More Information

This is the...

More Information

0

Total Matches Found

Profile

Log Out

Notifications

Upload

Hello Name,

This is what we have for you today...

Dashboard

Content

Settings

Click to upload or Drag & Drop

(Max. file size: 25 MB)

Upload

Image 123.png

Image 123.png

Image 123.png

Quick Summary

5

Upload Remaining

You have...

2

Publishers

1

Composite Matches

We found...

This is the...

Statistic

Meta Data: (caption, headline, date range)

Upload a new photo to see some data

We found...

More Information

More Information

More Information

More Information

Found Content

1

Total Matches Found

If we had more time, we probably would produce low-fidelity screens to have a greater variety of concepts to choose from and have a bigger pool of participants for clearer metrics. Despite the rush, we all managed to push ourselves with each other’s support and finish by the desired deadline.

To improve my UI/UX skills in my own time, I continued working on the project and explored ways to enhance the functionality and appearance of these screens. I consulted with my teammates, and we decided to leverage existing design systems as a foundation. As a means of practice and self-improvement, I then created the mid-fi screens as shown above.

Resolution

The Delivery

Deliverables

The Mistake

Due to the previously mentioned time constraints, my team and I ended up with somewhat underwhelming mid-fidelity screens, and our design system was a bit disorganized. Here are several screens we proposed:

Due to time constraints, we weren't able to deliver a fully functional high-fidelity prototype. However, rather than just presenting another set of designs, we provided the CEO with a comprehensive package that included refreshed branding, dev-ready components, enhanced UI elements, and valuable user research insights.

Key Takeaways

As the team lead, I assigned roles to each team member and maintained direct communication with our client both during and outside of meetings. I challenged myself to step into a leadership role rather than simply following, which boosted my confidence in my accomplishments and my ability to collaborate with a team I could trust. In the end, I was incredibly proud of my team, seeing the hard work, time, and dedication we poured into this project.


Working for WebWatch was a highly rewarding experience that provided valuable insights, including understanding user and client needs, improving iterative design, enhancing communication skills, and strengthening problem-solving abilities. One of the biggest challenges we faced was time management. With more time, we likely would have created low-fidelity screens to explore a wider range of concepts and gathered a larger pool of participants for more precise metrics. However, with mutual support, we pushed ourselves and successfully met the deadline.


Thank you for viewing.