KLASHA
Cross-border commerce for businesses selling in Africa.
INDUSTRY
Fintech
MY ROLE
UX design, UI design, Visual design, Design system automation.
OVERVIEW
Klasha is a technology company that builds cross-border commerce solutions for African consumers and international businesses wanting to sell into Africa.
To achieve this mission, Klasha has built solutions to improve the activities of both the customers and the merchant. KlashaCheckout allows customers to transact online across borders in their local African currencies. The Klasha app allows consumers to generate virtual foreign currency cards. These alongside solutions like the KlashaWire and payment links facilitate transactions between merchants and their customers.
Klasha is currently live in Nigeria, Tanzania, Uganda, South Africa, Kenya and Zambia.
To achieve this mission, Klasha has built solutions to improve the activities of both the customers and the merchant. KlashaCheckout allows customers to transact online across borders in their local African currencies. The Klasha app allows consumers to generate virtual foreign currency cards. These alongside solutions like the KlashaWire and payment links facilitate transactions between merchants and their customers.
Klasha is currently live in Nigeria, Tanzania, Uganda, South Africa, Kenya and Zambia.
To further improve the quality of the product I was contracted to join the product team for the design of the v2 of the product. The sprint was within a month as redesign of the entire platform had begun prior to my arrival on the team. My focus was on the merchant’s dashboard.
Building shared understanding
With redesign already in progress, my design process started with seeking to understand the progress with the design, ensuring I am on the same page with the product team and in the process, reuniting everyone over the common goal. It also allowed me to have a proper onboarding to the platform as I was not a primary user (in relation to frequency of use) of the platform.
There were interviews with key stakeholders involved in the redesign. It gave me clarity on what we were seeking to achieve and I was able to check the team’s expectation regarding look and feel, functionality and the target audience. Thanks to the team’s great documentation culture, a bulk of the information regarding the redesign progress, user behaviors and expectation was readily available.
There were interviews with key stakeholders involved in the redesign. It gave me clarity on what we were seeking to achieve and I was able to check the team’s expectation regarding look and feel, functionality and the target audience. Thanks to the team’s great documentation culture, a bulk of the information regarding the redesign progress, user behaviors and expectation was readily available.
Key insights
- In this stage, I was able to understand that there was an initial redesign of Klasha’s design system. Which implies there will, primarily, be a visual overhaul of the merchant’s dashboard asides every other design change to be made.
- Design decisions were to be made to ensure retention of existing customers and ease of adoption of the product by new users. This means there would be need to maintain some of the existing design patterns so as not to alienate the existing customer base.
- The dashboard caters for two major merchant types: The registered businesses and sole traders (a term used within the team to describe mom and pop shops, small and independent businesses as well as social media vendors that require to receive payments or explore a range of Klasha merchant solutions.)
This process continued throughout the project as I had to gain cross functional knowledge from other product departments at different steps of the project.
- In this stage, I was able to understand that there was an initial redesign of Klasha’s design system. Which implies there will, primarily, be a visual overhaul of the merchant’s dashboard asides every other design change to be made.
- Design decisions were to be made to ensure retention of existing customers and ease of adoption of the product by new users. This means there would be need to maintain some of the existing design patterns so as not to alienate the existing customer base.
- The dashboard caters for two major merchant types: The registered businesses and sole traders (a term used within the team to describe mom and pop shops, small and independent businesses as well as social media vendors that require to receive payments or explore a range of Klasha merchant solutions.)
This process continued throughout the project as I had to gain cross functional knowledge from other product departments at different steps of the project.
TL;DR - KEY INSIGHTS
There would have to be a visual overhaul of the merchant dashboard to align with the new design system created.
Design decisions were to be made to ensure retention of existing customers and ease of adoption of the product by new users.
The dashboard caters for two major merchant types: The registered businesses and sole traders.
Dashboard inventory and audit
It was important to know what exists already, what is left to be created and which of the existing components and flows needs to be redesigned or retained. Here are some of the discoveries from the dashboard audit:
A couple of the components in the existing dashboard needed redesign. I made request to the design systems team regarding the required components while giving context into the need for redesign and the use case.
The onboarding process needed to be streamlined to cater for the merchant types. The current onboarding process, especially the compliance flow, required information and documents that were irrelevant to the *sole traders.*
The onboarding process also needed to be improved to ease new users into the Klasha environment. The initial onboarding process simply introduces the users to the dashboard home with an empty state screen of the original section layout. This section can be further utilized to allow the user carry out their first task on the platform. This not only improves the onboarding process but also favours user engagement. The onboarding process was also missing out some important KYC requirements.
A couple of the components in the existing dashboard needed redesign. I made request to the design systems team regarding the required components while giving context into the need for redesign and the use case.
The onboarding process needed to be streamlined to cater for the merchant types. The current onboarding process, especially the compliance flow, required information and documents that were irrelevant to the *sole traders.*
The onboarding process also needed to be improved to ease new users into the Klasha environment. The initial onboarding process simply introduces the users to the dashboard home with an empty state screen of the original section layout. This section can be further utilized to allow the user carry out their first task on the platform. This not only improves the onboarding process but also favours user engagement. The onboarding process was also missing out some important KYC requirements.
Some of the dashboard sections needed to be redesigned to be more usable. The exchange rates section needed to be redesigned to simplify the process of accessing the Klasha exchange rates for a range of currency. The settings section needed to give merchants a range of control over the payment solutions and how to simplify running their business with Klasha.
Also, some of the design decisions initially made were not sustainable enough for the product UI upon release of more features. The current filter display approach doesn’t account for possiblities of more filter options in the future.
Also, some of the design decisions initially made were not sustainable enough for the product UI upon release of more features. The current filter display approach doesn’t account for possiblities of more filter options in the future.
Some of the dashboard sections needed to be redesigned to be more usable. The exchange rates section needed to be redesigned to simplify the process of accessing the Klasha exchange rates for a range of currency. The settings section needed to give merchants a range of control over the payment solutions and how to simplify running their business with Klasha.
Also, some of the design decisions initially made were not sustainable enough for the product UI upon release of more features. The current filter display approach doesn’t account for possiblities of more filter options in the future.
Also, some of the design decisions initially made were not sustainable enough for the product UI upon release of more features. The current filter display approach doesn’t account for possiblities of more filter options in the future.
Very great design decisions were, however, made throughout the design as well. Effort was put into ensuring that the users understand what is required of them at different stages of interaction with the platform. An example is the info icon that displays a tooltip that explains key information on hover during the onboarding process.
There was also a step indicator that shows the number steps left at each point in the compliance flow.
Emphasis was placed on feedback for users actions as well. This was mostly achieved with the use of UI toasts across the dashboard.
Job to be done
The preliminary stages of the design made the key areas to be touched for the redesign clear. Here is a list of all the key redesign areas. This case study will show how each of the issues were tackled as well as the overall result.
JOB TO BE DONE
Redesigning UI in line with the new design system
Streamlining onboarding process to cater for the merchant types
Improving onboarding process to ease in new users
Improving KYC requirements
Redesigning section layouts and content architecture for the exchange rate section and the settings section which strong focus on usability.
Redesigning specific UI sections for sustainability.
Design solutions and dashboard interface
With the job to be done already stated, I began designing solutions for each of the issues pointed out.
User onboarding
From the dashboard audit, there were a couple of points in the onboarding process that needed to be touched. This section touches each of the issues pointed out and their respective solutions.
JOB TO BE DONE ON ONBOARDING
Streamlining onboarding process to cater for the merchant types
Improving onboarding process to ease in new users
New business information requirements
Streamlining onboarding process to cater for the merchant types & new business information requirement
As the current onboarding flow doesn’t cater for a sole trader, I had to draw out the current user flow for user onboarding on Klasha to find the point where the journey of a registered business and that of a sole trader separates.
The journey for both user types changes right after the first step. A couple of other steps were added to the flow, solely due to the KYC requirements. Here is the flow for the merchant types.
Improving onboarding process to ease in new users
To ease the users into the dashboard, the empty state screen was improved to instruct the users to perform their first action on the app.
Also, after a research into similar fintech apps like flutterwave and paystack. A feature that allowed users to switch between two different modes, live and testing, was introduced to allow new users to get familiar with interface without having to care about the effects of their actions on their main account.
Edits to the copy was made as well, for clearer communication.
Also, after a research into similar fintech apps like flutterwave and paystack. A feature that allowed users to switch between two different modes, live and testing, was introduced to allow new users to get familiar with interface without having to care about the effects of their actions on their main account.
Edits to the copy was made as well, for clearer communication.
Exchange rate section redesign
The current exchange rate section made the process of finding the exchange rate for a particular currency uneasy. It provides the user with a table populated with several currencies and their rate of exchange to another currency without providing an easier means to filter through the list to find a particular currency.
To solve this problem, the new design provided the merchant with an exchange rate calculator and a search and filter functionality for the exchange rates table.
Settings section
The settings section allowed users to access and edit some of the information filled in during onboarding. It also allows users to generate API keys for integrating their Klasha account to other platforms for receiving payment.
The new settings section takes user control over their account a step higher. A new section was introduced called preferences, which allow the merchant to customize their account to match their needs. The merchants can now customize their account to accept payment via a range of payment options in a specific country.
Dashboard filter functionality
The dashboard provides the merchants with a series of criteria to filter through tables within its section. The design, however, employs an unsustainable UI pattern. Filter options are displayed individually in a single line which wouldn’t displace the dashboard UI upon increase of filter options.
The redesign caters for this shortcoming but grouping all filter criteria into a filter modal.
The redesign caters for this shortcoming but grouping all filter criteria into a filter modal.
New dashboard UI
With the other issue out of the way, I continued redesigning the existing dashboard UI to match the new design system. Here are some of the screens from the redesign.
Team synergy
Working on this project exposed me to working with a very diverse team. I worked with different teams at different stages of the project.
While I was trying to get familiar with the platform, I got a tour of the app from one of the customer support representatives. The tour exposed me to key areas where users faced challenges. After the first design iteration, there were Software testing sessions with the frontend QA testers that resulted in some constructive feedback on the dashboard design.
At the end of each iteration, the UX writer would review the copy of the dashboard to ensure that communication across the platform was consistent.
For most part of the project, I was in constant communication with the product managers to ensure I am pushing out the right deliverables in time for review and testing and to ensure I am working in sync with the product road map.
While I was trying to get familiar with the platform, I got a tour of the app from one of the customer support representatives. The tour exposed me to key areas where users faced challenges. After the first design iteration, there were Software testing sessions with the frontend QA testers that resulted in some constructive feedback on the dashboard design.
At the end of each iteration, the UX writer would review the copy of the dashboard to ensure that communication across the platform was consistent.
For most part of the project, I was in constant communication with the product managers to ensure I am pushing out the right deliverables in time for review and testing and to ensure I am working in sync with the product road map.
Key learnings
- One of the major things I learnt on this project was how important a good documentation culture is. Onboarding me to the team was easier because of the already great documentation of the project progress.
- Communication gives clarity. This redesign was seamless because of the constant communication between I and the team for clarification and to keep us all in track with the progress and changes to be made.
- Communication gives clarity. This redesign was seamless because of the constant communication between I and the team for clarification and to keep us all in track with the progress and changes to be made.
Design result
- The redesign effort led to 98% customer retention.
- Reduced redundant design assets by 40%
- Increased task completion rate by 5% after redesign.
- Reduced redundant design assets by 40%
- Increased task completion rate by 5% after redesign.
It is only right that Critik provides charts and ratings based on their judgement of good music. This section of the site provides, the user, access to various musical charts. They are classified into trending and new charts.
