Project
Design a UIF Contribution Calculator
Role
Product Designer
Company
SimplePay
01 Overview & Problem
Problem
SimplePay would like to create a publicly available UIF Contribution Calculator, where the goal is to allow people to calculate UIF and get exposure to the brand when they do so.
Executive Summary & Solutions
To address this challenge, I designed a human-centred, adaptive layout optimised for desktop, tablet & mobile use. My design approach focused on creating a seamless experience that feels intuitive, trustworthy & aligns with SimplePay’s current environment, ultimately promoting SimplePay to new users.
02 Research & Design Process
Research
To build an understanding of the product & its users, I started with an analysis of the entire SimplePay brand. As a B2B company, SimplePay’s primary customers are other businesses; my investigation, therefore, began by identifying South African companies currently using their solutions & evaluating their documented user experiences.
For this project, I applied a desktop research methodology. This involved gathering quantitative data from official sources, such as the Department of Labour in South Africa, to establish a factual market baseline, to complement this & gain deeper insight into SimplePay’s specific product offerings & brand positioning, I conducted a review of their official blog & published content.
With this quantitative data, I moved into the ideation phase, sketching out an array of wireframes. From this exploration, I identified a simple input form as the most user-centric & effective solution.
Quantitative Data Sources
https://apps.apple.com/za/app/simplepay-self-service/id1501139428
https://www.sars.gov.za/Guides/PAYE-easyFile-G001-easyFile-Employer-User-Guide-External-Guide.pdf
https://briefly.co.za/59621-the-free-proprietary-payroll-software-south-africa.html
https://www.simplepay.co.za/blog/2024/09/06/effortless-uif-submissions
https://uifcalculator.co.za
https://apps.apple.com/us/app/simplepay-self-service/id1501139428
https://www.gov.za/news/media-statements/employment-and-labour
https://www.simplepay.co.za/help/filing-and-processes
Wireframes
03 Solutions & Testing
Within Figma, I created structure for the project, I started with a responsive grid system tailored to each screen size. I applied auto layout & utilised style tokens for all colour & typography definitions. This systematic approach ensured visual consistency & streamlined scalability from the outset.
Components
I created a component library to manage UI sizes & interactive states seamlessly & I always use this simple systematic documentation approach in Figma, to keep all my projects organised & ensure easy handover to the development team.
04 Results & Impact
Impact
I developed a high-fidelity, interactive prototype in Figma. This served as a single source, providing developers & product managers with a clear, functional visualisation of the final product’s intended look, feel, and user flow.
This resulted a well-defined MVP, empowering the product owner & marketing team with a tangible concept to present to stakeholders. This asset could be crucial for securing buy-in & aligning all parties on the product’s strategic direction ahead of development.
