UIUX | Fintech | B2B | SaaS | Web App

Sperta

Sperta Rules Engine Platform

Overview

Automating Financial Decisions for a Smarter Future

At-A-Glance

Sperta is a no-code rules engine that helps data analysts in banks and fintechs automate, test, and manage complex workflows in fraud, credit, and compliance

As founding designer, I led end-to-end product design, built the design team, and created the design system from scratch—resulting in a 30% faster workflow creation and 80% UI consistency improvement.

My contribution

1.

Customer Insights & Ideation: Uncovering & translating valuable insights into actionable features that align with customer behaviors and motivations.

2.

Experience Strategy & Vision: Created frameworks, prototypes, and communicated a clear vision to align stakeholders, facilitating decision-making processes.

3.

Planning & Scope Definition: Balanced customer goals with business objectives, prioritized features for successful launches and future iterations with PM

4.

Design Execution & Validation: Developed design handovers, and build and maintain design system.

My Role

Product Design
Design System

Team

Product Manager x1
‍Eng x5

Timeline

San Francisco
Dec 2021 – Sep 2023

Tool

Figma, Miro,
Adobe Suite, Hotjar

Problem

Manual Decision-Making Slowed Credit Operations

Before Sperta, data analysts in banks and fintechs had to manually define, test, and apply logic across fragmented tools, which is manual, slow, and prone to error, and made compliance difficult to scale.

‍Data analysts and compliance officers rely on spreadsheets, in-house systems, and legacy platforms to input, extract, and apply business rules, leading to inefficiencies and limited visibility across stages.
We see a clear opportunity to create a more streamlined, efficient, and transparent product experience to solve these financial challenges.

Why It Fails Today

Inconsistent Results

Caused by manual data input and fragmented tools.

Error-Prone Processes

Increased risk of compliance and financial mistakes.

Slow Workflows

Analysts repeat time-heavy manual tasks.

High Operational Costs

Inefficiencies increase labor and resource use.

HMW & strategy

How might we build a Flexible yet intuitive Rules Engine Platform?

For this product goal, I designed a modular workflow system with clear steps from creation to deployment—empowering analysts to build logic, test safely, and iterate without engineering bottlenecks.

Simplify rule creation

An intuitive interface that reduces the learning curve and facilitates easy workflow configuration.

Enhance testing accuracy

Robust simulations that mirror real-world scenarios and optimizing system performance for large data sets.

Streamline data retrieval

An intuitive filtering system that allows compliance officers to quickly access audit-relevant information.

Ensure efficient deployment

Automating the rule integration process to minimize downtime and avoid disruptions to live operations.

Solution

Simplifying Complexity Through Visual Logic

No-Code Workflow Creation for Faster Integration

Drag-and-Drop Editor to Visualize Clear Logic Flows

Structured Rule Editor to Reduce If-Else Logic Errors

Versioning & Testing for Safe, Confident Deployment

high-level solution

In Solving the Problem

We have 2 ways to improve the efficiency and accuracy

Sperta Rules Engine Platform: A No-code Solution for Automating Decision-Making with Precision and Efficiency

Imagine having a system that automatically processes decisions based on "if-this-then-that" logic.

Speed

Automates decisions in real time, enabling to process thousands of decisions efficiently 

Accuracy

Ensures decisions are consistent and based on data. Human error reduced.

Flexibility

Business rules can be easily updated without coding as company regulations or requirements change.

Outcome

Enhanced Efficiency = Saved Cost

$3M

worth of 11 deals unlocked in Sales Pipeline, reduced time-to-market by 6 months

26%

faster to complete tasks and estimated annual cost savings of $421,200 per client

28%

CSAT increased: "I've never used a rules engine product as easy as Sperta" -- KPMG

Research

Pain Points: Where Analysts Struggle Most

Configuring rules is overwhelming, testing is unreliable, and audits are painfully slow.

46% say setting up logic is too complex

38% struggle with testing and deployment

35% can’t find the right data for audits

This helped us prioritize visual workflows, structured rule editing, and built-in testing tools.

Competitive Analysis

We analyzed platforms like InRule, Alloy, and Unit21 to understand the pros and limitations of existing rule engines.

Technical interfaces not usable by non-engineers

Poor visibility into logic and testing

Rigid structures that can’t adapt to fast-changing compliance needs

Sperta was designed to combine flexibility, clarity, and usability—all in one system.

MVP Design Exploration

MVP Ideation-Rule Creation Flow

System Diagram

Wireframe - Create Workflow

MVP Design evaluation

Improving UX Clarity and Efficiency with early customers

After launching the MVP with our first customer (KPMG), I ran weekly user tests and used Hotjar to guide iterative design improvements.

Pros

1. 100% task success rate
2. 50% time-per-task reduced
3. Drag&drop interface visualizes workflow effectively

Cons

1. Unclear system stucture for navigation
2. Poor discoverbility for new features
3. Lack of Task Flow Guidance while creaing workflow

01. Add Step-by-Step Guidance to Reduce Errors

Before
After

Problem

Users got confused when building logic due to lack of visual confirmation

Fix

Introduced drop-zone indication and progressive guidance in the side panel

Result

Reduced errors by 40% and improved task success rate to 100%‍

02. Restructure Navigation for Faster Access

Before
After

Problem

Users couldn’t find features or trace workflows easily

Fix

Added multi-line breadcrumbs and left nav aligned to “Create → Test → Review → Deploy” user flow

Result

Reduced average clicks-to-target by 40%
Task completion time dropped from 2m+ to under 90 seconds for first-time users

03. Tested UI vs. Code Editor for User Familiarity & Efficiency

Problem

UI Rule Builder looked easier but felt restrictive

Fix

A/B tested visual builder vs. structured code input

Result

Code editor improved task success and was liked by 80% of users familiar with SQL/Python.

Design system

Design system

To support Sperta’s growing complexity, I built a modular design system that unified UI surfaces, accelerated iteration, and reduced inconsistencies by 80%—laying a scalable foundation for future growth.

Click on that button to learn more about the design system case study

See More

Branding and site design

Branding and site design

I aim to create a comprehensive brand and site experience that is clean, smart, and professional. Learn more

Click on that button to learn more about the branding/site case study

See More

Branding and site design

Branding and site design

I aim to create a comprehensive brand and site experience that is clean, smart, and professional. Learn more

Takeaway

Lessons I've learn

Domain Understanding Matters

Deep knowledge of financial workflows helped bridge the gap between user needs and technical depth.

Simplicity ≠ Oversimplification

Good UX in fintech means surfacing complexity progressively—not hiding it—so power users stay in control.

Design for Accuracy, Not Just Aesthetics

Reducing manual errors through clearer flows and structured logic directly impacted business outcomes.

Next Step

Smarter Workflows with AI

Automate rule suggestions and catch potential errors earlier

More Immersive Research

Shadow real users to better model real-world decision flows

Onboarding Clarity

Build in step-by-step guidance instead of relying on help docs

The problem & challenge

Current navigation is too simple to carry future functionalities

Amidst the rapid changes at Sperta, the existing lightweight structure proved inadequate for accommodating complex functionalities. Existing users expressed dissatisfaction, while potential users hesitated to adopt the platform due to the absence of new features.

Our high level UX goals: Enhancing user-friendliness and ensuring scalability

1.

Enhance user-friendliness and task efficiency, while building a mental model for users to flatten the learning curve.

2.

Ensure scalability and maintainability by implementing a flexible structure to accommodate future pivots and changes in the product roadmap.

Challenges beyond the design in this early startup: Limited resources and immature design culture

1.

Limited resources and user base led to heavy reliance on the designer (me) for product iterations and testing, leveraging my design expertise, including users' empathy, user research, design systems and information architecture, etc

2.

Inconsistent understanding of design principles and practices in cross-department collaboration necessitates me in developing a design culture

Kickoff

Initial exploration: study of current product situation and user pain points for redesign primary focus

At the outset of the project, we didn’t have a clear mission or specific goals for the workflow experience our users had. I partnered with my product manager to explore what our data analysts have been experiencing through recordings in Hotjar and user interviews

Confidential data were omitted here intentionally

Early insights indicated prioritizing navigation/IA as the primary focus

Most early user feedback emphasized that our navigation system and Information architecture are the main issue. Recognizing the significant impact of navigation and IA compared to page-level issues, we prioritize addressing the navigation/IA problem as the initial focus of our solution.

Poor discoverability for both new features and the desired content

“Finding where my rule was like searching for a needle in a haystack.”

Lack visual indicator leading to confusion about the user's current location

“One time I was in the step version page. I felt lost in a maze, unsure of my current location within the app. I could only rely on the back button to navigate myself out”

Users struggle and feel lost due to inadequate instructions and guidance in the interface.

“I thought my mission is done after creating the step…”

Lengthy user task due to inefficient navigation

“Setting up the workflow was a breeze, but getting it to function seamlessly took more time than I initially anticipated.”

Reframing the problem

How might we enhance the navigation system to efficiently empower data analysts in building a workflow while accommodating future improvements?

The solution

A streamlined navigation pattern for facilitated user tasks and smooth learning curve
Connection between workflows and environments

A simple button allows users to quickly navigate between workflows. I further combine both workspace and environment together which allow user better managing their account and content

Introducing a left navigation that simplifies workflow editor with future scalability ensured

I introduced a new way to navigate within Sperta workflow editor, simplifying our feature offerings into a concise set of products, each with its own application-level navigation. This approach achieved three key objectives:

1.

Repositioned Sperta as a decision-making rules engine suite rather than a feature-heavy workflow builder. Functionalities are grouped, following the golden path "Workflow, Test, Review, Deploy."

2.

Reduced user decision-making complexity upon entering a workflow, enabling faster user engagement and reducing choice paralysis.

3.

Created dedicated navigation space for products to grow and expand, preventing clutter on the front page.

Simple fix but powering: Multiline breadcrumb enhances efficiency and clarity

I introduced a new component, "multiline breadcrumb", to our top bar, displaying the hierarchy and navigational context. This variation emphasizes the selected breadcrumb item as a page title, making the user's location within Sperta clearer and improving overall navigation efficiency.

Unified interaction pattern flatten the learning curve

I introduced an extensive set of consistent visual and interaction patterns that simplify the learning process. By unifying layouts and design elements, like placing navigation in the top-left, content in the center, and actions to the right, users can quickly master our product, effortlessly navigate, and focus on their tasks.

The outcome

Streamlined Navigation = Enhanced Efficiency = Saved Cost

We successfully landed our new navigational model across our products. We received a lot of great feedback from users that it felt intuitive and easy to use.

Unblocked 11 Deals Worth $500K in Sales Pipeline

The new navigation system facilitated the seamless inclusion of new features, unblocking significant business deals. Time to market reduced by 6 months

Product iteration speed increased by 40%.

Alignment on design processes and concepts within the company resulted in a faster product iteration rate.

Development Time Reduced by 30%

By breaking down the redesign into three phases and providing clear highlights of changes and updated documentation for each new component in the design system

2-3 Hours Saved on Time-on-Task per User and $270K/year Cost Reduction for Clients

Estimated annual cost savings of $421,200 per client with an average team size of 9 data analysts and developers, factoring in their hourly rates and weekly working hours.

Decreased reliance on customer service for foundational functional concerns

This demonstrates that we have addressed the issue of "poor discoverability," providing users with a more intuitive interface and timely assistance

"I've never used a rules engine product as easy as Sperta" --- KPMG

Customer Satisfaction (CSAT) increased: The new dashboard has received positive feedback from our potential customers.

$500K

worth of 11 deals unlocked in Sales Pipeline, reduced time-to-market by 6 months

26%

faster to complete tasks and estimated annual cost savings of $421,200 per client

28%

CSAT increased: "I've never used a rules engine product as easy as Sperta" -- KPMG

From ground zero!
How it all went down

My contribution

Effortless yet powerful

1.

Customer Insights & Ideation: Uncovering & translating valuable insights into actionable features that align with customer behaviors and motivations.

2.

Experience Strategy & Vision: Created frameworks, prototypes, and communicated a clear vision to align stakeholders, facilitating decision-making processes.

3.

Planning & Scope Definition: Balanced customer goals with business objectives, prioritized features for successful launches and future iterations with PM

4.

Design Execution & Validation: Developed design handovers, and build and maintain design system.

How we got there

How did I enhance the user experience to be effortless yet powerful?

Three critical questions drive my initial design strategy：

1.

What level of understanding or familiarity do users have with our user flow?

2.

What was the prior credit/fraud decision process before Sperta?

3.

What constitutes an ideal workflow building experience?

We launched the whole experience in multiple stages. Each stage came with its own challenges and problems to solve. The following are some highlights:

After auditing and prioritizing the current user complaints, I uncovered the critical focus for the redesign: navigation.

This mission went beyond adding standalone features, as it required auditing and analyzing user feedback and its causes, and establishing priorities before I could jump into design.
Through user interviews and usability tests, I analyzed user complaints and their underlying causes. The research results revealed navigation-level issues as the foremost concern, given their significant impact on the overall user experience compared to page-level issues.

By analyzing the existing IA, market trends, and future roadmap, I discovered three navigation patterns that engage with our users' expectations and scale with our business landscape, to drive my future design iterations

To understand the current product and users' expectations, I conducted the existing product's IA analysis and competitive research to identify navigation patterns among "builder/editor" interfaces, SaaS Fintech, and data tools that resonated with our users' daily work tools and industry.

To understand the future business landscape, I, collaborated with our PM, took into account business goals and objectives, such as revenue growth or market share, and ensured that the IA supported these aims.
The result was an upgraded golden path, "Workflow, Test, Review, Deploy", which allows future functionalities to integrate seamlessly within this path, ensuring the scalability and adaptability of our product.

Design iterations: a battle/negotiation between ux benefits and implementation effort, which challenge both my understanding in components usage and its implementation effort

Our primary business goal is to design a scalable structure to allow future pivots with minimum resource required. That's why after exploring different navigation options, I chose to retain the exsiting dashboard left navigation and focus on designing a new navigation system within the workflow editor.

Direction 01

Derive the existing dashboard left navigation

Direction 02

Dashboard: keep the initial left nav Workflow: new left navi

Direction 03

Dashboard: new top bar Workflow: new left navi

Crafting component details: I elevated our visual language for a clearer and intuitive experience

By refreshing and re-arranging the visual language's hierarchy based on our design system components, I ensured a cohesive, user-friendly interface that enhanced clarity and intuitiveness. For example, combining the workspace and environment switchers allowed us to save horizontal space while ensuring users could easily verify their workflow selection.

Before

Exploration

After

Be inclusive: empathize with users by breaking exsiting stereotypes

Previously, Sperta prioritized shipping features to meet core needs and enable basic functionality, but lacked a comprehensive understanding of diverse user perspectives.
To challenge teams' stereotypes and misconceptions about user behavior, I used the below diagrams to bridge the gap between our assumptions and actual user behavior, paving our way for scalable design solutions that adapt to various user contexts from the outset.

Iterations

Translate concepts into features that address customer behaviours and motivations
Target one direction

In the design iteration phase, I refined the navigation combinations identified earlier, resulting in three main options. After gathering feedback from the design workshop and usability testing, we decided to move forward with the second.

Direction 01

Derive the existing dashboard left navigation

Direction 02

Dashboard: keep the initial left nav Workflow: new left navi

Direction 03

Dashboard: new top bar Workflow: new left navi

Evolving the UI

Introducing Multiline Breadcrumb

We choose the multiline breadcrumb which places emphasis on the selected breadcrumb item as a page title, helping a user to more clearly identify their current location.

Before

After

Combine Workspace&Environment switcher into one

Combining the two switchers allowed us to save horizontal space while ensuring users can easily verify their workflow selection.

Before

Exploration

After

Combine Workspace&Environment switcher into one

Combining the two switchers allowed us to save horizontal space while ensuring users can easily verify their workflow selection.

Before

Exploration

After

Key takeaways

Lessons I've learn

The art of being consistent yet flexible

Unlike designing a standalone 0-to-1 product where you have full control over the end-to-end experience, designing primitives requires empathizing with each client’s critical user journey. That is to say, we are not meant to be the spotlight, but the facilitator to help users accomplish their primary task. As a result, it’s inevitable that clients may want slightly different content or interactive behavior based on their unique user needs. My goal is to find that balance between consistency and customization.

The challenges of designing at scale

Designing at scale means multiples aspects with many constraints, such as data model complexity, evolving business priorities, user growth, and diverse use cases.
Each has different requirements and future adaptions. Moreover, it took time and effort to understand different stakeholders’ requirements and reach alignment. It was a humbling experience to learn that sometimes things take long for good reasons.

How we got there

Effortless yet powerful

Three critical questions drive my initial design strategy：

1.

What level of understanding or familiarity do users have with our user flow?

2.

What was the prior credit/fraud decision process before Sperta?

3.

What constitutes an ideal workflow building experience?

To start, I conducted a comprehensive analysis of various factors that impact the workflow building experience and visually mapped them in this diagram.

Uncovering the Disconnect: Addressing Assumptions vs. User Behavior

Previously, Sperta focused primarily on shipping features to fulfill core needs and enable basic functionality, rather than prioritizing a deep understanding of diverse user perspectives. Now, it is time to shift the focus from mere enablement to empowering users.
To challenge teams' stereotypes and misconceptions about user behavior, I created diagrams to bridge the gap between our assumptions and actual user behavior. The goal was to develop scalable design solutions that adapt to various user contexts from the outset.

Prioritizing the Job-to-be-Done: Rethinking Navigation

By addressing navigation-level issues, we aimed to enhance the overall user experience as it has a greater influence on UX compared to page-level issues. This approach allowed us to effectively resolve the majority of user concerns and create a seamless and intuitive user journey.

Evaluating the existing IA/Navigation

Deeper Insights into Current Challenges

Our objective was to uncover navigation combinations that seamlessly align with user habits while effectively accommodating the functionality of our product.

Gaining Insights into Functionality Accommodation

To effectively address the functionality of our product, I created an IA overview with example pages for each layer, which allowed me to identify commonalities & the pre-existing pattern that would inform the design of the navigation system.

Uncovering Familiar Navigation Patterns through Competitive Analysis

I aimed to identify the navigation systems that our target users were accustomed to using. This analysis revealed resonances with "builder/editor" interfaces, the SaaS Fintech industry, and SaaS data tools, which aligned with our main interface (the workflow editor), and our target users' daily work tools.

Builder/Editor

Aligned with our main interface, the workflow editor.

SaaS Fintech

Resonated with our target industry

SaaS Data

Matched our users' daily work tools.

Evaluating the Future Improvements

Unlocking a Scalable IA/Navigation Roadmap

To ensure the IA/navigation could accommodate future improvements, I collaborated with the PM to develop a clear roadmap. This effort involved reorganizing the IA and gaining insights into future improvements envisioned by key stakeholders. The goal was to enhance our understanding of the product's future direction and relationships between features.

The outcome exceeded expectations. We upgraded our main user journey to "Workflow, Test, Review, Deploy". This achievement is significant as it allows for future functionalities to be organized and addressed within this critical user journey, ensuring the scalability of our IA.

NEXT
HamsaPay

RoboForce – Copilot for AI Robots

Sperta – Financial Decision-Making Platform

HamsaPay – Invoice Financing Platform

Sperta – Scalable Design System

RoboForce – Brand & Website

Sperta – Brand & Website

RoboForce – Titan: Robotics Concept Design

Fliptrip – Trip Itinerary Planner