During my internship in UX design, I was assigned to a product team that was tasked with redesigning a full-stack fitness platform that trainers and fitness enthusiasts use. Three related experiences made up the redesign: 1.Mobile app for fitness users 2.Website for marketing and onboarding 3.Admin dashboard for trainers & content managers The client, had an existing product, but user engagement, task success, and internal workflows were falling short. My role involved end-to-end UX problem solving—from audit to insight to interface.
The old system isn't flawed it's just that actual people aren't using it effectively. I looked into why things felt broken before making any UI changes. Three guiding questions centred my thoughts: 1.Where are users getting stuck? 2.What behaviors are we trying to enable or change? 3.What mental models are we breaking or ignoring?
Finance Managers – monitor daily payments & errors
Operations Teams – manage customer mandates
Business Owners – view income and settlements
Platform Admins – verify merchants & enforce compliance
Observation: It was noted that platform administrators (coaches, trainers) found it difficult to finish basic duties like Creating wprkouts, allocating plans or monitoring activities. The dashboard was poorly designed for clarity but overengineered for control. “I shouldn’t need to export a CSV to find out who missed a session.” Pain Points: 1.Bad action grouping ( Users, Plans, Statues buried in Dropdowns) 2.Very Confusing Task fow. User need to go to multiple places for one task. 3.Overloaded user interface devoid of hierarchy My Approach: My view of this was task modelling rather than feature auditing. I looked for decision points and duplicates and mapped high-frequency chores including "track a user," "send a plan," "view inactivity." "Create/Manage Workouts." Proposed solution: 1.Designed a dashboard-first view including fast actions and urgent cards. 2.Organised tools into action-oriented clusters—that is, "Plans, Clients, Inbox" etc. 3.Added clever tags, filters, and search to cut noise and work load.
Observation: Across web, mobile, and internal tools, the app suffered from inconsistent patterns, unexpected behaviour, and accessibility issues even with a modern appearance. "I have no idea what clicking this will cause." User present during the test session. Pain Points: 1.On different platforms, though, layouts and buttons changed. 2.Forms lacked obvious validation or feedback. 3.Contrast, scale, targets accessibility fell short of WCAG. My Approach: Tracking usage, visual hierarchy, feedback systems, and behaviour across all screens, my cross-platform UI audit revealed I argued for a design system to bring interaction logic and visuals together. Proposed Solution: 1.Designed a shared component library with set buttons, card, input, state, rules. 2.System of standardised colours with easily available contrast 3.Applied WCAG 2.1 AA guidelines across all design elements
When I started designing Direct Debit Pro, I first learned how UK businesses really handle Direct Debit payments each day. Before sketching any wireframes, I broke down the whole process: merchant onboarding, mandate verification, customer setup, payment scheduling, retries, settlements, failures, and arrears. By mapping out each step, every person involved, and each system handoff, I got a clear sense of what the product needed to do to support merchants in real financial situations.
Primary questions I asked:
I moved into validation and iteration once the main redesign flows were established. Early testing, behaviour observation (rather than just opinions), and product refinement based on task performance, clarity, and confidence were my objectives.
Mapping Clarity
Ran 2 rounds of usability testing (one mid-fi, one hi-fi) Created rapid A/B variants to test dashboard information density Used task-based success metrics like: “How long does it take to create a weekly plan?” “Can the user find their progress summary without help?”
Design Intent & Experience Direction
From that stage on, the design flow was straightforward: make everything understandable, predictable, and practical. In order to help merchants with failures, retries, and arrears recovery, we implemented status first dashboards, readable tables, clear calls to action, and contextual messaging. The UI provides a clear explanation of what will happen next rather than making users guess.
Building a Scalable Design System
A scalable design system was also designed by the complexity of the flows. In order to maintain consistency and scalability throughout the entire process, I designed reusable components such as status chips, audit logs, masked inputs, table patterns, forms, and card layouts. Additionally, developers were able to add these features more quickly and with fewer UI inconsistencies thanks to these components.
Collaborative Iteration & Validation
Working closely with the teams throughout the process to verify information such as data visibility, retry rules, mandate statuses, and Bacs timelines. With every iteration, the product became more precise, frictionless, and more aligned with the demands of actual merchants.
Key Design Highlights
-Clear dashboard: Shows payment health in real time
-Smart retries: Automated reattempts displayed with a simple timeline
-Editable collections: Merchants can update upcoming payment amounts or dates
-Guided actions: Status cards clearly tell the user what needs attention
-Secure UI patterns: All sensitive info is masked or partially hidden
Results and Impact (Based in User Testing)
40% less manual time spent managing payments
25% fewer settlement fines
Clearer visibility of Direct Debit lifecycles
Users found arrears resolution “much easier and less stressful”
Reduced confusion around failed payments
