Cause Index Platform Rebrand
2024
Payfast by Network
Role
Product
Designer
Project Overview
Redesign Existing Platform To Align With New Brand Identity
Duration
4
Weeks
Background
Payfast by Network is a leading fintech company in South Africa, ranking as the second-largest online payments platform in the region and partners with over 80,000 businesses nationwide. During my product designer, Payfast underwent a major rebranding, adopting an entirely new brand identity.
​
Among the platforms they use to engage with their merchants is the Cause Index - a platform that allows merchants to donate to various organizations across the region.
​
​
Design Brief
Amidst the rebranding transition at Payfast by Network, the Cause Index needed to be re-designed to align with the new brand identity. I was tasked with re-imagining what this platform could look like. This project included 3 design goals:
-
Ensuring the updated platform aligns with Payfast's new brand identity
-
Streamlining navigation and improving the user journey for a seamless experience
-
Incorporating design elements that cognitively promote donation activity
Discovery
To familiarize myself with the platform's goals and functionality, I began with an in-depth analysis of the existing Cause Index. During this phase, I noted its features, their strengths and weaknesses, and closely examined the flow of information from page to page. This approach enabled me to identify opportunities to streamline navigation, which I could use to inform the structure and user journey of the updated design.
Page from the Cause Index Platform Pre-Rebranding
Although the existing platform provided a useful resource, I didn't want to rely solely on it for all my design decisions for the update. Instead, I found value and innovation in going back to the "drawing board". This manifested as:
​
-
Conducting additional design research to learn how to create compelling donation pages.
-
Focus on identifying visual components, layout structures, and wording that would increase the likelihood of merchant donations.
-
Design Research: How to Craft a Compelling Donations Platform
Key Insights
Ideate
In the initial phase of ideation, I focused on clarifying the user journey, particularly its navigation. This involved experimenting with and reorganizing platform features to achieve the most seamless and intuitive flow of information.
User Journey Experimentation: Existing Platform vs. Rebranded Platform
Once I had a clear idea of the navigation, I proceeded to design low-fidelity mockups for each page and feature.
​
The mockups highlight key sections like the About landing page (Home), the Causes section with associated pages accessed via a dropdown menu, and the Register and Payment pages.
​
Each page was approached with a donation-by-design mindset, incorporating urgent language and evocative images to encourage contributions. These mockups would form my blueprint for an encouraging and user-friendly final design.
Mockups
Execution
Design Software Used:
Tools Used:
-
Company's Rebranded Components Library
-
Color Scheme​
-
Font Style
-
Font sizes
-
Buttons
-
-
Icon Plugins
Font Style
Color Scheme
Button Style
Before diving into the details of each page, I first designed the background and any repeating elements, such as the company logo, menu, and footer. This approach allowed me to design efficiently and prioritize consistency across the platform. Once all the backgrounds were completed, I could then focus on the unique content specific to different pages.
Designed Background with Repeated Elements
Key Figures Design
Annual Donation Measure Bar
Donation Space
Payment Confirmation
I introduced two key innovations in the final design. The first was creating a registration page from scratch, a new feature aimed at enhancing personal investment. This involved determining the necessary information from merchants and designing a streamlined form to collect it effectively.
​
The second innovation was a complete redesign of the All Causes page. In the pre-rebranded platform, this page required endless scrolling to find a specific cause and lacked organization. To address this, I dedicated time to organizing the list of causes in a compact and user-friendly manner. In the final design, causes are organized alphabetically and feature a filter that sorts them by type, such as animal welfare, health, and research as well as location.
Next, I moved on to designing elements specific to each page.
For example, on the landing page, I crafted a layout to showcase key figures such as the number of received donations, amount donated, number of active campaigns, and number of monthly donors, alongside icons and a measure bar for the annual donation total.
On a given donations page, I designed the space where merchants could make their contributions and what the resulting payment confirmation space would look like.
These are just a few examples of the many tailored designs I developed for each page.
Registration Form
All Causes Organization
Once the background and tailored design elements were completed, I then assembled everything according to the mockups, ensuring precise positioning and alignment.
I also shifted gears to finding evocative images to pair with each page, thereby enhancing the emotional appeal of the platform.
Images Used for Final Design
Feedback & Collaboration
During my review of the initial iteration of the updated Cause Index with my supervisor, she provided me with some valuable feedback that I incorporated into the final designs. These included:
The way the images are displayed on each page loses its impact and clarity.
Iteration #1
Originally, the images were showcased in a 3D manner (fit into a tilting cube). I addressed this by removing the 3D shape entirely and showcasing the images in a simple 2D format with larger sizes to ensure they had the impact they deserved.
Can we think of more placements for the 'Donate Now' button?
Iteration #2
Initially, this button was only in the donation space after first selecting a cause. I added an additional 'Donate Now' button directly on the landing page, taking users to popular causes where they could then contribute.
Final Designs
After iterating on my designs based on the feedback I received, I presented my final designs to the rest of the design team. They unanimously decided to implement my rebranded designs in the platform’s upcoming update.
Landing Page (Home)
Causes by Region Page
Popular Causes Page
Donation Page
All Causes Page
Payment Confirmation Page
Registration Page
Measuring Success
Although the platform had not yet launched during my internship, my team and I proactively reflected on how to evaluate its success once it goes live. We identified several key areas to monitor:
​
-
USER TRAFFIC
-
​Tracking how many merchants are accessing the re-branded platform (As of January 2025, the platform now serves over 80,000 users).
-
Comparing these numbers to the user traffic of the pre-rebranded version.​​
-
This will help assess the platform’s reach and engagement.
-
-
USER FEEDBACK
-
Incorporating a feedback section for the first six months after launch, allowing users to voluntarily submit their experiences via a form.
-
This feedback will focus on aspects such as user experience, intuitiveness, and accessibility, enabling us to identify which features need refinement or removal.
-
-
REGISTRATION INNOVATION
-
Analyzing the number of causes registered over time to evaluate whether the new registration feature is well-liked by merchants.
-
Lessons Learned
ALWAYS REASSESS AND REFRESH
Updates, whether rebranded or not, should be approached with a "new project" mindset. What worked yesterday may not be work tomorrow. Embracing fresh inspiration and current research can uncover new insights and approaches to staying relevant and impactful.
DESIGN IS MORE THAN WHAT MEETS THE EYE
Great design has the power to influence minds and shape decision-making. Thoughtful, research-backed choices can create experiences that encourage action.