B2B Workforce Data Intelligence Platform
End-to-end design of a B2B analytics web app, from MVP to multiple live releases. Translated complex backend calculations into clear dashboards across multiple user roles, while owning the design system throughout.

- When
- Mar 2026
- Type
- Tools
- Link
- www.marstella.app ↗

⚠️
This project is subject to a NDA. Screens, data, and specific business logic have been intentionally abstracted to focus on design process, decisions, and outcomes rather than proprietary details.
Overview
| Role | Senior Product Designer (sole designer) |
|---|---|
| Engagement | MVP → multiple live releases |
| Type | B2B SaaS, workforce intelligence, web application |
| Collaboration | Product Manager, Engineers |
| Process | Month-long design sprints, continuous delivery |
| Status | Live product with ongoing feature releases |
| Tools | Figma, Flutter, GitHub, Userback |
Problem Statement
The platform needed to take complex, backend-driven financial and workforce calculations and present them in a way that HR leaders and business decision-makers could actually act on — without losing accuracy or overwhelming users with data density.
As the product scaled, new features and logic were continuously introduced, creating compounding risks:
-
Increasing data density with no consistent visual language to manage it
-
Inconsistent UI patterns emerging across features built in isolation
-
Misalignment between design intent and engineering implementation
-
UX debt accumulating from early assumptions that hadn’t been revisited
The core question: How do you design a product that stays coherent, usable, and scalable when the underlying business logic keeps growing in complexity?

Requirements & Constraints
Business requirements surfaced through collaboration:
-
Support multiple user roles with distinct data scopes and permissions
-
Translate backend financial calculations into readable, auditable outputs
-
Enable time-based projections and configurable data inputs
-
Maintain data accuracy while prioritising usability for non-technical users
Design constraints:
-
Backend-heavy architecture — UI had to adapt to data structures, not the other way around
-
Month-long sprint cycles — decisions needed to be made fast and documented clearly for handoff
-
No dedicated researcher — discovery and validation had to be embedded within the design process itself

Design Process
- Exploration & Structure
-
Used low-fidelity layouts to explore information hierarchy and data grouping
-
Focused on reducing cognitive load before visual styling
- UI Translation & Prototyping
-
Converted complex numerical outputs into readable tables, charts, and summaries
-
Designed states, interactions, and edge cases using interactive prototypes
- Systemisation
-
Created the design library from the ground up
-
Established: Component libraries, Variables collections, Typography, spacing, and colour standards
-
Built reusable components and variables to support consistency and speed
-
Ensured new features aligned with existing patterns rather than fragmenting the experience
-
Maintained the library day-to-day as features evolved
-
Managed multiple design versions alongside ongoing development
- Cross-Functional Iteration
-
Worked directly with engineering to adjust designs based on real constraints
-
Refined interactions to balance ideal UX with delivery practicality


Outcomes & Impact
| Outcome | Detail |
|---|---|
| Live product shipped | MVP delivered and iterated across multiple production releases |
| Reduced UX debt | Shared design system eliminated inconsistency accumulation across sprints |
| Improved data clarity | Complex backend calculations translated into actionable, role-appropriate dashboards |
| Faster iteration cycles | Reusable components and established patterns reduced design time per sprint |
| Stronger delivery alignment | Active sprint participation reduced handoff gaps and implementation rework |

Skills Demonstrated
-
Designing complex, data-driven B2B products
-
UX strategy beyond individual screens
-
Design systems ownership
-
Prototyping for alignment and validation
-
Leading design decisions in fast-moving, cross-functional teams