Case study
An admin dashboard for an online course business: courses, categories, students, instructors, sales and messaging, audited screen by screen and rebuilt on one token layer.
Overview
Coursedesk is an admin product for running an online course business: courses, categories, students, instructors, sales and messaging. The client came to us with a file that already covered 19 modules in Light, Dark and Mobile, but had no system underneath: no shared colors, no text styles, nothing reusable. Dark mode was 19 hand-duplicated screens. We audited every screen, then rebuilt the foundations and fixed what we found.
Client
The client's name and internal figures are confidential. Everything shown here is the design work itself: a UX audit of 57 screens, the design system built underneath them, and the SaaS product design that closed every dead end the audit found.
The problem
Every color was a loose hex, every text node carried its own size and line-height, and dark mode existed only as copies. The copies had already drifted: the status chips still wore their light backgrounds on a near-black table, because nobody had repainted them.
A brand change meant editing 19 screens by hand.
No tokens, no styles: 34 hex values read off individual layers.
A reset flow stopping at OTP, deletes with no confirmation, an axis that lied.
Who it serves
Everything here is operated by a single signed-in administrator, Riya, the account in every header. The screens pull her work in two directions: watching numbers that have to be trustworthy, and maintaining records that have to be complete. Both profiles below are drawn from what the screens actually ask for.
Goals
Correct every defect while leaving the existing visual language untouched. The look was working; the foundations were not.
Move from 19 duplicated screens to one token layer, so a theme change becomes a variable edit.
Design the screens the interface already promises: the reset step, the add and view screens, the delete confirmation, the empty state.
Named tokens, a type ramp, elevation styles and a working prototype, handed over as-is.
Audit
Every screen, layer name and text node was read before anything changed. The defects grouped into six kinds, and every count below is measured from the file, not estimated.
Forgot Password → Enter OTP → nothing. There was no screen to set the new password, so the journey the product advertises could not complete.
“Add New Category” and the per-row view icons opened nothing. 93 trash icons had no confirmation. The notification bell had nowhere to go.
$4,80,655 used lakh grouping on a dollar figure. Sales rows ran out of date order. Pagination promised 50 records and reached four pages.
The revenue axis ran $0, $500, $1000, $2000, $3000, $5000 at equal spacing, so half the plot covered $0 to 1,000 and the curve overstated its growth.
Filter tiles were still named Mobiles, Laptops, Headphones and Smart Watch, offering three categories that did not exist in the product.
No shared colors, text styles or effects. 34 raw hexes, 17 corner radii including two fractional, and dark mode duplicated by hand.
Architecture
Eight top-level destinations, with the records modules repeating a single list → view → add → delete pattern. Naming the pattern is what exposed the gaps: screens shown in green did not exist before this project.
Green: screens added in this project.
Foundations
Desktop screens are built on a 1920 frame with a 1824 content width and 32px gutters; mobile uses 375 with 16px gutters. Every screen exists in all three variants, Light, Dark and Mobile, so nothing is a cut-down of anything else.
Components
The product draws on an existing component library. Rather than rebuild it, we built a token layer on top of it, so a button's fill and a field's border now resolve through variables in both modes and the library can be themed and maintained.
Feature 01
Login offered “Forgot Password?”, which led to an email step, which led to a five-box OTP screen, and then nothing. There was no screen to set the new password. The new step reuses the same split layout, the same Input Field component and the same button, so it reads as part of the original set rather than an addition to it.
Feature 02
Coursedesk opens on the dashboard: earnings, course and enrollment counts, a twelve-month revenue curve, top instructors and the most recent sales. It was also where the worst data defects lived: a non-linear axis, a dollar figure in lakh grouping, and one order ID repeated down the whole table. All three are corrected here.
Click map
A design-intent click map of the dashboard: heat sits only on interactive targets (buttons, tabs, links, menus), weighted by how central each action is to an administrator's day. It maps layout decisions, not recorded sessions.
It is the only solid white button on the green header, set apart from the year filter beside it, so it draws the hottest expected click on the screen.
The day runs through these records modules; Message and Settings sit at the end of the row and stay cool.
The header and the revenue card each carry a “This Year” dropdown, placed next to the figures it scopes so the period being viewed is never ambiguous.
Recent sales hand off to the full Sales module through See All; per-row view icons get lighter heat, fading down the table.
The filled message buttons pull more than the “…” menus beside them; search, bell and avatar are utility clicks at the edge.
Low → high expected clicks. Design-intent map, not recorded data.
Feature 03
Courses runs a grid and a list off the same route, with search, a filter dialog and an add flow. The dialog was the clearest inherited debt in the file: its tiles were still named Mobiles, Laptops, Headphones and Smart Watch, three of its four categories did not exist, it floated with no backdrop, and it used checkboxes for three mutually exclusive sort options.
Feature 04
Categories shipped with an “Add New Category” button, a view icon on every row and a delete icon on every row. None of the three had a destination. The module now has its add screen, its delete confirmation and a zero-data state, and the toggle and row actions are reachable on mobile, which they had never been.
Feature 05
Categories, Students, Instructors and Sales all run the same table: search, a primary action, sortable columns, per-row view, edit and delete, and a footer counter. Making that pattern explicit is what surfaced the gaps, and what let five mobile tables be rebuilt as stacked cards without redrawing a single cell.
Feature 06
Sales is the module an administrator is judged on. It shipped with one order ID repeated 54 times, rows out of date order, and a footer promising fifty records across four reachable pages. Each row now carries a unique descending ID matched to its date, and the counts divide evenly into the pagination that is actually shown.
Feature 07
Every one of these was implied by a control that already shipped: a button, an icon, a bell. All six were built by cloning the nearest existing screen so the navigation, spacing, components and tokens came along unchanged, then reworked through component properties rather than redrawn.
Data integrity
The revenue chart's gridlines were evenly spaced but labeled $0, $500, $1000, $2000, $3000, $5000. Half the plot area covered $0 to 1,000 and the other half covered $1,000 to 5,000, so the curve overstated its own growth. The area fill was also blue under a green line, and the period control read “This Month” above twelve months of data.
$0 · $500 · $1000 · $2000 · $3000 · $5000 at equal spacing
$0 · $1000 · $2000 · $3000 · $4000 · $5000, marker recomputed to $3,580
Accessibility
Every status chip used its accent color as the label on its own tint. Adding a dedicated text token per status, rather than reusing the accent, fixed all three, and gave dark mode a real value at the same time.
Contrast ratios measured on the light-mode chips; AA for small text needs 4.5:1.
Mobile
The records screens kept their desktop column layout on mobile: a 1,440px table inside a 375px viewport. Because the container clipped, nothing looked broken; the interface was just quietly cut off. On Categories the status toggle and all three row actions sat past the right edge; on Students and Instructors, everything after the phone number did.
Visual language
The palette leans on a single green as the primary, the color the product already used for its header, primary buttons and success states, with neutrals for ink, borders and surfaces, leaving the status colors to do the real signaling in the interface. Type is set in Lexend, the family the product already shipped, now on a fifteen-step ramp instead of nineteen ad-hoc pairings.
#44A47C#07040E#A1A1A1#F6F6F6#EDEDED#FFFFFF#22C55E#EAB308#EF4444Typography
Before / After
Three journeys, drawn as the source file had them and as the redesign ships them. Every step comes from the findings above.
The OTP step was the end of the line: there was no screen to set the new password.
One set-password step on the same split layout, Input Field and button.
The add button and row view icons opened nothing; 93 trash icons had no confirmation.
An add screen, a delete confirmation and a zero-data state for the module.
The table repeated one ID and its footer promised more than the pagination reached.
Each row has its own ID in date order, and the counter divides into the pages shown.
Results & Impact
Every left-hand count is measured from the source file; the right-hand number is the redesign. The product keeps its visual language throughout.
Design-level outcomes measured against the source files. Live product data will follow launch.
Learnings
Not everything that looks wrong is wrong. Our first pass flagged many details that turned out to be intentional, so we captured each screen before changing it.
The fastest way to find missing screens was to wire the prototype. Every button without a destination named one.
Dark mode was built by copying screens, so nobody noticed the chips were never repainted. Tokens surfaced it in one pass.
Reusing the success green as chip fill and chip label read fine and failed AA at 2.18:1. Status needed its own token.
The mobile tables were not visibly broken; they were clipped. Measuring unclipped bounds exposed controls past the edge.
Every new screen started as a copy of its nearest sibling, edited through component properties. Nothing drifted.
Have a product like this? Let's talk. Book a call
Write to [email protected], or see more case studies, including WorkHub, an HR platform designed on the same template.
PDF, 3 MB
Get a free UI/UX audit and discover what’s holding your site back
