Seamless Payroll & Transactions App

Stage 1. Usability Audit

The usability audit aimed to evaluate the initial proof of concept (POC) design to ensure it addressed the needs of business owners and HR managers in the UAE.


Process:

1. User Research Review: I reviewed user personas and pain points to validate the design direction and align it with user expectations.

2. User Flow Evaluation: I mapped key user flows, particularly the payroll process, identifying friction points and ensuring that tasks were straightforward for users to complete.

4. Accessibility & Mobile Responsiveness: I tested the POC for accessibility, ensuring legibility, proper button sizing, and mobile responsiveness across different screen sizes.


Key Findings:

• The transaction flow was too complex, especially for international payments.

• Onboarding needed to be more intuitive.

• Clearer currency exchange and fee indicators were necessary.

• Mobile elements were not optimised for smaller devices.

Stage 2. Design Strategy

The design strategy focused on defining a clear vision for the app’s user experience, ensuring it aligned with user needs and business goals. This phase aimed to refine the proof of concept (POC) based on the usability audit findings and prepare for the next iteration of design.

Process:

1. User-Centered Design Focus: Based on the insights from the usability audit, I prioritised a user-centered approach. I revisited the core user personas—business owners, HR managers —and ensured the app’s design catered specifically to their needs. The goal was to streamline complex workflows, making salary payments and transactions as intuitive and efficient as possible.

2. Simplification of Key Features: I simplified the core features of the app, particularly the salary payment and international transaction processes. By breaking down the steps into clear, easy-to-understand actions, I aimed to reduce cognitive load for users.

3. Mobile-First Approach: Given the app’s primary use on mobile devices, I adopted a mobile-first approach. The design was optimised for smaller screens, focusing on touch-friendly elements and ensuring a responsive layout across various devices. Features like payment buttons and form fields were designed to be large enough for easy interaction on mobile.

4. Feedback Loops & Iteration: I implemented iterative design cycles by continuously gathering feedback from internal stakeholders and a small group of target users. I used this feedback to refine the design and validate decisions before moving forward, ensuring the product met both user needs and business objectives.


Key Decisions:

• Streamlined Transaction Process: I simplified the multi-step transaction process, reducing it to clear, digestible actions and confirmation screens.

• Improved Onboarding Experience: I introduced a user-friendly onboarding flow, offering clear instructions and context-sensitive help.

• International Payments Transparency: I focused on providing more transparency in the international payments section by displaying exchange rates, fees, and estimated delivery times.

• Mobile Optimisation: I prioritised touch-friendly interfaces and responsive layouts to ensure ease of use across different mobile devices.

Stage 3. Prototype Development

• Wire-framing: I started the prototype development with low-fidelity wireframes to establish the basic structure and layout of key screens. The focus was on defining user flows for salary payments and international transactions, ensuring clarity and efficiency. By keeping the wireframes simple, I was able to quickly test different layout ideas and refine navigation before committing to detailed designs. These wireframes served as the foundation for aligning stakeholders and gathering early feedback on the app’s functionality.
  
  

• High-Fidelity Prototyping: Once the wireframes were validated, I transitioned to high-fidelity prototyping, incorporating refined UI components, branding elements, and real-world data scenarios. The interactive prototype allowed stakeholders and test users to experience the app’s core functionalities, such as adding employees, processing payroll, and managing international payments. This phase was crucial for testing interactions, identifying usability challenges, and ensuring that the app’s workflows were intuitive before development.
  
  

• User Interface Design: With the structure and interactions finalised, I focused on the visual design, ensuring a modern, clean, and user-friendly interface. I applied the design system developed earlier, incorporating a professional yet approachable color scheme, intuitive typography, and easily recognizable icons. Given the financial nature of the app, I emphasised clarity, accessibility, and trustworthiness in the design, ensuring that key actions, such as confirming transactions and reviewing payment details, were visually distinct and easy to follow. This final stage prepared the prototype for further testing and stakeholder approval before moving to development.