All work

About

Resume

Get in touch

CASE STUDY

Refined a cluttered dashboard by simplifying structure and cutting noise, making it easier to navigate and move faster.

Refined a cluttered dashboard by simplifying structure and cutting noise, making it easier to navigate and move faster.

Timeline :

Nov 25 - Jan 26

Platform :

Web application

Role :

Product designer

Industry :

Product management tool

Introduction

Since we were redesigning the chrome plugin, we also took the opportunity to revamp the dashboard screens. The existing dashboards had been built with minimal effort from both design and engineering, making them a good fit for improvement.

Focusing on key parts of the product.

#1

Set screen

#2

View screen

Prototype:

Cassini dashboard

Prototype - Built using Claude Code

Storyboard

PROBLEM STATEMENT

The dashboard failed to scale with user needs, creating friction in navigation, content discovery and overall usability. Prompting a complete redesign aligned with the new product direction.

The dashboard failed to scale with user needs, creating friction in navigation, content discovery and overall usability. Prompting a complete redesign aligned with the new product direction.

Key Insights

#1

The dashboard is a decision-making surface, not a browsing page. If items on visible, users will ignore.

#2

Core content was getting ignored, as the old design was pushing attention on multiple spots.

#3

We had a lot of features but it was unclear that why we have these features.

#4

Mismatch between plugin and dashboard, user expect a consistent experience all across the platform

Core problems

#1

Poor content hierarchy, everything competes for attention.

#2

Broken content scannability. Cards don’t scale properly across screens.

#3

Confusing workflows due to misleading copy making users feel lost and unsure.

#4

Lacked consistency across products, dashboard doesn’t align with chrome plugin experience

Goals alignment

BUSINESS GOALS

Increase engagement with

added content

Increase engagement with added content

Increase engagement with added content

Encourage users to interact with their added sets frequently by making content easier to browse.

Improve activation, users actually create sets

Reduce friction in the set creation flow so new users can quickly experience the product’s core value.

USER GOALS

Quickly scan and identify the right set

Help users to grasp key information in a glance, so they choose the right set without opening multiple sets.

Perform actions quickly


Perform actions quickly

Minimizing confusion and unnecessary steps for key actions like creating set, uploading or adding links..

Old screens of Cassini dashboard

Dashboard - New

Overall

impact

Overall impact

Simplified structure & visual grouping

Expected

To make browsing and managing set significantly faster.

Introducting a clearer hierarchy & consistent

Reduced

Cognitive load, especially for new users.

Added contextually key actions

Improved

Task completion and overall efficiency.

Built orbit design system

Made it easier

To add new features without increasing complexity for designers & engineers.

Process

01.

Initial thoughts of overall experience

Used the product firsthand to evaluate the experience and identify surface-level issues, uncovering areas that felt confusing or frustrating.

02.

Audit existing screens

and flows

Audit existing screens and flows

Went a level deeper by mapping all dashboard screens in Figjam to uncover issues across usability, flows, content, hierarchy, accessibility and interactions.

03.

Shaping the core components

Started with the core building blocks of the experience, exploring multiple iterations and testing them within the dashboard. The focus was on getting the right balance so that the cards scale well. Most importantly, they had to work seamlessly in big screens, without overpowering the interface or competing for attention.

Understood audit insights to improve hierarchy and clarity. Rapidly iterated on layouts to reduce noise & maintain consistency all across.


Created a prototype to simulate end-to-end experience for smooth handoff.

Core components - Set &

view cards

Core components -

Set & view cards

The goal was simple: help users understand what’s important at a glance and act on it quickly. This was achieved through multiple iterations of the set and view card designs.

Focusing on key parts of the product.

#1

Set card

#2

View card

Problems with set and view cards

  • Inconsistent layouts and weak hierarchy made it difficult to quickly scan multiple cards and identify the right one.

  • Thumbnails didn’t provide enough clarity, especially for zoomed in images, making it hard to recognize content.

  • Important information was either missing, repetitive, or poorly prioritized.

  • The layout didn’t scale well when multiple cards were displayed, excessive spacing due to scaling for wider screens,

  • Visual noise made it difficult to focus on what mattered.

Iterations

Iterations

Solutions implemented

  1. Improving information hierarchy

  1. Improving information

    hierarchy

  • Prioritized key data points to show only what matters at a glance. Grouped related metadata like ownership, activity, and privacy for better clarity

Prioritized key data points to show only what matters at a glance. Grouped related metadata like ownership, activity, and privacy for better clarity

  • Reduced redundancy of unnecessary information. Highlighted important states like updated without adding visual noise.

Reduced redundancy of unnecessary information. Highlighted important states like updated without adding visual noise.

  1. Designing for scalability and balance

  • Balanced visual weight so no single card overpowers others and optimized the layout to work seamlessly across multiple cards

Balanced visual weight so no single card overpowers others and optimized the layout to work seamlessly across multiple cards

  • Ensured consistent spacing and alignment for a cohesive grid and made the card adaptable across different screen sizes without losing clarity

Ensured consistent spacing and alignment for a cohesive grid and made the card adaptable across different screen sizes without losing clarity

Set card

Set card

  1. Stronger visual context

  • Since a set is a collection of views, I designed it to feel like a folder. This helped strike the right balance between visual appeal and clarity—I didn’t want to compromise on either, so I arrived at this approach.

Since a set is a collection of views, I designed it to feel like a folder. This helped strike the right balance between visual appeal and clarity—I didn’t want to compromise on either, so I arrived at this approach.

  • Enhanced thumbnails to improve content recognition, also improved the indicators design (IMG / URL)

Enhanced thumbnails to improve content recognition, also improved the indicators design (IMG / URL)

View card

View card

Layout - Set & view page, side navigation

The Set page offers a quick, scannable overview of grouped content, while the View page allows users to explore and act on items without losing context. A minimal side navigation ensures seamless and intuitive movement across the product.

Problems with set & view page

  • The old design didn’t have a navigation system, made it harder to move across different sections.

  • The layout wasn’t designed to accommodate new features or sections, making future expansion difficult without breaking the experience.

  • Important elements were crammed into the top, while large empty areas reduced effective use of space.

  • Other offerings like the chrome plugin and figma plugin were not visible, limiting user awareness of the ecosystem.

  • Key actions and content were not clearly structured, leading to confusion and inefficient workflows.

Set and view screens

Solutions implemented

  1. Introduced a Persistent Side Navigation

  • Created a clear, always-visible navigation system. Enabled quick access to key sections like Home, Starred, Shared, and Archived. Reduced dependency on top-level navigation

Created a clear, always-visible navigation system. Enabled quick access to key sections like Home, Starred, Shared, and Archived. Reduced dependency on top-level navigation

  1. Designed for scalability

  • Structured the layout to support future features without redesigning the system. Introduced categorised navigation to logically group sections. Created a flexible foundation that can grow with the product

Structured the layout to support future features without redesigning the system. Introduced categorised navigation to logically group sections. Created a flexible foundation that can grow with the product

Side navigation

  1. Enhanced Product Discoverability

  • Added sections for Chrome and Figma plugins within navigation Created awareness of the broader Cassini ecosystem. Encouraged cross-product adoption

Added sections for Chrome and Figma plugins within navigation Created awareness of the broader Cassini ecosystem. Encouraged cross-product adoption

Key Flows - Create a set

"Creating a set" is simple, upload images or add links to group content together and keep everything organised in one place. This allows them to curate and organize information in a way that fits their workflow.

Problems with set and view cards

  • Both "upload" and "add a link" existed without a clear path. The UI implied upload and URL input too, no distinction between the two modes.

  • Users focused on the centre and completely missed naming the set before proceeding. It was tucked in a corner.

  • “Get started by uploading some views” was repeated in both the title and upload card, adding noise without value.

  • “Add a URL” was labeled without a visible input field, adding an unnecessary extra step.

  • “Review a live website” overlay surfaced settings upfront, distracting from the core task - viewport sizes, resolution, scaling factor, advanced options.

  • “Add a URL” implies a live preview, but the system returns a static screenshot—without communicating it, causing confusion.

Old designs

Solutions implemented

  1. Tab-based mode selection

  • Two clear tabs - "Upload designs" and "Add website link" separate the two modes entirely. Users switch between them without confusion about what action is active.

Two clear tabs - "Upload designs" and "Add website link" separate the two modes entirely. Users switch between them without confusion about what action is active.

Upload designs - Video

  1. Set name surfaced prominently

  • The set name field is placed above the upload area, directly in the user's natural reading path, making it impossible to miss before adding content.

The set name field is placed above the upload area, directly in the user's natural reading path, making it impossible to miss before adding content.

  1. Integrated, focused layout

  • The website link flow is built into the main page (not a side panel). Users enter a URL and see viewport options inline no overlay, no competing context.

The website link flow is built into the main page (not a side panel). Users enter a URL and see viewport options inline no overlay, no competing context.

  1. Transparent outcome

  • A note below the CTA explains: "For security, we capture a static screenshot of your URL" sets the right expectation before the user proceeds.

A note below the CTA explains: "For security, we capture a static screenshot of your URL" sets the right expectation before the user proceeds.

Add a website link - Video

Enhancements & Features

Based on key usability gaps, we introduced a set of enhancements focused on improving clarity, prioritization, and collaboration. These features help users quickly identify what matters, understand context, and manage their workspace more effectively.

User stories

  • I want to quickly identify the last set I worked on or sets that need attention, so that I can resume work without wasting time.

  • I want to easily find and prioritize relevant sets, so that I can focus on what matters most.

  • I want to understand what actions I can perform in shared sets, so that I can collaborate with confidence.

  • I want to know what has changed since I last opened a set, so that I can stay updated without opening every set.

  • I want signals that indicate the importance of a set, so that I can decide whether to act on it or ignore it.

  • I want to focus only on relevant sets, so that my dashboard stays clean and manageable.

Solutions implemented

  1. Improved Discovery & Prioritization

  • Introduced a recent tab and relevant sort options to quickly access recently worked sets.

  • Added starred set, to keep important items easily accessible

  • Displayed last edited timestamps for better context

  1. Better Update Visibility

  1. Thumbnail-First Decision

    Making

  • Introduced "Updated" tags to highlight recent changes. Helped users quickly answer: "Do I need to act on this?"

GIFs

  1. Clear collaboration & permissions

  • Added "created by you / Shared by X" icons + tag in set

  • Introduced permission hints (Editable / view only). Clarified what actions users can perform within a set

  1. Cleaner workspace management

  • Added archive functionality to remove inactive sets from the main view. Helped users focus on relevant and active work

  • Improved overall dashboard clarity over time

Working prototype

Prototype - Built using Claude Code

Orbit design system

Since Cassini is inspired by a satellite, we wanted the design system to stay within the same space-themed narrative. The idea of a satellite naturally led us to orbit, which felt like a fitting and intuitive name hence, Orbit design system.


Based on key usability gaps, we introduced a set of enhancements focused on improving clarity, prioritization, and collaboration. These features help users quickly identify what matters, understand context, and manage their workspace more effectively.

What i'd improve

  1. Add more clarity in key moments

  • For example, a note below the CTA explaining “For security, we capture a static screenshot of your URL” This should have highlighted in a better way.

Our team uses Cassini to collaborate with clients, we observed real usage to understand how workflow is handled.

  1. Encourage users to use more of the plugin

  • People naturally resist downloading anything new unless the value is immediately obvious. Encourage them to download and use it.

Audited key screens and user flows to identify breakdowns in real usage. Reviewing and documenting friction points in FigJam,

Key learnings

#1

Users don’t want data, they want meaning: why is this important, how will it help me.

#2

Designing independently doesn’t work. Everything needs to be part of a system.

#3

Design decisions should prioritize: Hierarchy, visual weight, quick recognition. Not make it look pretty.

#4

Scalability should be intentional, just solving today’s problem should not break when the product grows.

5:46:10 AM - 9 May 2026

Created by - Rohit Koppula

5:46:10 AM - 9 May 2026

Created by - Rohit Koppula

5:46:10 AM - 9 May 2026

Created by - Rohit Koppula