User Exp. Web

Sperta

Sperta Rules Engine Platform

Overview

Automating Financial Decisions for a Smarter Future

At-A-Glance

A global end-to-end rules engine platform that helps data analysts in banks and fintechs automate and manage decisions for safer and more efficient onboarding, fraud monitoring, risk management and beyond.

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 – User Research, Prototyping, and Interaction Design
Design System

Team

Product Manager x1
Product Designer x3
Tech Lead x1
Front-end Eng x2
Back-end Eng x2
QA x2

Timeline

San Francisco
Dec 2021 – Sep 2023

Tool

Figma, Miro, Adobe Suite, Hotjar

Problem

Can You Imagine...

Today, financial decision-making processes that requires precision and efficiency, such as credit applications and fraud monitoring, are still largely manual, time-consuming, and prone to error.

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.

Today’s Decision-Making Process

The current process is plagued by:

Inconsistent results due to manual data handling.

High risk of errors, creating compliance and financial risks.

Tedious, time-consuming tasks that require large amounts of manual work.

Higher operational costs due to inefficient workflows.

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.

Research

How do data analysts make financial decisions and what are the challenges?

Configuring complex workflows is overwhelming for users.

Testing and deploying rules is unreliable and time-consuming.

Finding data for audits takes too long.

Competitive Analysis

Research conducted from other rules engine products to gather the hint from their workflow and analyze pros and cons for the product features.

HMW & strategy

How might we improve the rules engine platform to help data analysts build workflows more intuitively and efficiently?

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.

MVP Design Exploration

MVP Ideation-Rule Creation Flow

System Diagram

Wireframe - Create Workflow

MVP Design evaluation

Evaluate and Improve Concept feasibility with early customers

Following the MVP launch that brought in our first customer, KPMG, I continuously iterated and tested the design.
I implemented weekly user feedback sessions and utilized a UX monitoring tool, Hotjar, to guide 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

Test & Improvement 01: Clear step-by-step indication for workflow creation

1. Success toast is triggered after creating a stage node, but users are left without clear guidance to connect it to the workflow.
2. Multiple checkpoints for creating and connecting stages create confusion, making the process hard to learn.

1. The success toast now only triggers after the stage node is fulled functional, eliminating user confusion.
2. The updated UI provides clear step-by-step indication, allowing users to follow and confirm in one step, reducing errors and confusion.

Test & Improvement 02: Navigation redesign for efficiency and clarity

1. Inefficient Linear Navigation: rely only on back button to move navigate, and hard for users to understand the overall structure
2. Poor discoverability for both frequently visited pages and new features

1. Introduce multiline breadcrumb to improve navigation efficiency.
2. Introduce left navigation bar, with main section grouped following the “Create rules, Test, Review, Deploy” user path

Test & Improvement 03: Building rules with a UI interface VS expression language

To streamline logic implementation and save users time, I designed two concept sketches.
1. UI-based: aimed at non-code experts, assuming a visual approach would replace expression language.
2. Expression language-based: initially believed to be more functionaly powerful, yet hard to use.
Surprisingly, user feedback favored Concept B (expression language) as it's easier to write and read, given our users' familiarity with Excel functions, SQL, and Python.

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

Design system

Design system

Consistent layout pattern flatten the learning curve

I implemented a cohesive set of visual and interaction patterns, unifying layouts by placing navigation in the top-left, content in the center, and actions to the right.
This design allows users to easily learn how to navigate, and stay focused on their tasks.

Component Library

I also built and maintained our component library from scratch, which standardizes UI elements, such as buttons, forms, dropdowns, and navigation menus, making it easier for the team to create uniform interfaces across different screens and devices with less deveploment time ensured.

Designing and Prototyping Responsively

For web applications like Sperta, responsive design is essential. While building responsive components is straightforward, mocking them up can be challenging.
To streamline this, I utilized the Figma plugin "Responsive". With minimal setup, I quickly generated responsive UIs, enabling clear presentations to stakeholders and precise handovers.

Branding and site design

Branding and site design

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

Takeaway

Lessons I've learn

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.

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.