Product Design

/

Finance

Redesigning Uncapped’s portal for faster time to value

Redesigning Uncapped’s portal for faster time to value

About

Uncapped

Uncapped is a financial services portal that provides flexible and tailored funding to small and medium sized businesses to help scale faster.

Responsibilities

Head of Design
UX/UI
Researcher
Animation/Video
Product Management

Team

🎨 Senior Product Designer

🎨 Middle-weight Product Designer

About my role

  • Collaborated closely with the CPO and Head of Engineering to ensure that our designs fully supported our constant release strategy.
  • Launch Uncapped Banking in as little as 6 months
  • Lead prioritisation efforts with CPO to steer Product Managers and Designers to ensure most impactful solutions were prioritised.
  • Prioritised a mobile-first design system, which not only reduced engineering efforts but also improved the overall user experience.
  • Proactively led research initiatives aligned with the product roadmap, providing valuable insights for successful product development.
  • Played a key role in supporting product teams during the launch of complex products like the Line of Credit, ensuring a smooth and successful rollout.
  • Lead weekly design reviews to align entire product team across all new design initiatives

Impact

⏱ 15% increase in NPS

🚀 Fast launch of new products in weeks, not months

📈 33% increase in user engagement

Challenge

After joining Uncapped, the business had decided to invest in business banking as a way to scale the company, and provide a portfolio of financial options for businesses to take advantage of. This would be a big undertaking and one that required a suitable platform to host such functionality. 

The old Uncapped portal was not designed for banking functionality but for a place for founders to see how much capital they needed to pay back periodically. Its lack of mobile responsiveness and uncompetitiveness compared to rival platforms played a big part in the decision to sunset version 1 of Uncapped.

We only had 6 months to launch banking to the US market and a product team that was not yet at full resource. We knew that to launch banking we needed to be lean, agile and reactive. With this in mind, I knew the design system also had to follow these principles.

Reviewing the old design
My team reviewed our existing UI and collaborated with CX to understand where it was failing

Process

Discovery

Myself and a junior product designer spent the first few weeks running competitor analyses of other fintechs in the market including Brex, Mercury and Revolut. We then aligned with the CPO and Head of Engineering on our recommendations for platform architecture and vision. From the initial research we made a decision to lean more into a mobile-first design system because we knew time was against us, but we didn’t want to compromise on usability. We knew that many users would use us most prominently on mobile, and even if they didn’t, the market just wouldn’t let us get away with anything that couldn’t be used on a mobile when competitors all had apps.

After this initial discovery, we then started wireframing the architecture in Miro against the core jobs to be done we required for banking and funding. This required several rounds of iteration where we would present updates 2 times a week to the co-founders and CPO. Eventually we aligned on an approach that allowed us to be highly agile.

We used Miro to map out core user journeys

To optimize user interaction, we divided the UX into three distinct levels, catering to different user intents—whether it was browsing for information or completing tasks. This hierarchical structure enhanced user engagement and made the We then ran moderated tests on non-customers to understand how easy the main jobs to be done could be completed, and whether the UX helped or hindered those users. Those tests were successful in showing that users could easily complete tasks. For those on desktop, there were some negative comments about the mobile styling, however all were happy with how easy it was to use and navigate. We understood the feedback about the desktop version, but made the decision that it wasn’t causing friction, when weighed against our requirement to build quickly.

Mobile-first architecture

The approach we decided to take was to design a UI that would require almost no break-points or mobile CSS styling. Components would be designed and built to be displayed in the same format whether the user was viewing on desktop or mobile. 

Component library
Our component library was based on Atomic principles

The UX was also designed in a 3-column format where the left-hand column was the navigation, the middle-column was the main content you would view whether on desktop or mobile, and the right-hand column was content you opened when clicking an item to get more information e.g. a transaction. This meant components didn’t have to be stretched or shrunk to fit new constraints on different devices. This approach also meant users didn’t have to re-learn the UX when using a desktop and switching to mobile.

For the navigation, we again went for a simple 3 item nav. This was in reply to feedback that many platforms have complex navigation. We also felt a complex navigation system was unnecessary, and that users could access tools much quicker when put in context with the page they were on. For example seeing prominent ‘Pay’ buttons when viewing invoices or by the checking account total.

Mobile-first design system
The architecture allowed us to make designs consistent across desktop and mobile

I also wanted to have a clear distinction of what the architecture would look like when completing similar taks. We ended up designing a 3-level system whereby ‘Level 1’ was a page where you view information from a navigation item. ‘Level 2’ was information you accessed when clicking an action e.g. View transactions. ‘Level 3’ was for tasks that had either a success or error state e.g. Make a payment. This level would hide all navigation to keep users fixed on the task at hand.

UI information architecture
We wanted information to be displayed consistent across desktop and mobile

Design system in practise

When the time came to use the design system as part of BAU product team tasks, I had the goal that it would allow teams to release content in as little as 2 weeks, per the standard sprint time. I advocated for user stories to be the centre of tasks teams needed to complete, where they followed the format “As a… I want to… so that I…”. This was to unify all product functions around the goal of solving a user problem - not a technical one.

This took a few months, but we eventually succeeded in getting all functions aligned. As part of this I also asked for stories to be broken down based on complexity, so that when designers presented their work, it was easy for all members of a Design Review to see what changes were being proposed. As these calls would also include the co-founders, I found it easier to manage their expectations when we showed very specific problems we were trying to resolve instead of a bigger journey with many problems. This helped us reduce review times down to under 1 hour where previously they would extend to 90 minutes or even 2 hours.

After a few months where the design system became more mature, these reviews were able to be a lot more critical of the components we were using in order to prevent wasted effort.

Line of Credit user journey
The component library allowed us to design and build Line of Credit within 6 weeks

Launching products and features

As the design system was designed to allow product teams to make fast updates, we were able to launch Uncapped Banking within deadline successfully. After this release we were able to make constant updates in as little as 1 week - 2x as quick as our initial goal.

After the company decided to pause banking investment, we made the call to migrate all funding customers to the new platform where we introduced updates to their experience which was becoming very outdated in the previous version. An example of this is the company has stopped selling its RBF type loan which was the cornerstone of the first version of the Uncapped platform.

After this migration the company then launched products including Inventory Financing and Line of Credit. By leveraging reusable components, we achieved significant time savings and were able to launch new products like Line of Credit and Amazon financing in as little as 6 weeks when combining the design system with third-parties.

New draw
The right-hand column was used to add context to the middle column

Summary

The Uncapped Design System proved to be a huge success. Our NPS scores compared with the experience of users from the old platform jumped up 33% and we also saw a 15% surge in user engagement.

The biggest impact however was in the speed design could turn tasks around. The leanness of the design system (without compromising on UX) allowed designers to work fast and smart, solving multiple problems per week. This impact was keenly felt by the Product Team who could churn out updates and run various experiments in order to discover new opportunities. 

Even though the initial use case of banking functionality was not wholly realized, the system was robust enough to be used across our core funding product and help the company scale that product in the following years.

Other case studies

Want to work together?
Get in touch