Modernizing a FinTech web portal
Modernized Shell’s transaction and loyalty monitoring portal, simplifying workflows and enhancing usability for administrators and end-users. The redesign was guided by user research and close collaboration with the development team, ensuring design decisions were informed by real user needs and technical feasibility. This process resulted in a more intuitive and efficient platform that addressed both operational and customer-facing challenges.
Note: The final 3 images are the redesign screenshots. The earlier images are the older look for comparison.
Figment Design Labs
1997
FinTech/ Fuel
Headquaters
Randburg, South Africa
50
Challenge
The original platform's interface was outdated and visually unappealing. Complex menu structures and lack of clear visual hierarchy made it challenging for users to manage their service stations effectively and it also made it difficult to support issues on the existing system. My task was to reduce the cognitive load on users and incorporate modern design principles to make the platform more user-friendly and visually appealing.
Results
The redesign was a task I undertook as a supplement to my existing role in the company as a Project Manager. I wanted to prove to the business owners that a fresh look could be achieved. They agreed, mentioning that the new design lended itself to a mobile friendly patch later on, something the business owner was hoping to get to. The design was not implemented as of yet as the workload for the year was already scheduled, but the work is set to begin in the second quarter of 2025.
8/8
Developers were pro the new design
3 days
To complete the new designs
267
Shell petrol stations to run the new look
Process
Research & Analysis: The project began with a thorough assessment of the existing transaction and loyalty portal for Shell petrol stations in South Africa. User interviews and analytics revealed pain points for both administrators and end-users, including confusing workflows, cluttered interfaces, and difficulty accessing key transaction data. Insights from the development team also highlighted technical constraints and opportunities, ensuring the redesign would be feasible within the platform’s architecture. These combined findings informed the priorities for the redesign.
Information Architecture: Based on research insights, the information architecture was restructured to prioritize key workflows and data visibility. Core user tasks—such as monitoring transactions, reviewing PED details, and accessing loyalty metrics—were organized into logical sections with clear hierarchy. Navigation was streamlined to reduce cognitive load, and content was grouped to ensure users could complete tasks efficiently without unnecessary scrolling or clicks.
Wireframing & Prototyping: Wireframing was central to the redesign process. Low-fidelity wireframes explored layout options, workflow flows, and interactions for both admin and end-user views. Iterative prototyping allowed stakeholders and the development team to validate structure, identify potential usability challenges, and test technical feasibility early. This approach also provided an opportunity to address accessibility considerations, such as minimizing reliance on scrolling and ensuring actions could be performed via keyboard navigation.
The image below shows the lo-fi mock up of important user data that needed to be included on the new design.
Usability Testing: Prototypes were tested with representative users, including administrative staff and support team members. Feedback focused on ease of navigation, clarity of metrics, and ability to complete key tasks efficiently. Observations informed refinements in layout, labeling, and interaction patterns. Additional testing ensured accessibility requirements were met, allowing users with physical limitations to navigate and perform actions without friction.
Development planning and design review: Validated wireframes and prototypes were handed off to development with detailed annotations on interactions, hierarchy, and accessibility features. Close collaboration with developers ensured the design could be implemented effectively while maintaining usability and technical feasibility. Regular design reviews during implementation helped catch inconsistencies early, ensuring that the final product delivered a polished, intuitive, and efficient experience for both administrators and end-users.
“ I really like the focus on information tiling and structure, this makes an incredible difference to the users understanding the information our system gathers.”
Klaus Johannsen
Owner & Co-founder | Figment Design Labs
Conclusion
This project demonstrates how user research, iterative wireframing, and close collaboration with developers can drive meaningful improvements in complex digital platforms. By validating layouts, workflows, and accessibility early in the design process, the redesign delivered a more intuitive, efficient, and inclusive portal for both administrators and end-users. The end result showcases my ability to translate research insights into actionable design solutions that balance usability, technical feasibility, and real-world user needs.