Try it out on Figma make ✨ here
My Approach
Project Overview:
As part of the SD Worx product team, I’ve been working within a small group of designers to redesign the mySDWorx mobile home screen. My focus is on creating intuitive, user-centric experiences for both iPhone and Android, while making the home screen more data-driven and visual. The app is a comprehensive HR hub for employees and team leads covering payslips, leave requests, expenses, mobility budgets, overtime and clocking in and out and the new home screen surfaces this information as clear, lightweight data visualisations and widgets. This helps users quickly see what matters, understand their status at a glance, and complete key HR tasks in just a few taps.
Vision and Innovation
Problem Statement:
Although the SD Worx app brings together key HR journeys (payslips, leave, expenses, mobility budgets and time tracking), the existing home screen doesn’t help employees and team leads see what matters at a glance. Content is mostly presented as lists and deep navigation, which makes it harder to understand status, spot urgent tasks, or discover less-used features on mobile. This leads to extra tapping, higher cognitive load, and fragmented experiences between iOS, Android and the web portal especially for people who only dip into the app occasionally and need quick clarity rather than complexity.
Hypothesis:
If we redesign the mobile home screen into a more visual, data-driven hub using widgets, simple data visualisations and contextual shortcuts employees and team leads will more quickly understand their current HR status and what needs their attention. We expect this to reduce time-to-task and navigation friction, increase engagement with key journeys (e.g. leave, expenses, clocking), and improve overall satisfaction with the app across both iOS and Android.
Identifying Unique Challenges
Constraints and Challenges:
Surface the right information: Turning complex HR data (leave balances, time, expenses, mobility budgets) into simple, glanceable widgets without overwhelming the home screen.
Different usage patterns: Designing a home screen that works for both “dip-in” users (quick checks, approvals) and heavy users (daily time tracking, multiple companies).
Cross-platform consistency: Creating a shared visual and interaction model for iOS and Android while respecting native patterns and technical constraints in Flutter.
Data & performance limits: Visualising real-time HR data without hurting performance or overloading the API and existing backend logic.
Legacy navigation & features: Integrating the new, more visual home screen with existing journeys and information architecture, without breaking current user habits.
Research & Insights:
To shape the new home screen, I analysed usage data, spoke with our providers who currently use the app, employees and team leads, and reviewed support feedback to understand which tasks and data points mattered most. These insights directly informed which widgets we prioritised and how we ordered and framed actions on the home screen.
Resolving Complex Problems
Key Contributions & Solutions:
From list to dashboard: Transformed the old, text-heavy list of modules into a more visual home screen with cards (clocking status, payslips) and widgets (e.g. mobility budget gauge) so users can understand their situation at a glance.
Quick actions for key tasks: Introduced and designed the FAB with contextual shortcuts (add absence, expense, overtime, view team calendar) to reduce taps for the most frequent workflows.
Clear secondary navigation: Redefined the lower list of functionalities into a clean, scannable set of modules, keeping parity with the web portal while prioritising what employees and team leads use most.
Design system & Flutter alignment: Extended the SD Worx design system for widgets and FAB patterns, working closely with developers to ensure the new layout and interactions were feasible and consistent across iOS and Android.
Iteration with stakeholders: Used design reviews and quick user feedback sessions to refine hierarchy, labels and empty states, making sure the new home worked for both “quick check” and heavy users.
User-Centric Designs
Wireframes & Flows
I mapped and designed the new home experience end-to-end — from quick actions to widgets and the module list — starting with low-fidelity wireframes and iterating into high-fidelity flows for iOS and Android.
Interactive Prototypes in Figma Make
I built fully interactive prototypes in Figma Make that mimicked the real app behaviour (scroll, tap targets, FAB expansion, data visualisations). This allowed stakeholders and users to experience the new home screen directly on their phones and gave more realistic feedback on hierarchy and interactions.
UI Consistency & Design System
Throughout the work I leaned on and extended the SD Worx design system, reusing components where possible and creating new patterns (e.g. widgets, FAB actions) that could scale across platforms.
Testing & Pilot Phase
I ran usability sessions with employees and team leads, iterating on copy, layout and widget behaviour based on their feedback. The refined designs are now moving into a pilot phase with a selected group of customers, where we’ll validate the impact on time-to-task, feature adoption, and overall satisfaction.
Retrospective (so far)
Key learnings
Working on the new home screen reinforced how critical tight collaboration is especially with developers, product owners and localisation teams. I had to constantly balance technical constraints (Flutter, performance, data availability) with usability and clarity on a very small canvas.
Iterative process
Prototyping in Figma Make and testing early helped us spot issues with hierarchy, wording and widget behaviour before development. Each iteration sharpened the experience and the design system patterns behind it, and the upcoming pilot phase will give us the next layer of insight on what to refine further.
Measure of Success
Success Metrics:
For the new home screen, success is defined and tracked through:
Task efficiency: Reduction in time and taps to complete key tasks (check payslip, submit expense/leave, clock in/out).
Feature adoption: Increase in the use of core journeys surfaced on the home screen (payslips, absences, expenses, mobility budget, overtime).
Widget & FAB usage: Higher interaction rates with widgets and quick actions, showing that the visual summaries and shortcuts are actually being used.
User sentiment: Improved satisfaction scores and qualitative feedback from employees and team leads in usability tests and the pilot rollout.
Web vs mobile: A shift of simple, everyday tasks from the web portal to mobile, indicating that the home screen is doing its job.
As we move into the pilot phase, these metrics will guide what we keep, refine, or simplify before a wider release.
Conclusion
This project is an ongoing step towards turning mySDWorx into a truly mobile-first HR companion. Redesigning the home screen into a more visual, data-driven hub has already helped clarify what matters most to users and how it should show up in the product.
Working closely with developers, product owners and localisation teams, I’ve helped define patterns widgets, quick actions, and card-based summaries that can scale beyond the home screen into other parts of the app. With the pilot now underway, the focus is on learning from real usage, iterating quickly, and continuing to shape an experience that feels simple, clear and genuinely helpful for both employees and team leads.
