SHEET 02 · CASE STUDY
Enterprise HR product · Product design, UX, UI
Our company had a chance to partner with Mercer, a well-known compensation consulting firm. Their main asset was highly accurate salary benchmark data. But that data was still locked inside a spreadsheet full of actuarial formulas, performance tables, and calculations like Compa-ratio and Salary Bands. For this partnership to work, we couldn't just sell a static table.
My job was to turn that mathematical "black box" into a dynamic, working SaaS product. It had to be a prototype ready to present to executives within one week.
Complex compensation formulas make salary reviews slow, error-prone, and hard to explain.
A · END-USERS
Users face a heavy mental load. To decide one employee's raise, they have to cross-check performance ratings (A-E) against their current salary position relative to the midpoint (Compa-ratio). This manual process leads to confusion, low transparency, and approvals that drag on.
B · STAKEHOLDERS
Without an interface that wraps this logic, the company struggles to monetize Mercer's data. B2B clients need tools that can simulate strategic decisions, not just look at a table of static numbers.
The main goal was to bridge complex math with a human-friendly interface. The product had to work like a "Salary Simulator," where the Excel logic runs behind the scenes and users only see clear, actionable recommendations.
DAY 1-2
Discovery and mental modeling
Reverse-engineered the Excel formulas using Gemini. Mapped out the information architecture.
DAY 3-4
Flow definition and the CEO loop
Generated rough wireframes with Figma Make. Corrected direction and pivoted to a top-down, hierarchical flow.
DAY 5-6
High-fidelity and system design
Polished the visuals, built a clean interface layout, and set up navigation guardrails.
DAY 7
Final prep
Assembled everything into a clickable, interactive prototype for simulating strategic decisions live.
As a solo designer with no Product Manager to lean on, I had to understand the business logic before I could design anything. I used Gemini as an analytical partner, feeding it the Excel variables (Min, Mid, Max, Range, Inflation Rate) to reverse-engineer the formulas, map out the information architecture, and turn that logic into clear user stories.
With such a tight deadline, traditional research and validation just weren't realistic. Instead, I jumped straight into ideation with Figma Make, prompting it to build the flow and interactions directly, rather than writing documentation or specs first.
This approach let the CEO see and feel the flow interactively, instead of just reading a description or looking at a static wireframe. As a result, the feedback was sharper and more specific from the start, because the CEO was reacting to something real, not an assumption. That meant I could align with the business logic right away, without going through endless feedback cycles.
Because this process was cheap in terms of time, and I wasn't emotionally attached to the first draft, whenever the CEO gave new direction, I could drop the old draft and pivot to the right structure immediately, without losing the sprint's momentum.
01
Designing a data-driven enterprise product means logic comes first. Getting the flow right matters far more than visual polish at this stage. We validated the sequence of steps before even thinking about UI components.
02
The user experience needed to mirror how the real HR operational system works. The flow is locked into three sequential steps that can't be skipped: Grade Structure, then Salary Scheme, then Salary Adjustment.
03
The table shouldn't feel like a spreadsheet. Users shouldn't have to think about how Compa-ratio is calculated. The system handles that, and the interface only shows each employee's current status and the system's final recommendation.
FEATURE BLOCK A
A compensation system fails if its foundation is wrong. The fix: the left sidebar isn't just a menu. It acts as a guardrail. I designed the navigation to force users through the hierarchical setup from top to bottom, making sure the grade structure and performance matrix are filled in before they can evaluate any individual's salary.
FEATURE BLOCK B
If the system only shows a final number with no context, managers have no way to check whether it makes sense. The fix: I put transparency right into the table, with color-coded competency grades so the reasoning behind each raise is visible, a consistent Impact % column so managers know everyone is calculated the same way, and an 'In Range' status for instant validation. Managers don't have to take the number at face value, because every piece that built it is right there in front of them.
FIG. 01 · SALARY SCHEME
Instead of showing an intimidating Excel table on the Salary Scheme page, I used an accordion component to summarize the performance matrix. HR can expand just the section they need to edit.
FIG. 02 · SUMMARY CARDS
Added summary cards at the top of the page showing the company's total salary-increase budget, so executives can see the financial impact in real time before approving the scheme.
In just 7 working days, Payroll Strategic went from a raw spreadsheet to an interactive, high-fidelity UI.
OUTCOME 01
The prototype got direct validation from the CEO because it correctly captured the top-down operational logic.
OUTCOME 02
Showed our consulting partner that their data asset could become a high-value SaaS product, giving us an edge in negotiations.
OUTCOME 03
Ideation and flow-building time dropped from weeks to days, thanks to orchestrating Gemini and Figma Make together.
DESIGNER'S NOTE
This project taught me that when you're designing a product with very complex business rules, the real design work isn't about the interface. It's about information architecture. Having AI handle the math logic let me focus fully on strategic decisions and the user experience.