Case Study Banner

Project Goals

Understand the common user journeys to identify opportunities to engage users more effectively and meaningfully throughout their journey.
Set up a design system based on React Bootstrap framework for dark and light themes.
Set up user journeys, wireframes, conduct user testing and hence the UI for self-serving module.

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, Journey 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
Customer engagement
Inconsistency
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

The design process

Personalization

Defining the Problem

To evaluate the current state of the platform to set up a design system and revamp the software. This was necessary to design a self-serving module in the platform that is easy to use and has all the necessary features for the clients to create their workflows and options to customize visualization based on their use case.

Evaluating the current state of the platform

Platform was mostly used for portfolio and asset management, data modelling and auditing, business process management, and regulatory and compliance management.
Conducted contextual interviews with internal data team and external users to discover the primary users of our target audience.
  • 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 Journey mapping and evaluation of improvements

The  platform did not have a proper user journey, and features were added on top without consideration of how the overall experience would be impacted.
The main goal of user journey mapping was to gain a deep understanding of the experience of various users and identify pain points and areas for improvement.
  • External stakeholders: 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. Then the users were asked to complete a series of task during a contexual interview and their interactions were noted to understand how the platform is being used.
  • Internal stakeholders: Conducted Interviews with the data team that sets up & manages client dashboards and support personals. This was to understand where the client faced blockers and outline the most persistent issues. This also helped us understand what kind of modularity/features would be needed by the client to set-up & manage the self-serving feature.

Result

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

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.

Result

  • It became easier to see the big picture and understand how different parts of the product interact with each other.
  • We could identify the happy path for our primary users and subsequently outlined the essential features needed to implement a self-serve option.
  • 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.
  • Discovered that many of our users especially portfolio managers would prefer a light theme instead of the existing dark theme.

User journey mapping

Established the user journey for the platform for simplifying the process of identifying opportunities, and reducing churn, guiding feature enhancements and product development.
Drawing insights from contextual interviews with data champions—users adept at running basic SQL and proficient in utilizing the platform—we developed a user journey map for the self-serve feature. This map is designed to empower such users in setting up analytics and automating report generation.

Standardizing the platform

The next step was to create a design system that works both for light and dark theme.
‍
Style guide: These include the platform’s visual identity, such as its logo, color palette, and typography, and how they should be used in various context.
  • Created a colour palette for both light and dark theme along with a curated range of colours for visualisation; contrasting for clarity yet aesthetically easy on the eyes.
  • I chose Roboto as our primary font, since it is modern, yet approachable; friendly but not casual; has geometric lines with rounded curves making its suitable for a content heavy platform. Roboto allows letters to take up as much space as it needs and ultimately, making for an improved experience for the reader.
user personas

UI components

The aim was to design a reusable and user-friendly component library, comprising of essential UI elements such as icons, buttons, forms, tables, cards, and navigation menus. Also, easily customisable to cater to different design needs and requirements, and along with being responsive, adapting to various screen sizes and resolutions.

user personas
user personas

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, and shared it with the internal team for feedback.
Using the design system set up the user interface and visual guidelines of the platform
Revamped USER INTERFACE

Feeds

Improves efficiency by providing smart data mapping, data validation which standardise incoming data to making it easer to asses.

Revamped USER INTERFACE

Analytics

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

Revamped USER INTERFACE

Reports

Various analytics generated were combined to produce templated reports, which were useful for meeting regulatory and official reporting requirements. The design for the reports module was updated, and the UI was improved to be more visually appealing for data visualization. Guidelines were established for converting the reports into printable, standardized formats.

Revamped USER INTERFACE

Workflow

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

introduced new feature

Studio Profiles

Self-serve feature of the platform that automates data ingestion, running analytics and generating reports through an intuitive UI and basic SQL knowledge.

Assessment of the self-serving feature

Usability test: sucess metric:
1. User can find relevant sections
2.User scrolls down on visualization
Pain points
  • Users found the visualization window small
  • The code area is taking too much of the space
Possible solution
  • Add a layout feature that expands the visualization ot the full screen
  • Try different views for the tabs below, like "the inspect window option on browsers" or include them in the main window.
Introducing a light Theme
Introducing a light theme design brought many benefits to the platform. This resulted in increased user engagement and satisfaction, and a more positive overall user experience.
Theming

Readability

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 see and understand the information presented.

Reduced eye strain

A light theme design reduced eye strain and fatigue, making it more comfortable for users to use the platform for extended periods of time.

Accessibility

For users with visual impairments, a light theme with high contrast made the platform easier to navigate and use, improving accessibility.

Visual appeal

A light theme design provided a cleaner, more visually appealing look to the platform, especially reports module making it more attractive to users.

Platform Revamp Prototype

Check out a quick prototype overview of the platform and the modeling layer; self-serve feature.

Personalization

Leveraging the endowment effect and insights from user research I introduced theming and brand identity to the dashboard. This was aimed to make the platform more accessible and improve the user experience by allowing users to switch between light and dark mode as well as personalize the theme to fit their preferences.

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