Payfast by Network
Merchant App Listings
2024
Role
Product
Designer
Project Overview
Update Screen & Banner Displays for Merchant App on Google Play & App Store
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. Partnering with over 80,000 businesses nationwide, it plays a vital role in the digital economy. During my internship as a product designer in 2024, Payfast underwent a major rebranding, adopting an entirely new brand identity to strengthen its market impact and user engagement.
Design Brief
Amidst the rebranding transition at Payfast by Network, their merchant app was also being revamped to align with the new brand identity. I was tasked with designing the listing display for the rebranded app on both the Google Play Store and the App Store. This project included 2 design goals:
-
Creating updated screens showcasing the new app interface
-
Designing the banner display to effectively communicate the refreshed brand image
Discovery
Given the availability of pre-rebranding merchant app listing materials, I began by analyzing these as a potential baseline for the overall structure and screen flow. This approach allowed me to identify opportunities to innovate while maintaining certain elements users were familiar with. By building upon the existing structure, I aimed to create a design that not only aligned with the company's new look and feel, but also ensured cognitive continuity such that familiarity and user trust was maintained in the updated app listing experience.
Seamless Screen Transitions: Spotify's Listing Design
Previous Listing Screen Designs
After determining which elements to retain and the desired structure for the listing, I then infused this foundation with additional research on current trends in listing design. This involved:
-
Exploring how popular companies like Spotify, Netflix, Instagram, and Airbnb approach their listing designs.
-
Conducting an industry-specific competitive analysis to gain insights into how competitors such as Yoco and Ozow design their listing displays.
A Look at Competitors: Yoco's Listing Design
Key Insights
Ideate
By the end of this phase, my goal was to have a low-fidelity mockup of the screens and banner. I first began by considering the non-negotiable design elements, such as the color scheme, screens to be used and their matching texts, all of which were explained to me by my supervisor.
I then combined these fixed elements with my creative ideas for the banner display, structuring each screen for the listing and integrating the continuous background concept. I decided to use the company's logo—a chevron—as a blueprint for the continuous background as this allowed me to playfully incorporate this style in a way that uniquely aligned with the company's identity.
Wireframe
Execution
Design Software Used:
Tools Used:
-
Company's Rebranded Components Library
-
Color Scheme​
-
Font Style
-
Font sizes
-
-
Mockup Figma Plugins
Font Style
Color Scheme
Before creating the actual listing display and banner, I first started by placing the desired app screens that were provided to me beforehand in mockup devices. I was rather detail-oriented here as this would form the central part of the display and banner.
App Screen 1
App Screen 2
App Screen 3
App Screen 4
Device Mockups
TEXT
App Screen 1
​
TEXT
App Screen 2
​
TEXT
App Screen 3
​
TEXT
App Screen 4
​
Example: 16:9 Dimensions for Google Play Store
16
9
Now to my favorite part! Bringing forth my creativity to experiment with the background design for each screen. I played with gradient coloring and the positioning of each chevron logo, selecting the flow that offered the most seamless transition as users swiped from one screen to the next.
I then began designing each screen listing, positioning each mockup and text within the specified dimensions for the Google Play Store and App Store listings.
Gradient Combinations
Original
1
2
3
Continuous Logo Experimentation
For the banner, I chose two device mockups from the completed listing design as well as a background that best aligned with the company’s feel on which to position these mockups.
M
inimialistic
M
S
odern
imple
Feedback & Collaboration
During my review of the initial iteration of the listing and banner display with my supervisor, she provided me with some valuable feedback that I incorporated into the final designs. These included:
The chevron logo as the continuous portion is a great idea! However, I am worried it'll get lost in the gradient background. How do we add more depth or make it stand out more?
Double-check to ensure precise device mockup positioning and text alignment.
The gradient options look great! Let's narrow down to specific choices for each screen.
Iteration #1
I addressed this by stacking two logos on top of each other for each screen, each having a different color from the color scheme.
Iteration #2
I meticulously went over each screen design as well as the banner display, adjusting the positioning and alignment to meet the exact specifications when needed.
Iteration #3
With my supervisor's guidance, I refined the gradient selections to achieve a cohesive look for the listing design.
Final Designs
After iterating on my designs based on the feedback I received and getting the thumbs up from my supervisor, I presented my final designs to the rest of the design team. To my delight, they were chosen as the final designs for the listings! The screens and banner were successfully launched alongside the rebranded merchant app in October 2024.
Listing Screen Designs
Banner Display
Measuring Success
To evaluate the success of the listing design and banner display, my team and I established that we will:
​
-
Track the number of downloads over time. How do these figures compare to those of the pre-rebranding merchant app? As of January 2025, the number of downloads has increased by 40% compared to the pre-rebranding merchant app
-
Analyze the demographics of users downloading the app. Are they existing merchants or new users?
-
Monitor user reviews to assess if the features highlighted in the listing designs and banner resonate with users or if there are areas for improvement.
Lessons Learned
THE BALANCE BETWEEN INNOVATION AND FAMILIARITY
Balancing innovation with familiarity in this project was key. By introducing new elements within the bounds of known structures, I was able to encourage user trust while still pushing creative boundaries.
DETAIL MATTERS
Attention to detail plays a significant role, as precise alignment and positioning not only shape user perception but are also crucial in listing design, where adhering to guidelines is imperative.
CREATIVE ADAPTABILITY
Adapting to brand changes is a challenging yet rewarding way to integrate new and fresh ideas. It broadens the scope of aligning design with brand identity.