top of page
LEAD UX DESIGNER

Finovo client portal

Designing Finovo, a client portal for managing user licences across multiple financial products. Built to simplify orders, clients, and reporting.

Finovo hero image

Project overview

My role

Lead designer

The team

Project owner

Project coordinator

Technical lead

Software developers

the Tools

Figma

the timeline

Phase one: 6 months

Phase two: 8 months

Phase three: 6 months

Project scope

Design and delivery of an order management system to support organisations in purchasing and managing digital licences for web-based services. The solution includes a centralised admin portal where users can submit, process, edit and track orders throughout the full lifecycle.

Project Phases

Phase one

Launch MVP that includes:

  • Vendor admin portal

  • Digital purchase form

Phase two

  • Client admin portal

  • Licence marketplace

Phase three

  • Organisation admin portal

01. Discover

The problem

  • The vendor functions as a holding company for multiple standalone, but similar web products, each with its own systems. Each of the holding companies' different product runs on its own platform

  • Clients often subscribe to multiple products, resulting in multiple invoices from the vendor to one client

  • No unified view to track purchases or manage licences across products

  • Fragmented system is hard to maintain and scale as the offering grows

The users

    • Definition: Vendor-side users who process orders and manage client accounts.

    • Goal: Manage catalogue, process orders, manage invoices, and maintain accurate client records.

    • Challenge: Manual reconciliation of orders across applications; duplicate user profiles and  invoices for the same client increase complexity.

    • Definition: Purchases, distributes and renew licenses for the entire organisation from the vendor.

    • Goal: Maintain full control over license allocation, renewals, and team management.

    • Challenge: No unified system to view or manage teams and licenses across products.

    • Definition: End users who purchase licenses for one or more products for themselves and their teams members.

    • Goal: Get quick access to licenses and manage licenses for their team.

    • Challenge: No centralised view. Managing licenses for multiple applications is confusing and time-consuming.

    • Definition: End users who uses the web application(s).

    • Goal: To use the product.

    • Challenge: None. This user do not have any administrative tasks, and receives their licences from the Organisation team leader.

The solution

Task
Basic User
Organisation Admin
Supplier Admin
Handle support tickets
No
No
Yes
Access reporting
No
Yes
Yes
Manage product catalog
No
No
Yes
Issue invoices
No
No
Yes
Modify orders
No
Yes
Yes
Approve orders
No
No
Yes
View orders
Yes
Yes
Yes
Manage organization profile
No
Yes
Yes
Reset passwords
No
Yes
Yes
Update user profiles
Yes
Yes
Yes
Create new users
No
Yes
No
Renew licenses
Yes
Yes
No
Assign licenses to team members
Yes
Yes
No
Reallocate licenses to team members
Yes
Yes
No
Purchase licenses
Yes
Yes
No

  • Create one centralised system for users to manage profiles, browse and purchase licenses for multiple products

  • Consolidated client orders into one invoice, no matter how many products

  • Build a scalable foundation for future product growth

The integration points

Task
Basic User
Organisation Admin
Supplier Admin
Handle support tickets
No
No
Yes
Access reporting
No
Yes
Yes
Manage product catalog
No
No
Yes
Issue invoices
No
No
Yes
Modify orders
No
Yes
Yes
Approve orders
No
No
Yes
View orders
Yes
Yes
Yes
Manage organization profile
No
Yes
Yes
Reset passwords
No
Yes
Yes
Update user profiles
Yes
Yes
Yes
Create new users
No
Yes
No
Renew licenses
Yes
Yes
No
Assign licenses to team members
Yes
Yes
No
Reallocate licenses to team members
Yes
Yes
No
Purchase licenses
Yes
Yes
No

For the system to fit into the existing ecosystem, it needs to:

  • Connect with external services for invoicing, user management and licence activation

  • Reduces manual work and prevents errors

  • Gives users immediate access once licences are assigned

The user tasks

Task
Basic User
Organisation Admin
Supplier Admin
Handle support tickets
No
No
Yes
Access reporting
No
Yes
Yes
Manage product catalog
No
No
Yes
Issue invoices
No
No
Yes
Modify orders
No
Yes
Yes
Approve orders
No
No
Yes
View orders
Yes
Yes
Yes
Manage organization profile
No
Yes
Yes
Reset passwords
No
Yes
Yes
Update user profiles
Yes
Yes
Yes
Create new users
No
Yes
No
Renew licenses
Yes
Yes
No
Assign licenses to team members
Yes
Yes
No
Reallocate licenses to team members
Yes
Yes
No
Purchase licenses
Yes
Yes
No

Defining the user tasks made it clear what the flows should include and which functionalities belong in each phase.

The goals & success metrics

Phase 1: Launch MVP that consists of a basic vendor dashboard that receives orders & process orders from an online order form.

Phase 2: Basic organisation admin dashboard and marketplace (that replaces the online order form) where users can purchase & manage licences to all platforms,   

Phase 3: Full organisation admin dashboard with role-based access control (RBAC) system.

Rapid prototyping

I used rapid prototyping to test ideas early, check my assumptions about the flow, and stay focused on what each user needed to do, and what the product needed to do at each step. That helped shape the layout of the key screens. Since the tech lead and team was remote, I mapped the flows in FigJam so we could stay aligned.

Low fidelity designs with interaction details

With those assumptions in place, I moved into low-fidelity screens built from Bootstrap components. Because the developers were already using Bootstrap, it gave us a shared language to work with. It made it easier to talk through what was feasible, and helped us stay aligned from the start. It also gave me something more realistic to test with users, more useful than a traditional wireframe. And because I knew exactly which Bootstrap components I was using, it gave me a head start when I began shaping the design system for the brand.

Design system

Building on the low-fidelity screens, I translated those early choices into a documented design system in Figma. I organised the foundations (colours, typography, and spacing) and built reusable components based on the Bootstrap elements we had already tested with users. Accessibility was a core consideration: all colour and text combinations meet WCAG 2.1 AA contrast requirements, and interactive elements such as buttons include clear hover and pressed states. Each piece was named, annotated, and shown in context so it was clear how and when to use it. This gave the team a single reference point and made handover to developers smoother. For me, it was also a way to show how the system could scale beyond this project and form part of the brand’s visual language.

High-fidelity mockups & live prototype

With the system in place, I moved into high-fidelity mock-ups that reflected the final look and feel. Visual style, branding, and interaction patterns were layered onto the validated low-fidelity screens. These were turned into interactive prototypes so stakeholders and users could experience the product in a realistic way. It was a chance to fine-tune details like visuals, transitions, and accessibility before development began. Based on another round of user testing, we made refinements to get the experience right before handoff.

Figma design & FigJam file with interaction details and annotations

  • High fidelity screen designs

  • Live prototype

  • User flows

Design system and component library

  • Design system and component library documenten in Figma

Reduced admin for the finance team

Manual tasks were significantly reduced. With automation in place and internal processes streamlined, the team could shift focus from repetitive backend work to tasks that required more strategic input.

Fewer support calls

Improvements to the ordering flow meant customers needed less help. When they did reach out, issues were quicker to be resolved. Clearer steps and the consolidated view gave the support team what they needed to work more efficiently.

Faster onboarding for new clients

Updates to the onboarding flow made it easier for clients to get started. Less guidance was needed, and the transition into the platform was smoother.

bottom of page