Case Study Banner
Overview

The primary goal was to lead the redesign of this platform to increase customer engagement and improve satisfaction.

Client is a B2B SaaS fintech platform, specializing in data delivery, in-depth analytics, and flexible reporting on loan portfolios and asset classes.

UX Design
Design System
User Experience Research
SaaS
Responsive Design

Project Details

Role :

I was the sole designer working cross functionally with the product owner, sales and customer service folks and developers.
User Research: User Interviews, Persona Mapping, Information architecture
Design: Sketches, Wireframing, Design system, Prototyping, Usability Testing
Timeline: 6 months, launched in 2022.

Tools :

Sketching, Figma and Balsamiq.

The detailed version of the UI is protected by an NDA but I'd love to chat about the details of my work over mail.

Team Member

Case Team Image

Sylvester Stallone

Designer
Case Team Image

Lucy Liu

Developer
Case Team Image

Joni Mitchell

Designer
Case Team Image

David Bowie

UI Lead

Problem

Problem Icon
Untapped potential: While the platform was built to support the end-to-end process of report generation with in-depth analytics, most of the users would use only a few features based on their roles.
Problem Tab Image
The platform lacked consistency, flexibility, and was difficult to use, due to increased cognitive load for users. Additionally, users were unable to properly customize reports which led to frustration among users, necessitating frequent calls to the customer service team. This combination of issues negatively impacts user experience and overall satisfaction with the platform.
Problem Tab Image

Solution

Problem Icon

Improve the overall efficiency in using the platform by digging deeper into common user journeys to identify opportunities to engage users more effectively and meaningfully.

Overview of the process:

  • User research to evaluate the current state of the platform.
  • Set up a design system based on React Bootstrap framework for dark and light themes.
  • Set up user journeys, wireframes, conduct user testing for designing the self-serving tool.
Solution Image
User research

Evaluating the current state of the platform

In order to gain valuable insights and drive user-centric improvements, we conducted a comprehensive analysis of how users are currently interacting with and experiencing the platform.

Research Image
Step 1

Survey customers

A survey was conducted engaging the client's portfolio manager and data champions to determine the company's reasons for using the platform and the most used features.

Research Image
Step 2

Contextual inquiries

Then the users were asked to complete a series of task during a contextual interview and their interactions were noted to understand how the platform is being used.

Research Image
Step 3

Indepth interviews

Conducted Interviews with the data team that helps manage client dashboards and customer support folks to understand where the client faced blockers and outline the most persistent issues.

Research insights

In crafting the designs, I laid the groundwork by establishing heuristics, providing a framework for the design solution. Leveraging insights from user research, analytics, and competitor analysis, I iterated on layouts to enhance the overall user experience, fostering a more intuitive and user-friendly platform.

Building on insights from user interviews, CTR reports and competitive research, I established the following design goals:

#1 Complex navigation 🧭
  • Complex navigation hindered access to information.
  • Users underutilized the platform, focusing on limited features.
#2 Confusing user journey 🪢
  • Users limited themselves to specific features and followed a set of fixed steps.
  • We could identify the happy path for our primary users.
#3 Uncovered opportunities
and inconsistencies 🚧
  • Identified usability issues due to missing features such as search and filter.
  • Discovered that many users would prefer a light theme

Understanding the target audience

Problem Icon

Through the discovery process I uncovered three primary roles within our customers and discovered how they used the platform:

📤 Data Providers
They only upload data and get it formatted in the required template.
📑 Data Champions
Can upload, run analytics, and generate reports or use workflow features to automate their process.
🗃️ Portfolio managers
Derive insights from the generated reports and use workflows to manage client portfolio(s).
Design system

Standardizing the platform

As part of the revamp to establish standardization, I created a design system that works both for light and dark theme.

Plan Image

Style guide: Created design tokens such as its logo, color palette, shadows, typography, and graph colors(data visualization) as well as how they should be used in various contexts through a style guide.

Designing reusable and user-friendly component library.

Building the design system
User Research

⚛️ System created based on Atomic design principles.

📐Components catering to cross-platform responsiveness.

🎨 Components for both light and dark theme.

📊 Guidelines for data visualization.

Establishing a component library

The new elements of the component library were designed in sync to the React- Bootstarp framework.

Plan Image

For the light theme

component lib light
Tables and Data Visualization

How might we simplify complex data visualization for quick insights and easy customization?

Incoporating best practices to enhance readability and user experience.

Concept Image

Visual Clarity

  • Implemented zebra stripes for larger datasets to improve row distinction.
  • Utilized different weights and colors for column data to highlight important information.

Alignment and Structure

  • Aligned textual data to the left.
  • Align size-related numeric data to the right.
  • Adopted varied line heights: 28px for condensed views and 36px for regular views.
Concept Image
Concept Image

Functionality

  • Incorporated fixed headers and columns to maintain context during scrolling.
  • Implemented in-place edits, sorting, and expandable details for enhanced interactivity.
  • Added features like filters, pagination, and customizable columns to improve data manipulation.
UI Revamp

Introducing personalization

Leveraging the endowment effect and insights from user research I introduced theming and brand identity to the dashboard. Allowing users to customize the dashboard with their brand colors and logo.

Case Page Image

Dark theme

Case Page Image

Light theme

Case Page Image

Career

Case Page Image

Blog

Case Page Image

Integration

Case Page Image

Contact Us

Introducing light theme

  • A light theme improved readability, making content easier to view and understand.
  • Reduced eye strain and fatigue, making it more comfortable for usage over extended periods of time.
  • A light theme with high contrast made the platform easier to navigate and use, improving accessibility.
Case Page Image

Home

Case Page Image

Plan & Pricing

Case Page Image

Career

Case Page Image

Blog

Case Page Image

Integration

Case Page Image

Contact Us

Plan Image

Revamping the current user interface of the platform

The design process started with creating the existing user interface and introducing subtle improvements in the dark theme.

Concept Image

Feeds: Standardizing incoming data

  • A clear interface to understand the status of uploaded files, with ability to download or remove uploaded files.
  • Introduced the data mapping feature, allowing users to efficiently define rules, streamlining the process of standardizing incoming data.

Simplified running analytics

Improved the UI for users to easily customize and run analytics to generate visualizations for creating reports.

Concept Image
Concept Image

Introducing customizable reports

Optimized for data visualization and allowing customization for converting the reports into printable, standardized formats.

Introduced a feature to automate repetitive processes.

It became the most used feature by portfolio managers, leading to the inception of a self-serve feature.

Concept Image

The detailed version of the UI is protected by an NDA but I'd love to chat about the details of my work over mail.

Usability Testing

Conducted a usability test with 5 participants, evaluating the following:

1. Users can find the relevant sections.
- All users
2. User can generate and customize reports.
- Data champions and portfolio managers
3. User can upload multiple files and automate data upload.
- Data providers.

Findings of the usability test

Design Image
Design Image
Design Image
⚠️ Issue: Users could navigate to relevant sections but faced challenges in finding relevant results

☑️ Solution: Analyzed the specific areas where users encountered difficulties through heat maps and mis-clicks to introduce a global and sectional search option.

⚠️ Issue: Users found it challenging to customize reports to their liking, even though they could interact with the various features easily.

☑️ Solution: Consider providing preset layouts and grids to easily balance or standardize report layouts.

👓 Reflection
Visit website
  • User testing is essential to understand user pain points and analysing the success of design solution.
  • Theming is important for a better user experience for users with varied demographics.
  • User interviews with internal stakeholders as well external stakeholders are important to get comrehensive insights into the needs, preferences, and pain points of the target audience, crucial for designing products that truly address their needs.

Tools :

Figma and Balsamiq.

Studio-Profiles

Self-serve tool to streamline data ingestion, running analytics and generating reports

A self-serve tool of the platform that automates data ingestion, running analytics and generating reports through an intuitive UI and basic SQL knowledge.
This tool was designed for data champions—users adept at running basic SQL and proficient in utilizing the platform. The goals was to empower such users in setting up analytics and automating report generation which was earlier done by the Alterest team.

User flow for the self serving feature

Drawing insights from contextual interviews with data champions—I developed a user journey map for the self-serve feature that would enable users to use various platform features to create workflows to generate reports.

Use flow Image

Checkout my other projects

Designing printable and sharable workflows for SaaS platform

Workflow management

SaaS redesign

Revamping the read view for Tallyfy so that customers easily understand what actions to take.

Read Case Study