Reinventing the approach to web interface and consolidating digital UI/UX for a fintech SaaS suite catering to small business owners.

Client

Ageras

Year

2025

My role

UX/UI Design, User Flows, Wireframing & Prototyping, Usability Testing, Brand identity, Engineer Collaboration

Tools

Project Background

Ageras is a fintech SaaS provider delivering a suite of digital tools designed to empower small business owners with financial management, invoicing, and accounting solutions. With offerings available in multiple regions, 

The Challenge

The task was to consolidate a diverse set of websites for different products, to reflect the transition into one brand and one product. I created one cohesive interface, while ensuring an intuitive, streamlined experience for small business customers of varying tech backgrounds. This meant rethinking navigation, content strategy, and UI patterns to provide clarity and guidance.

Table of Contents

01. Research – Defining Goals

Overview

DESIGN AUDIT

DESIGN GOALS & DELIVERABLES

Understanding The Visual Landscape

To set the right foundation, I began by analyzing the existing website and design assets, gathering feedback from key stakeholders and users, and mapping out both strengths and friction points. This phase helped clarify project goals and uncovered opportunities for greater consistency and brand impact.

Design Audit

The initial design audit examined every aspect of Ageras’s digital presence, including web UI, navigation flows, and content organization. By identifying usability pain points, gaps in branding, and inconsistencies in component usage, I could pinpoint areas for immediate improvement and inform the vision for a new design system.

Design Goals & Deliverables

I. Refreshed Visual Identity

Establish a refreshed visual identity that’s approachable, reliable, and distinctly Ageras.

II. Custom Iconography and Illustration

Develop a custom iconography and illustration style, as well as image style, to clarify complex content and boost brand recognition.

III. New UI and UX for the Website

Reimagine the website’s UI and UX for seamless task completion and easy product discovery.

IV.  Scalable Design System for Web

Build a scalable design system, making it effortless to expand and customize the suite as Ageras grows into new markets and product areas.

02. Define – Shaping Information & Experience

Overview

SITEMAPS AND FLOWS

VISUAL EXPLORATION

Foundation For The New Website

With research in place, I translated insights into actionable plans, mapping product offerings to regional markets, defining user flows, and visualizing new interface directions. This created alignment with stakeholders and provided a concrete blueprint for the system’s next evolution.

Sitemaps and Flows

In this part of the process, I created an overview of what regions Ageras offers their products and what the local product and service offering is. This helped streamline and define what product pages would be needed for each locale.

Visual Exploration

Visual exploration and collecting inspiration references focused on color, typography, spacing, and modular layouts to reinforce trust and accessibility.

03. System – Scalable Modular Library

Overview

DOCUMENTATION

GLOBAL RULES & PRINCIPLES

KEY BUILDING BLOCKS

NAVIGATION

MODALS & DROPDOWNS

SECTION COMPONENTS

ICONOGRAPHY

IMAGE LIBRARY

Building The Design System

A robust design system was imperative not only for visual consistency, but for speed and flexibility as Ageras continues to add features and regional variants. This library empowers both designers and developers, ensuring that new components remain coherent and on-brand through every release.

Documentation

Detailed documentation was created for every component and interaction pattern, providing clear usage guidelines and best practices. This ensures maintainability and knowledge transfer as the team grows.

Global Rules & Principles

I established universal design principles (covering color, spacing, type hierarchy, and interaction feedback) that guide all current and future UI work. These rules ensure a cohesive look and predictable experience, no matter which part of the suite a user interacts with.

Key Building Blocks

The design system includes a suite of foundational components like buttons, alerts, cards, tables, forms, navigation elements, built to adapt across multiple use cases and devices. Early mockups were tested for clarity and engagement, with rapid iterations based on usability feedback and business priorities.

Navigation

Special care went into designing navigation that adapts to both simple and advanced workflows. Ageras users can easily move between product overviews, detailed pages, and support resources, helping them stay oriented and confident as they manage their financial operations.

Modals & Dropdowns

Flexible modal and dropdown systems ensure users can access relevant actions and information without losing context. These patterns were prototyped and tested for accessibility and responsiveness.

Section Components

The entire website would be created with clearly defined building blocks catering for different types of content. Each content section, such as feature highlights, testimonials, pricing, or product comparisons, was built as a modular component. This allows for rapid page assembly and easy localization for different regions.

Iconography

A custom icon set was developed to communicate complex ideas quickly, unify visual language, and add a distinct, recognizable feel to the brand. Icons reflect the sleek, modern and bold language of the brand and are carefully crafted following a grid system.

Image Library

The new image library features consistent, on-brand artwork and illustrations, supporting everything from educational content to onboarding, across all Ageras channels. These would later become the images used on product pages to convey product features, benefits and all the ways the product simplifies things for the user.

04. Prototype

Overview

MAIN LANDING PAGES

HIGH FIDELITY MOCKUPS

Putting the Pieces Together

Bringing together the research, system, and visual work, interactive prototypes illustrated how real users would navigate new flows and accomplish their goals on the site.

Main Landing Pages

Main landing pages were designed for clarity, conversion, and storytelling. Each template adapts key messaging, value propositions, and calls to action to the needs of specific user segments and regions, as well as keeping conversion and best marketing practices for landing pages as a top priority.

High Fidelity Mockups

High-fidelity mockups demonstrated the final look and feel, validating typography, color, spacing, and component composition. These screens helped align stakeholders and gave the engineering team the precise details needed for development.

05. Implementation & Outcomes

Overview

IMPLEMENTATION & HANDOVER

LEARNINGS

Smooth Implementation

The new system was implemented in close collaboration with engineers, ensuring pixel-perfect accuracy, accessibility, and mobile optimization at every step.

Implementation & Handover

Transitioning from prototype to production, I provided detailed specs, asset exports, and live documentation, enabling the engineering team to build confidently and empowering future content owners to extend the system with ease.

Since I followed a strict system of rules for documenting figma designs, which I developed earlier, implementation went fairly smoothly and fast. The developers had all the needed specs and variables for all components, as well as descriptions for any transitions and functionality on the website. In this stage, I did daily check-ins with the developers and used Linear for a status overview and feedback loop, as I was the one responsible for quality control and approval of the final interface.

Learnings

This project reinforced how a robust, modular design system is essential for supporting product evolution and consistent user experiences across markets. Continuous collaboration with all teams created a shared ownership of quality and set a foundation for smooth scaling as Ageras’s offerings continue to grow.

Let's build together?

Projects    About    Work with me

©  Barbora Gadlinova  2025