Cendmate

Challenge

Cendmate is a Canadian based software company that enabled transfer of funds between bank accounts of different account type in East African countries like Tanzania, Canada and parts of West Africa like Nigeria.

Impact

  • Figma

  • Google Docs

  • Google Forms

  • Notion

  • Maze

Role(s)

  • Daniel Bello - CEO

  • Jazz Grewal - Developer

  • Salaudeen Ridhwan (UI/UX Designer)

Contributions

  • Low fidelity prototype

  • High fidelity design

  • Design documentation

Cendmate

Challenge

Cendmate is a Canadian based software company that enabled transfer of funds between bank accounts of different account type in East African countries like Tanzania, Canada and parts of West Africa like Nigeria.

Impact

  • Figma

  • Google Docs

  • Google Forms

  • Notion

  • Maze

Role(s)

  • Daniel Bello - CEO

  • Jazz Grewal - Developer

  • Salaudeen Ridhwan (UI/UX Designer)

Contributions

  • Low fidelity prototype

  • High fidelity design

  • Design documentation

Cendmate

Challenge

Cendmate is a Canadian based software company that enabled transfer of funds between bank accounts of different account type in East African countries like Tanzania, Canada and parts of West Africa like Nigeria.

Impact

  • Figma

  • Google Docs

  • Google Forms

  • Notion

  • Maze

Role(s)

  • Daniel Bello - CEO

  • Jazz Grewal - Developer

  • Salaudeen Ridhwan (UI/UX Designer)

Contributions

  • Low fidelity prototype

  • High fidelity design

  • Design documentation

Click to view interactive prototype

Visit Website

Defining the project goals

. Research, and deconstruct the payment processes native to the target audience to their simplest forms . Identify ways to merge and streamline these processes in a simplistic manner. . Create a payment flow that is accessible through all major media platforms. . Design a very minimal and simple interface that is straight to the point but still engaging.

Insights gathered

. People feel more mental inertia if their bank application has a bad user experience. . People have different bank accounts for different purposes e.g some people have an account to receive foreign currencies and another for monthly stipend. . People sign up for digital accounts usually to receive international payments because they have a better experience and feel more secure. . People still rely on brick and mortar banks to receive local payments because they comply with the account number norm of their locale (usually bank number).

The challenge/Task

Deconstructing the payment process despite my experience working with multiple fintech companies was somewhat challenging. Creating a user flow for a mobile web application capable of processing transactions from banks with different account number types i.e. bank number and email with minimal effort from the user was a challenge for me at the time.

Research

After laying out the project goals I conducted market research to gain insights on the demographic that would be the best fit for the product. I also carried out surveys and interviewed a few users in said regions. Also, I did some research on payment processes native to the target regions. Here are my findings.

Ideation and prototyping

Following my research on payment processes and user behavior, I designed a mock up prototype that allowed for the two account types to be used simultaneously by users. The next stage was user testing

Screenshot of final approved designs.

Usability tests

I conducted live moderated usability tests while screen recording to identify possible loopholes in the site flow. I only when necessary during the tests to ensure the user had my undivided attention and I could observe their behavior when interacting with parts of the system. After conducting the tests, I went through each footage to peruse the interview footage in greater detail. Everything did not go so smoothly as there were some iterations and cycling back before the above mock-up was finalized. The next stage was user testing

Here is a snapshot of some of the initial challenges I faced with their solutions below.

Screenshot of unapproved design iterations for the currency page and nav bar

Screenshot of final approved designs.

Findings from testing

1. Copy matters - What language you use to convey messages to users must be concise and clear to them so research on your users behavior and demographic was key in deigning the navigation bar 2. Not all pages in the mobile app needed a navigation bar - Initially, I made sure to add a navigation menu to the bottom of each of the top level pages (home, settings, convert and withdraw pages). However, not only did they obstruct the functionality of the interface of some of the pages, but they also did not serve a purpose making them redundant.

Final low-fidelity prototype for transfer module

Creating the design system

A design system is a combination of layout pattern, component libraries, documentation, style guides and more which serves as a single source of truth for products design process. After getting approval from the client, I proceeded to flesh out the design system. It was heavily influenced by the research conducted as seen above with the iterations resulting from user testing. From the font selection to the corner radius. The design system was at different stages, being built from the start of the project. The same applies to the documentation on the design guidelines I created to further guide anyone who needed more context on how to interpret the design.

Snapshot of the some input components

High fidelity design

High fidelity designs I started with the onboarding using animations to better convey the simple onboarding process.

High fidelity onboarding design

Deposit module

The order module lets the user to select which currency they would like to engage with. Upon clicking in, the user is able to select their currency of choice and then can move on to get relevant account details as well as see transaction history or send money to other bank accounts.

This module shows the dedicated deposit flow

Currency modules

The currency module gives users direct access to the currency's main features which are transferring money, depositing money and checking transaction history.

This module shows the dedicated deposit flow

Convert modules

The convert page gives users access to live exchange rates in a non-intrusive manner while also making it very easy to convert currency within the app.

Convert module showing the user flow to currency conversion and highlighting the exchange rate section

Impact and learnings

Collaboration - Getting to collaborate remotely with a development team thought me more about time management, negotiation, listening, and articulation as it was important for me to gain insights on the developer's view on certain sensitive features like the in-house payment system and its integration. Empathy - This word has been used a lot in the field of UX a lot. But having empathy does not only apply to the users but also your co-workers. Having 4 years of experience as a programmer myself prior to being a UX/UI designer, it was easier for ne to empathize with the developers on the timeline required to finish developing a feature or integration. It also helped in picking feature design as not all features can be implemented relative to the budget allocated, timeline, and complexity of implementation.

What does this mean or contribute to the business? Learnings.

Thinking of the users - The fintech software market is booming. It is relatively easy to make money off of it. However, thinking of the users enough to merge different account types while simplifying the payment process of different demographics is greater attention to detail that should be learnt and adopted by many people in the field and companies alike.

Want to work with me or be friends? Shoot me a message

Let's Talk

Want to work with me or be friends? Shoot me a message

Let's Talk

Want to work with me or be friends? Shoot me a message

Let's Talk

Create a free website with Framer, the website builder loved by startups, designers and agencies.