Case Study Banner

Project Goals

Alterest is a B2B SAAS fintech platform. Mainly used for portfolio and asset management, data modelling and auditing, business process management, and regulatory and compliance management.
The primary goal was to lead the design processes for the software revamp of this platform and design a self-serving tool for automating the generation of reports.

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

Company :

Visit website

Tools :

Figma and Balsamiq.

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
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, resulting in 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 when using the platform.

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 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 utilized 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.

Findings

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:

This also helped us understand what kind of modularity and features would be needed by the customer to use a self-serving feature.

#1 Complex navigation

Users had trouble finding information quickly because of complicated navigation, causing frustration and inefficiency. Many users only used a part of the platform and hardly explored other features.

#2 Optimized user journey

We could identify the happy path for our primary users and subsequently outlined the essential features needed to introduce a self-serve option.

#3 Uncovered Inconsistencies within the platform

Identified inconsistencies in the platform and problems such as confusing navigation, or missing features such as search and filter, and found unnecessary features for certain users.

#3 Discovered need for light and dark themes

Discovered that many of our users especially portfolio managers would prefer a light theme instead of the existing dark theme.

Uncovering user roles

Problem Icon

Through the discovery process we also uncovered three primary roles within our various customers and uncovered how they used the platform:

Data providers: Only require to 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).

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
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.

Building a design system

Style guide: These include creating design tokens such as its logo, color palette, shadows, typography, and graph colors as well as how they should be used in various contexts.

Plan Image

Standardizing the platform

Building the component library  

The aim was to design a reusable and user-friendly component library, comprising of essential UI elements. Here is what I did:

  • System created based on Atomic design principles.
  • Created Figma components to work for responsive design.
  • Established a naming conventions.
Story Image
Story Image
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

I aimed to achieve the following outcomes by introducing light theme:

  • As the platform was content heavy, a light theme improved the readability of text and other content on the platform, making it easier for users to view and understand the information presented.
  • A light theme design reduced eye strain and fatigue, making it more comfortable for users to use the platform for extended periods of time.
  • For users with visual impairments, 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

Introduced a clear interface that provides visibility into uploaded files' statuses and improved the data mapping feature, allowing users to efficiently define mapping rules, preview mapped data, and make adjustments, streamlining the process of standardizing incoming data for better data integrity and user productivity.

Analytics

Enabled users to run analytics and generate visualizations for report generation. Allowed for loan level analysis, balance sheet management, credit monitoring, and management.

Concept Image
Concept Image

Reports

The design for the reports module was updated, to be more visually appealing for data visualization. Guidelines were established for converting the reports into printable, standardized formats.

Workflow

I introduced a feature that automated data inception, analytics, and report generation pipeline for repetitive company processes. It was based on user insights and became the most used feature, leading to creating of a self-serve feature on the platform that the companies could themselves use to create their own workflows.

Concept Image
Self-serve tool

Studio Profiles

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. This tool was designed to empower such users in setting up analytics and automating report generation.

Project Details

Findings

Pain points
  • Users found the visualization window small
  • They felt that the code area is taking too much of the space
What may work
Visit website
  • Add a layout feature that expands the visualization to the full screen
  • Try different views for the tabs at the bottom, like "the inspect window option on browsers" or include them in the main window.

Tools :

Figma and Balsamiq.

Future plans

  • Work on all the issues highlighted during the usability testing.
  • Try different layouts for better usage of the work-space
  • Conduct more rounds of usability testing with updated designs.

Key takeaways

  • 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 provide valuable insights into the needs, preferences, and pain points of your target audience, crucial for designing products that truly address their needs.