Designing a financial super app to unify a previously fragmented experience

CONTEXT

Business owners find it challenging to manage their finances through Teya’s fragmented products.

Merchants deal with huge friction managing their finances, typically using at least 4 different software to do so. For example, one software for payments, another for banking, another for loans, etc. This means constantly monitoring different platforms, managing multiple log in details, interacting with different interfaces, accessing support in different ways and so on. This is not only time consuming and inconvenient for the merchant, but costly as well.

Teya offers a suite of tools for small to medium sized businesses to run and grow, including a payments solution and vertically integrated products like banking, loans, and loyalty. Teya aims to be a one-stop shop for business owners, such that business owners do not have to deal with the hassle of managing software from different service providers.

Teya’s products are highly interconnected and have a number of synergies: the payments are settled into the business account, repayments for the cash advance come from the daily payments, and so on. However, each product is currently standalone, offering a fragmented experience for merchants who still have to consult different products to get an overview of their business.

Benefits

Centralising Teya’s financial products onto one platform has a number of benefits for the business as well as the merchant.

Business: Launching a super app has been a longterm vision of the company, and is one of the 4 key goals for this year. By offering a platform to cross-sell Teya’s products, it is predicted that the super app will increase revenue. In addition, as it improves the merchant experience, it is predicted to reduce churn.

Merchant: A super app will improve the merchant experience by simplifying things and saving time, enabling them to get a quick overview of their businesses and eventually get data-informed smart recommendations.

THE CHALLENGE

How can we enable an interconnected experience of Teya’s financial products in a single place?

Team: I worked with a team of 2 other designers, a product manager dedicated to the super app as well as product managers of each individual product, and a team of engineers.

Constraints:
- We were under tight timelines to launch this in 3 months.
- With a recent round of layoffs, we had limited engineering resources for this project.
- Poor business performance meant additional pressure from leadership to launch this keystone project.

Scope: Design the end-to-end super app, including the onboarding, navigation and content structure. For this case study, I will focus on the navigation and information architecture.

I created an information architecture map to help understand the overlap between products.

I started by mapping out the information architecture of the 3 products. Given the substantial overlap between products, this exercise helped the team understand which screens it would make sense to unify in the new app to provide a better offering to the merchant.

We recognised the need to have a single overview screen to give the merchants a birds’ eye view into their business, as well as a single settings page to manage their profile and information centrally.

I drew inspiration from a wide range of apps to evaluate different navigation patterns.

In order to address the central design challenge of navigation, the design team and I drew inspiration from the navigation of 25+ apps, including super apps from non-financial industries like travel and music.

Here are a select few of the navigation patterns we found. We learnt that there were multiple ways to tie distinct functions together - some apps integrated functions more seamlessly, and others less so. We evaluated each of the patterns, thinking about which ones could make sense for Teya’s product offering.

I led a whiteboarding session with the design team to identify potential navigation patterns.

Brainstorming initial ideas

Drawing inspiration from the navigation options we found, I led a whiteboarding session to brainstorm how our products could fit together. We had the rare opportunity to be in the same room together, so I thought an in-person whiteboarding session would be a fun and collaborative way to start evaluating design options.

We then translated our white boarding session into multiple distinct approaches, trying to balance time to ship vs offering an integrated experience.

The design team and I iterated on navigation patterns until we came up with a solution that would provide value for the user and also be quick to ship.

We narrowed down on 2 main options, option A and option B:

Option A featured a homepage to provide an overview of the business. Each product had its own navigation, and could be accessed distinctly.

Option B did not have a homepage, but rather focused on a single product at a time. It offered an app launcher for switching between products.

Along with a team of designers and developers, we assessed the options and came up with a list of pros and cons. While we were not able to do user testing given the tight timelines and pressure from leadership to launch, we compromised by doing internal research with key stakeholders to gather a range of feedback.

Evaluating option A:

• Strength: Central place for communication: A home screen created a place to convey important updates and upsell products to the merchant.

• Weakness: Products appear too distinct: The company wanted to treat products like features of a unified offering, rather than individual products.

Evaluating option B:

• Strength: Quick time to market: There was minimal disruption to existing product navigation.

• Weakness: Lack of a home screen: No central communication hub or business overview due to the absence of a homepage.

Upon discussions with the team and the leadership, we received feedback that “it doesn’t feel like one app” and “the products don’t feel interconnected.”

After several iterations, the designers and I came up with a third approach that attempted to make the app feel more cohesive.

Option C combined Option A’s summary view, offering a home screen, with Option B’s app-launcher to access different products. This key difference was this this option introduced a new global navigation, present across all screens, to give the app a unified feel.

This approach meant that the internal navigation of each product had to be modified to make way for the new global navigation, but it was a tradeoff we were willing to make to offered a more unified experience.

I created new components and set the app’s visual language to expressed the brand.

Once we settled on this approach, I began the process of translating this into high fidelity designs. Many of our existing navigation components within the design system did not work in this context, so I crafted them from scratch, helping to improve the company’s upstream design system.

This is what the final app looks like:

Next steps

We plan to pilot this app in September 2023 to a closed group of merchants who have multiple Teya products. Once we have validated the super app proposition in the UK, we will take it to other markets and serve a larger user base. The long term vision is to empower the merchants with smart insights to help manage and grow their business.

Evaluating success

Launching the app will be a huge milestone, fulfilling a key company objective for the year. However, it will be important to measure the impact of the work and to see whether there are initial signs of product market fit. We intend to do so in 2 main ways:

1. User feedback: It will be crucial to gather feedback from the merchants themselves to assess whether they are using the unified app, and whether they are getting the value that we expect (saving them time and effort while managing their businesses). We will be using their feedback as a sounding board to understand what we need to improve on and where we need to go next.

2. Key signals: We will be monitoring some key signals to understand the impact of the app:

   • Cost of acquiring new customers (is it easier to pitch the new product, how are prospects responding to it)

   • Customer support overhead (is the new app generating more issues than having 3 standalone apps?)

   • Churn rate (are customers still leaving us, and if yes, why?)

Reflection

In hindsight, here are 2 main things I would do differently:

• I would have insisted on user testing, even with a scrappy prototype, to get a feeler from users earlier on in the process. Some of the decisions we made were influenced too heavily by the opinion from leadership. This decision making process could have been less biased and faster if we had data from user testing.

• I would have had better defined success metrics earlier on in the process, so that we would be able to more confidently evaluate the app once it launches. We didn’t do enough upfront research to identify the outcomes that map to business impact, so it becomes more difficult to assess the impact of our work.