Partners

Company: AREX· Role: UX Lead · Date: 2021

AREX, is a competitive data-driven Fintech start-up aiming to bridge capital market liquidity and SME cashflow needs.

The Challenge

The Partners portal was an application designed to leverage client's data and enable partners to look out of their SMEs.

Main objectives

Improve the user experience

Partners must manage their leads and add extra details.

Be competitive in new markets

Spain
UK

Be the seed of a Design System

Rebrand and create a UI kit that serves as the foundation of the Design System.

Scope and Business Value

Improving this app was crucial for the company as it aimed to expand into new markets. Operating in Finland, Arex expanded to the UK and Spain, where competitors offered similar, user-friendly services.

The redesign was also important because it will be the first of a suite of apps, leading to the creation of a UI kit and making it easier to build a Design System in the future.

Role responsibilities

Team structure: UX Lead, Product Manager, and Engineers squad (Front-end and Back-ends) and collaboration with the Head of Product, and the Head of Marketing,

Responsibilities: Lead the UX, UI, and research of the project and give my user experience acceptance (UXA).

Timeline

One quarter for the Minimum Viable Product and one more quarter to add new features.

Discovery

User research

I collaborated with PM, the Sales Manager and the Client Relationship Manager to create the Partner User Persona based on data from our database, complaints, conversations with partners, and onboarding forms.

User pesona 1: Mikko

User persona 2: Leena

Base on the user persona, I could empathize with the user and undestand that the users had limited technological skills and were often busy, requiring quick access to information. Therefore, it was essential to design an interface that was simple and easy to use. In Mikko's case, the goal was to create an interface that addressed all his needs, minimizing his reliance on the Operations team for support.

Interviews

I ran some interviews to a group of partners that used the old interface to discover the main user pain points and needs:

They suggested that the companies could be reordered alphabetically.
The users told us that the "Missing bank details" filter was their most frequently used.

Based on this, I not only determined that it was important for the companies column to be sortable alphabetically, but I also added sorting functionality to all columns: dates, registration and client numbers, as well as status. This way, the user would have much more flexibility to review the data and find results more efficiently.

Heuristics

I conducted a heuristic evaluation of the entire old interface and identified significant usability issues, particularly in the forms. There was no prior indication of which fields were required, causing friction for users if they missed filling out a mandatory field. To provide a seamless user experience, we need to anticipate such errors.

Additionally, the icons representing different statuses were problematic. The same icon was used multiple times, with only color variations to indicate different states. This could easily confuse users and make it difficult for them to recognize and remember each status. A key usability principle is that elements should not be distinguished by color alone.

Definition

I agreed with the Product Manager that these would be the fundamental user stories for the first iteration of the project:

Develop

I led a rebrand for this app, establishing a style that would be applied across all external apps after launch. I developed a more vibrant and approachable color palette, ensuring sufficient contrast between text and background. Additionally, I refined the hierarchy of font styles. All components were designed in Figma, creating a UI kit that would serve as the foundation for the design system.

Design system

The front-end lead and I decided to create our components based on the Quasar framework based on Vue.js. This framework is based on Material Design and its components are easily customizable (CSS) and extendable (JS).

The Design System was called "Pigment". You can read more about it in this case study.

Filter and sorting

Filters appeared in a modal layer. Once they were applied the user can see what he filtered and quickly delete it if needed. The filter “missing bank details” was out of this layer, and was always visible below the title.

In the table list, all the column had sorting.

States

I redesigned the status element: new icons (with tooltips) that symbolized the meaning of each status. Each one with semantic colors that highlighted the importance of each step.

Forms

For the forms, we wanted to avoid friction for the user, so we showed in advance which fields were mandatory.

Usability testing

We ran a usability test with some users to validate all assumptions. It was a success. We used a high-fidelity Figma prototype. In this test, we got a new pain from users, which we included in our proposal. They told us that it would be useful for them to have insight into why a lead was rejected.

Deliver

The tool we used for the hand-off was Figma. I crafted a style guide and a UIKIT with components. Components based on our framework (Quasar, Vue.JS).

I provided the engineers with all the mockups and prototypes they needed.

QA

Because the company doesn’t have a QA team, the Front-End Team and I organized some sessions called “Test Party” that involved other people in the company to help us test all the features. The Engineering team fixed the bugs.

Launch

The Partner portal was launched. Below you can see the before and after.

🚀 The Partner portal MVP was published!

Continuous Research

I defined the tooling for Research because the company didn’t have anything yet. I chose Smartlook to validate all the ideas and assumptions for this project and learning more about the user's needs and pains. With the user session recordings, funnels, and heatmaps we could observe our users' behavior.

I settled on some goals to be validated:

General understanding of the interface: identify the icons, main CTAs, and filters.
Success criteria: if the user can fill and submit the Create form.
Success criteria: if the user can find a company using the Filter form.
Success criteria: if a user can upload Bank Details to a lead.
I wanted to validate how often the users applied the “Quick filters”.
Find new insights.

Results and Metrics

A lead was created between 33 and 46 seconds.

I observed in the research that the users had a general understanding of the interface:

The top-bar icons and the main CTAs (Filter & Create a Lead) were perfectly understandable.
The new icons, for states, were understood by the users, they initially consulted the tooltips and later they learned their meaning.
Users identified the three-dot icon as a menu trigger.
Users could easily open the table by clicking the arrow.
The quick filter “missing bank details” was used a lot. And users could add bank details effectively.
The user filled out the "Create Leads" form very quickly: a lead was created between 46 seconds and 33 seconds.

New insights:

I observed friction in the user, they were not sure that the lead had changed status: The user added the Bank Details to a pending lead. The system took some time to refresh the lead to the "Onboarding" status. So users invented a workaround, they touched any interface filter to trigger the refresh. So, we added here a loading.

The Country code selection of the Phone field was a field that was a bit time-consuming for the users. They scrolled down the list to find their country (Finland, UK, and Spain). They didn't enter the first letter of his country, they preferred to scroll. So, I redesigned the component with a list of the most frequent countries first before the A-Z list.