Project
Design a UIF Contribution Calculator

Role
Product Designer

Company
SimplePay

01 Overview & Problem

SimplePay is a fast-growing B2B SaaS company offering an online payroll system to over 52,000 customers in South Africa, Ireland, Hong Kong, and Singapore. SimplePay’s purpose & mission are to make the world more human.

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.

02 Research Process & Wireframes

Research
To build a comprehensive understanding of the product & its users, I started with a deep dive & 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.

Armed with this quantitative data, I moved into the ideation phase, sketching out an array of preliminary wireframes. From this exploration, I identified a simple input form as the most user-centric & effective solution. Then I proceeded to create a wireframe of this selected solution.

Quantitative Data Sources
https://apps.apple.com/za/app/simplepay-self-service/id1501139428
https://www.sars.gov.za/wp-content/uploads/Ops/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/cost
https://www.simplepay.co.za/blog/2024/09/06/stay-ahead-with-simplepay-effortless-uif-submissions-despite-online-portal-disruptions/
https://uifcalculator.co.za/
https://apps.apple.com/us/app/simplepay-self-service/id1501139428
https://www.gov.za/news/media-statements/employment-and-labour-temporary-disruption-unemployment-insurance-fund-online
https://www.simplepay.co.za/help/filing-and-processes/monthly-submissions/uif-declarations/#:~:text=Submitting%20to%20the%20UIF%20via%20SimplePay

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.


I created a component library to manage diverse 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 Prototype & Results

Results
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.

Made with ♡ in Cape Town