Case Study

Designing an advanced application that manages credit card repayments to save clients time,

Cardeo was founded to tackle the problem of credit card debt.Combining open banking data with artificial intelligence to beat thedownward spiral, their aim is that people pay less interest, no morefees, and are able to pay off their credit card debt without hassle.

Challenge

Take the client’s vision for a simple but advanced application, and create a user-friendly app that manages credit card repayments to save clients time, money and hassle.
Website: cardeo.com/

Solution

Create a user-friendly card managing application with advanced features that enables the client to engage with their customer base as well as raise funds.

Result

£2.1M
Increase conversion

Designing an advanced application that manages credit card repayments to save clients time, money and hassle was no simple task. Our partner had ideas about how the application should look and what functionality it should have. They shared their product idea and vision with our team at the first stages of work. Then, we held several workshops to agree on the work plan and project details. 

The main challenge for our team was to make complex functionality easy to understand for users. We also needed to make the application compact but perform many different functions. 

To do this we used agile working and short sprints so that we could complete work and gather feedback on each section that we built, making improvements as we went along. 

Cardeo_Northell_wireframes

 

The Strategy

When Cardeo approached us, they had the concept for an app. Their vision was a simple, user-friendly application that would help people to pay off their credit card debt quicker, reducing the interest and the fees they would pay. They had some preliminary design ideas, so we took this, along with the concept, and created an agile roadmap, to ensure we could be responsive as the concept evolved.

We knew that the needs of the customer would be critical to the success of this app, so we began with a discovery phase, conducting interviews and gathering feedback from potential users and stakeholders. This enabled us to create customer personas to help us understand how and why customers would be using the app. 

We researched the market and competitors in the same space to help us make some decisions around necessary functionality and UX design. Based on the information architecture, we started to build wireframes for a better understanding of the structure of the app. Based on these wirefames, we created UI design to give a visual representation of the app. 

Finally, we built a full a design system and framework to make sure there was consistency across the application, make additions easier, and speed up the process in the future.

 

Design System

For the Cardeo App, we developed a design system from scratch. Our team created all elements for the platform, including icons, headings, drop-downs, inputs, buttons, and graphs. We wanted the app to be as user-friendly and self-explanatory as possible, so kept the designs clean and simple.

Cardeo_Northell_UIDesign

UI Design

We worked with a design partner before we began the build. Together we decided on the appropriate colour scheme for the main app and all the accents. We decided to emulate the company’s logo colour in the initial pages, to build trust and familiarity while explaining the benefits and features of the platform. We used white space in the design to ensure that users wouldn’t feel overwhelmed by the design or features.

Onboarding

We created the application onboarding in two separate parts, a carousel for the first section so we could showcase the benefits and main features of the app, and then the registration page. For this section we worked with our design partner to strike a balance between slick registration functionality and a simple to use design. Again, we used white space where possible so as not to overwhelm users.

Cardeo_Northell_Onboarding
Cardeo_Northell_CardConnection

Card connection

The card connection functionality within the app needed to be quick and simple, as we knew there would be a risk of losing users at this point in the journey. We added in card scanning functionality to make it as easy as possible for credit cards to be added to user accounts.

Dashboard

We designed the dashboard to be clear enough that users could see key information at a glance. With so much information to convey, including total balance, total credit limit, interest and fees paid in the last 3 months, their list of credit cards, and latest transactions, we knew the design would have to do a lot of heavy lifting to keep things clear and easy to use. We used icons and colour coded sections for added clarity. 

Cardeo_Northell_Dashboard
Cardeo_Northell_RepaymentCalc

Repayment calculator

We also built a repayment calculator so that users could make more informed decisions. The repayment calculator enables users to calculate how much they can save. Once they have entered their finance details, we present repayments and minimum payments in graph form. The app then works out the best way to split the monthly payment across users’ cards to reduce interest. This gives users the ability to create their own repayment plan and reduce fees.

Cardeo credit

We’ve also used blockchain technology so that users can take a loan through Cardeo and set a credit limit. The credit dashboard displays balance, interest rate, total limit, statements, and transactions, so they can manage the whole process via the app. Users can increase their credit limit, as well as split transfers.

Cardeo_Northell_CardeoCredit

Results

As a result, we created an advanced but user-friendly card managing application. According to the first feedback from users, the application is convenient and covers their needs. Users can manage their whole account via the app. Additionally, the app works quickly and efficiently due to the development technologies we used.

Cardeo_Northell_wireframes2

Case Study

See All Cases
SmartJen

Development of a new web portal with a simple user interface, coupled with color scheme and modules...

Design ,
RhinoDox

Using a simple, yet scalable CMS solution like Wordpress to develop a frontend with complex modules...

Design ,
StockApp

UI/UX design for an app to provide and easy way to navigate the user interface, with low downtime...

Design ,

Ready to grow your

business?

 

Get In Touch

logo_white

We help ambitious
companies achieve
rapid growth

ISO-9001-2015-badge-2024

Company

Resources

Follow Us