Saas Lumea Billing
Skills
UX Research
UI Design
HCD
Industry
Saas
FinTech
Client
Student Project
Project
12 Weeks
Goals
Designing a solution for timekeepers to minimise friction, improve oversights, and prevent errors in billing cycles.
Inspired by my experiences as a lawyer, I was motivated to craft software that tackles the complex flows of time sheets, billing, and performance analytics without creating an overwhelming cognitive load. I want to develop a human-centred solution that addresses the workflow and users' challenges behind it.
Adoption Rate Aim
Error Reduction Goal
WIP Rate Aim
Challenges
How do you design with simplicity for something inherently complex?
Timekeepers want simplicity and ease, while the business needs structure and oversight. Balancing these needs meant navigating compliance demands, layered approval chains, and intricate data flows. The struggle for balance was mirrored in the challenges of UI design when tackling dense data dashboards, user-specific access, and complex user flows.
Outcomes
A beautiful product with user's needs foregrounded in a modular billing dashboard.
The dashboard design allows for flexibility and adaptivity, enabling the design to remain responsive while accommodating complex data visualisations. The native timer encourages users to track their time accurately and generate bills automatically.
Discover
The Double Diamond
Divergence and convergence. These principles are a driving force in the Double Diamond design process pioneered by the British Design Council. I deviated from Google's Design Process to adopt a non-linear process which foregrounds the question 'are we solving the right problem?'. It prevented me from jumping to conclusions and moving intentionally between expanding and narrowing.
Meaningful User Personas
Inspired by the work of the Ministry of Justice and their research into user personas, I foreground core personality traits instead of demographic information such as names, photos, ages and genders. This creates usable archetypes, rather than stereotypes and supports an inclusive design approach by reducing bias.
Interviewing with Purpose
Timekeepers work in high-pressure, billable-hour environments, but who are they and what do they care about? Guided by competitor analysis and behavioural personas, I conducted user interviews centred on three key questions:
01
How do users record their time and enter their billing details?
02
What are the pain points and areas of friction in the billing and invoicing process?
03
How do users feel about their existing systems and processes?
Participants recognised the importance of timekeeping but struggled with repetitive tasks, pressures to submit time efficiently and challenges with maintaining organised time logging practices. These interviews revealed a tension between the importance of timekeeping and the emotional resistance users felt toward it - tired of repetitive tasks, time pressures and organisational problems.
"It's tedious but it's also so important, it's a core part of showing the value I bring to my firm."
"I'm not really motivated to log my time, I guess, but it's a requirement of the job, right?"
Variety in The Competitor Landscape
Certain features, such as time tracking and automated invoicing, were virtually ubiquitous. However, visual and interaction design varied, especially in how each platform managed information density and dashboard clarity. The financial barriers to accessing competitor products made this area of research challenging.
Solving The Right Problem
Having worked as a timekeeper myself, I knew my prior experience was both a strength and a risk. I identified areas where I was making assumptions rather than making deductions from the information gathered in the Discover Phase. This was an important step in combatting cognitive bias and ensuring I was solving the right problem.
Define
Billing Cycle Pain Points
After synthesising research from the Discover phase, I identified key friction points in the billing lifecycle. While interview data leaned more heavily toward the early stages of the cycle (due to participant scope), the insights still painted a clear picture of where users struggled most.
01
Logging Hours
Timekeepers struggle to log their hours correctly and quickly. The process is tedious or inaccurate.
02
Time Sheets
Timesheets are laborious or confusing, and data could be entered incorrectly.
03
Editing Entries
Post-submission edits were common, slowing down invoicing and impacting WIP (Work in Progress) tracking.
04
Performance Oversight
Little or no oversight over performance, hourly billing, WIP, time taken to submit and other key analytics.
05
User-Specific Controls
Dashboards lack proper user-specific controls.
05
Invoicing
Invoices are rejected and require corrections leading to delays.
Affinity Map Clustering
The research produced a constellation of ideas, interview feedback, research, observations, and pain points. Affinity mapping helped identify thematic groupings and relationships between problems, motivations, and behaviours. This exercise marked the first convergence in the Double Diamond process, enabling me to define the UX vision and strategy.
Strategic Features Roadmap
To validate the proposed features, I mapped each one against four key dimensions:
User Group
UX Value
Pain Points
User Persona
This crystallised their role in the UX strategy and ensured their alignment with the project direction. Importantly, it sharpened the project’s scope: this would not be an HR platform, it would be focused on timekeeping and billing efficiency.
Completing Diamond One
The work completed in Diamond One helped clarify that the product would focus on timekeeping and billing while foregrounding the user's complaints raised in the interviews. I concluded the diamond with a clear problem statement:
Timekeepers and managers in billing-intensive industries struggle to log time and submit invoices. This causes frustration and inefficiency but also delays revenue and undermines accountability. The challenge is to design a billing tool that reduces cognitive load, streamlines workflows, and generates meaningful performance metrics.
This provided an informed and validated direction for the Develop phase at the start of the second diamond.
Develop
Inital Sketches
Digital sketches were used to quickly iteration on initial ideas for the home dashboard, the bill tracking system, and key data visualisations. Working in this way helped me start to visualised the modular dashboard and start considering how the interactive data was going to be displayed. It keyed me into some of the upcoming challenges with visual hierarchy.
Mid-Fidelity Prototype
Stepping up from paper sketches, I chose the level of mid-fidelity prototyping for an intermediate commitment to the user flow while allowing for a preliminary exploration of UI detail. I could start exploring the range of required components
Design System
Decisions for the design system were informed by the discoveries made in the hi-fidelity. I took guidance from Refactoring UI, Google’s Material Design, Apple’s HIG, and the Atlassian Design System. I read their commentary on best practice for spacing, grids, colour, tokens, typography, and iconography.
I shaped a design system that was concise enough for the scope of this project but flexible enough to grow to meet new needs. I foregrounded a feel and aesthetic that would encourage a feeling security, legitimacy, and trust in the product. Explore the full Figma file containing the Design System.
Deliver
Final Home Page UI
A key deliverable was a Home Page that summarised the user's performance metrics while allowing them to quickly action key tasks. The design process was an ongoing balance between providing insights and preventing overload.
01
Collapsable Navigation Bar
Open up real estate on the main surface of the interface by collapsing the nav bar. Allow for more complex data visualisations and focus tasks.
02
Performance Metric Cards
Flexible cards display key real-time metrics related to Timekeeper's performance that will support their daily decision-making.
03
Live Timer
A native timer allows timekeepers to start tracking directly from the dashboard, removing barriers between work and time capture.
04
Quick Actions
Users can quickly search, share analytics, download data, and start new bills.
05
Recent Bills
Flexible cards foreground recent bills, visually organised by status to make follow-up easy and transparent
06
Key Analytics
Lower in the hierarchy, advanced analytics offer a broader view of long-term performance trends.
Billing Flow
Billing emerged as the most critical workflow during discovery. The final design allows users to:
Log time manually or generate bills automatically via timers
Edit and submit bills through a clear, minimal dialogue system
View overdue bills with visual urgency through color-coded banners
Use powerful table tools (search, filter, download, bulk actions) to manage data
Experience decluttered tables with a strong emphasis on readability and hierarchy
The result is a billing experience that supports speed, accuracy, and peace of mind through clear UI and carefully considered flows.
Final Outcomes
This carefully crafted UI is precisely mapped against user needs and business requirements. Each design decision was driving by empirical data gathered in the discovery phases and ratified by testing.
The final design delivered a modular billing platform that is:
01
Visually calm yet data-rich, using hierarchy and interaction design to reduce overload.
02
Grounded in real user insights, with measurable benefits like reduced error risk and improved task completion.
03
Scalable, with an evolving design system preparing for future growth.
Designing Into The Future
The highest priority features for the MVP were completed in the high-fidelity billing flow. Several next-generation features are currently in the concept and early development phases, aligned with long-term product vision. Concept designs are underway for the native timer, analytics page, and AI features. This group of features require testing and validation through prototyping and user testing.
View the concept designs for next-generation features below;
Key Lessons
01
Visual hierarchy is not cosmetic, it’s functional. Early testing revealed how subtle shifts in contrast or layout dramatically impacted comprehension.
02
Real user quotes change design decisions. Hearing direct frustrations reframed priorities more than any persona or journey map could.
03
Balance simplicity with system requirements. While users wanted less clutter, the business demanded visibility into compliance and approvals. Good design meant respecting both.
04
Design systems are living tools. What started as minimal grew rapidly with barriers to consistency and challenges to achieve order. This was one of the largest learning curves of the project.
Next Steps
If this project were to move into a live development phase, the following steps would be prioritised:
Ongoing Team Critique Session - In a live project, I would be continuously gather feedback from peers to reflect on the project’s successes and design tradeoffs.
Design Sprint for Native Timer - Focus sprint on developing the timer UX, ensuring it integrates seamlessly with the existing product.
Validation via Prototyping - Test the high-fidelity prototypes for feedback with real users to validate the high-fidelity designs.
Accessibility Audit - Perform a round of testing and improvements to meet WCAG 2.2 standards for visual contrast and interaction design.
Continue Developer Dialogue - Maintain open dialogue with developer teams and organise Figma files, specs, and written documentation for clean handoff.
Metrics —> number of people that do/don't use the feature. Build prototypes and check how people interact with them.
User Testing metrics 'how many people do x' and how do we improve that. How quickly people input bills.