Partners 

Company: AREX· Role: Product Designer Lead · Date: 2021

AREX, is a 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

Current market: Finland
New markets: Spain and UK

Be the pilot for 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

I served as the Lead Product Designer, working closely with the company's four development squads to guide their product efforts.

Team structure: For this project, I led the design effort in close collaboration with a cross-functional team, including the Product Manager for our Partners area and the Front-End Lead. I also partnered with the Head of Product and the Head of Marketing to manage the rebranding.

Responsibilities: Leading the UX, UI, UX Research, designing the Design System, and giving my user experience acceptance (UXA).

Timeline

The project timeline was structured over two quarters: one quarter dedicated to the Minimum Viable Product (MVP) and another quarter for subsequent iterations and improvements.

Outcomes

⚡️33 - 44 seconds

to create a lead

🧩 Creation of a new Design System

Pigment is the new DS for UI of the AREX platform

Discovery

User research

I collaborated with the 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

Based on the user persona, I could empathize with the users and understand 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 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:

User flows

 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 build our components using Vue.js, specifically with the Quasar framework. This framework is based on Material Design, and the components are easily customizable (CSS) and extendable (JS). 

The Design System was internally called "Pigment" and the idea was to scale all the company's products. I set the Tokens with Token Studio.

Filter and sorting

My design choices for the new app UI were directly informed by prior user research and a heuristic study. During user testing, I found that users frequently needed the "missing bank details" filter. Based on this insight, I decided to make it permanently visible below the title. For the remaining filters, I designed a clean modal layer that appears on tap, allowing users to easily apply, review, and clear their selections. Additionally, to enhance data management, I added sorting functionality to every column in the table list.
 

States

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

Forms

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

Usability testing

To validate our assumptions, the Product Manager and I conducted a usability test with a group of users.

I facilitated the sessions for our English-speaking participants while the PM acted as the observer. For our Finnish-speaking users, I trained the Finnish Product Manager to facilitate, and we then translated the observations together. My responsibilities also included creating the test scenarios and defining the success criteria for each task.

The test was a success. Using a high-fidelity Figma prototype, we discovered a new user pain point: a desire for insight into why a lead was rejected. We decided to incorporate this into our proposal as a new iteration. Now, users can see the specific reason a lead was rejected, directly addressing a critical need they had identified. 

Deliver

I used Figma for the design handoff, creating a detailed style guide and a UI kit with both styles and reusable components. These components were built based on our existing framework (Quasar, Vue.js) to ensure consistency.

To facilitate a smooth collaboration, I provided the engineers with all the necessary mockups and prototypes. I also conducted a workshop to train the team on how to use Figma's Dev Mode, ensuring they could efficiently access all design specifications.

QA

Since the company didn't have a dedicated QA team, the Front-End team, Product Managers, and I organized "Test Parties." These sessions involved other team members to help us test all the new features. The Engineering team was then responsible for fixing the bugs we identified.

Launch

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

🚀 The Partner portal MVP was published!

Continuous Research 

Given the lack of existing tools, I was responsible for defining our research stack. With a limited budget, I selected Smartlook to validate our project ideas and assumptions. Using its session recordings, funnels, and heatmaps, we were able to observe user behavior and gain a deeper understanding of their needs and pain points.

I established a set of goals for the usability test to validate key assumptions:

• Understand the interface: I wanted to see if users could easily identify the icons, main Calls to Action (CTAs), and filters.
  

Test core workflows: We measured user success on key tasks.

• Success criteria: Could the user successfully complete and submit the "Create" form?
• Success criteria: Could the user find a specific company using the filter form?
• Success criteria: Could a user successfully upload bank details to a lead?
• Validate quick filters: I aimed to validate how often users applied the "Quick Filters."
  

Discover new insights: The test's final goal was to uncover any new user needs or pain points.

Results and Metrics

A lead was created between 33 and 46 seconds.

The research showed that users had a strong understanding of the interface. My key observations were:

• The top-bar icons and the main CTAs ("Filter" & "Create a Lead") were immediately understood by users.
• The new icons for states were quickly learned. Users initially relied on the tooltips before remembering their meaning, indicating a smooth learning curve.
• Users instinctively identified the three-dot icon as a menu trigger.
• Users could easily open the table view by clicking the arrow icon.
  
• The "missing bank details" quick filter was used frequently, and users were able to add bank details effectively.
• Users were able to fill out the "Create Leads" form very quickly, with completion times ranging from 33 to 46 seconds.

New insights:

I observed some user friction around status changes. When a user added bank details to a pending lead, the system took a moment to refresh its status to "Onboarding." This created confusion, so users developed a workaround: they would apply any filter to trigger a refresh. To solve this, we added a loading state to provide immediate feedback.

I also noticed that the country code selector in the phone field was a bit time-consuming. Users preferred to scroll through the list to find their country (Finland, UK, and Spain) instead of typing the first letter. Based on this behavior, I redesigned the component to feature a list of the most frequent countries at the top, followed by the standard A-Z list.

Navigation (new features) and empty state.

Loading while the company is being onboarded.

María Rey. Based in Barcelona, working remotely.