Execution · 01 — Salary Visualization (Tablet)
The donut chart that forced users to do the interpretation work themselves.
This was the #1 user complaint. The screen showed data accurately — but made users mentally decode it before they could understand anything.
Five specific failures mapped onto the live screen.
Red markers on the real TalentPro tablet screen. Each one points to a piece of UX that asks users to do work the system should have done for them.
- Section tab says “Earnings” — describes the container, not the answer. Users still don't know their take-home.
- Donut chart with overlapping 9.4% and 12.5% labels — physically unreadable. 4 colors carry no semantic meaning.
- No total salary anywhere on screen — users have to mentally add ₹20k + ₹4k + ₹3k + ₹5k to find their income.
- Title bar just says “Salary Summary” — no orientation, no month, no greeting, no context.
- Line-item list is correct but buried — users must scroll past the chart to reach the data they actually need.
Remove the chart. Surface the total. Let each line speak for itself.
Hi-fidelity mockup of the redesigned screen. Same data, reorganised so the system answers the question users actually bring to this screen: “What did I earn this month?”
- Screen renamed to “Your Salary Breakdown” — names the answer, not the chart container.
- Net pay ₹32,000 pinned at top in one large number — users get the answer in under a second.
- Donut chart removed entirely — replaced with a clean linear list with a context hint under every row.
- Single greeting line provides orientation without adding extra UI elements.
- Deductions grouped below with a separate red-dotted section label — one scroll, no mental sorting.
Redesign mockup built in HTML/CSS · not a real product screenshot
Execution · 02 — Dashboard Navigation (Tablet)
The dashboard that showed everything and guided nothing.
7 features. No priority. No grouping. The most time-critical daily action — Clock In — competed visually with Birthday Buddies and Wedding Anniversary at identical weight.
Equal visual weight means zero hierarchy.
Markers on the real screen show exactly where the hierarchy breaks down — from the decorative welcome panel to the undifferentiated service grid.
- “Welcome Rohan” identity card occupies ~20% of horizontal space — enables no action, purely decorative.
- Clock In & Clock Out controls give no confirmation state after tap — users don't know if it registered.
- “Remark if any” placeholder — vague. Users don't know what this field is for or who reads it.
- 7 service tiles at identical visual weight — Leave Balance and Birthday Buddies look equally important. No grouping, no hierarchy.
- Bottom nav labels are fine, but above the nav users see no sequence of what to do first.
Group by frequency. Lead with what users need every single day.
Three visual tiers — Tier 1 (daily critical), Tier 2 (weekly), Tier 3 (social). Each one looks different. Users can tell at a glance what's urgent and what's optional.
- Greeting replaces decorative welcome card — “Good morning, Rohan · You haven't clocked in yet today” turns empty space into orientation.
- Tier 1 — Daily, full-width, green: Clock In becomes the one unmissable action with a visible “waiting” state.
- Tier 2 — Weekly, medium weight: Leave Balance, Team Attendance, Holidays — each tile carries a live data hint.
- Tier 3 — Social, de-emphasised pills: Birthday, Anniversaries, Announcements — visually lighter, lower in the page.
- Remark field renamed “Add attendance note (optional)” — context + permission inside the attendance flow itself.
Redesign mockup built in HTML/CSS · not a real product screenshot
Execution · 03 — Side Menu Panel (Tablet)
A profile card buried under system controls — with destructive actions hiding in plain sight.
The slide-out menu mixed personal identity, navigation, data utilities, and settings at the same visual level. No section separation. No warning language on irreversible actions.
Three categories, zero separation, two dangerous actions.
Every row in this menu has the same visual weight — whether it opens a safe profile page or wipes attendance data. Users have no signal that some taps are consequential.
- Profile card (photo, Employee ID, designation) is decorative — shows data but enables no action or status.
- “Hide all seen events” — what events? “Hide” sounds like deletion. Users avoid unclear system actions.
- “Clear Attendance” — sounds permanently destructive. No warning in the label, no visible confirmation prompt.
- Language & Settings mixed with Dashboard & Profile at identical weight — navigation and system utilities are indistinguishable.
- Sign Out button styled prominently — good visibility, but placed beside destructive actions with no visual boundary.
Navigate · Preferences · Account Actions — each with its own zone.
The same features, grouped by risk and intent. The destructive zone is visually distinct and the labels include what actually happens before the user taps.
- Profile row carries live status — clock-in time and leave balance turn decoration into information.
- Navigate section — Dashboard + My Profile; always safe to tap.
- Preferences section — “Mark all notifications as read” replaces “Hide all seen events”, with a reassurance line.
- Red-bordered danger zone — “Reset attendance cache” + “Sign out” physically separated with warning copy.
- Destructive action labels include their own safety hint: “You'll be asked to confirm before anything is cleared.”
Redesign mockup built in HTML/CSS · not a real product screenshot
Execution · 04 — Mobile Dashboard Navigation
Same navigation failures. Smaller screen. Zero margin for confusion.
On tablet, feature overload is frustrating. On mobile, it causes task abandonment. The phone version compounds every dashboard hierarchy problem into a single viewport with no room to recover.
A 3×3 flat grid on the device people use most.
The real mobile dashboard — annotated. Notice the attendance card with no confirmation state, the missing greeting, and the flat service grid where social and functional features collide.
- TalentPro logo — fine, but the header carries no greeting, no current status, no context for the user.
- Clock In / Clock Out — no confirmation text, no acknowledgement, no visible state after tap.
- “View full month tracking” — critical feature buried below the card. Easily missed on first use.
- Flat 3×3 service grid — Birthday Buddies and Leave Balance are visually identical. No hierarchy on the device where it matters most.
- Bottom nav is fine — but the screen above offers no visual answer to “what should I do first this morning?”
Three tiers, mobile-compressed. Clock In gets the hero treatment.
The same priority system as the tablet redesign, compressed for a phone viewport. The morning clock-in action becomes unmissable. Social features shrink into a pill row.
- Header shows greeting + day + status — “Good morning, Rohan · Sat, 26 Oct · Clock in to start” replaces empty logo space.
- Tier 1 green card makes Clock In the single most visible action on the screen.
- Tier 2 tiles carry live hints: “14 left”, “3 out”, “2 Nov” — users don't have to open each feature to check basic status.
- Tier 3 pills for Announcements, Birthdays and Anniversaries — present but visually quiet.
- Bottom tab bar preserved — the existing nav pattern users already know stays intact.
Redesign mockup built in HTML/CSS · not a real product screenshot
Execution · 05 — Mobile Salary Screen
The donut chart problem, amplified on a phone.
On a phone, the chart takes half the viewport to deliver less information than the list below it. The fix is simpler than it looks: remove the chart, promote the list, add a total.
Half the screen says nothing. The answer is below the fold.
- “Salary Summary” header — no month mentioned, no greeting, no net-pay headline to orient the user.
- Donut chart takes 50% of the viewport to show less information than the list below. Pure visual noise on a phone.
- 9.4% and 12.5% labels physically collide on the bottom segment — unreadable at phone resolution.
- Amount values right-aligned with no total line — no number on screen answers “what did I earn this month?”
- Line-item list is correct — the fix is simply to promote this list and kill the chart above it.
One number at the top. Every line readable on its own.
The chart is gone. The net pay is the first thing users see. Every earnings line stays, with a short context hint underneath so users who aren't payroll-literate understand what each component is.
- Title says “Your Salary Breakdown” with month + pay date — full orientation in one line.
- Net pay card with ₹32,000 and credit account — the literal answer to the user's question, first and largest.
- Tabs preserved — Summary / Earnings / Deductions structure stays familiar.
- Each line has a context hint — “HRA · tax-exempt up to limit”, “DA · cost-of-living adjustment” — no jargon mystery.
- No chart anywhere — the data is the chart. The numbers are the visualisation.
Redesign mockup built in HTML/CSS · not a real product screenshot