UX Design

UI Design

Figma

Simplifying Bug Reporting with a Secure & User-Friendly Design

Client

Oil & Gas

Service

UI/UX Design

Project Type

Web App

Date

Aug 13, 2023

My Role

Junior UI/UX Designer – responsible for UI design, research synthesis, and design implementation under a lead designer

Project Summary

This project aimed to improve the user experience of a bug bounty platform used by security researchers and internal reviewers. The original platform had inconsistent interfaces, confusing navigation, and poor readability. My role involved identifying key usability issues, refining user flows, and designing cleaner, more intuitive interfaces while strictly following the client’s design guidelines for typography, colors, and layout.

The Challenge

The platform had usability gaps that hindered smooth bug submission and review:

  • Inconsistent layout across pages confused users about the system state

  • Reviewers struggled to navigate submitted reports efficiently

  • Settings and rule pages lacked visual hierarchy, making important controls hard to find

How I Discovered the Problem

During internal review sessions with the lead designer:

  • I analyzed existing user flows and identified repeated user confusion points

  • Conducted heuristic evaluation of the UI using Jakob Nielsen’s principles

  • Shadowed internal users to see how they navigated the platform

User Insights & Observations

  • Users missed important information due to lack of emphasis (e.g., report severity)

  • Repetitive content and icons without meaning led to cognitive load

  • Visual noise made the platform feel overwhelming, especially to new researchers

The Solution

I designed a cleaner, more structured UI that emphasizes clarity and hierarchy:

Home Page: Clearly grouped programs with hover states and consistent cards

Rules Page: Sectioned layouts, uniform iconography, and accessible typography

Review Section: Organized tabs and improved spacing for easier readability

Settings: Grouped controls, added labels, and introduced visual feedback

✅ Followed provided corporate design system to ensure branding consistency

Design Artifacts:

  • Wireframes (low fidelity)

  • High-fidelity mockups (as per final screens)

  • UI components reused per system rules

Results

  • Improved task clarity for researchers and reviewers

  • Reduced interface clutter by 20% (as per internal review comments)

  • Platform now supports quicker decision-making during the report review process

  • Received positive feedback from internal security testers.

Create a free website with Framer, the website builder loved by startups, designers and agencies.