Product Design
/
Finance
Product Design
/
Finance
Uncapped is a financial services portal that provides flexible and tailored funding to small and medium sized businesses to help scale faster.
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. After initial discussions with the CPO, Head of Engineering and founders, I summarised these were the main challenges facing us:
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.
To solve the challenges in the previous section, we highlighted the following opportunities:
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.
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. 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, they liked the simplicity of the UX, and all were happy with how easy it was to use and navigate. Some users shared feedback that they expected a more dashboard feel on desktop, but we made the decision that it wasn’t causing friction when weighed against our requirement to build quickly.
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.
We designed the UX 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.
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.
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.
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.
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.
