# Need for Speed: UX

> UX improvements for Synaptic's company screener table: table redesign, row styling, column redesign, loading states, scrolling experience and preventing redundant API calls.

- Company: Synaptic
- Timeline: 2022
- Role: Product Designer: table redesign, row styling, column redesign, loading states and scrolling experience for the company screener
- Key outcome: Design spec for the screener table covering layout, row styling, column redesign, loading states, scrolling behaviour and redundant API calls.

---

## Context

> This section provides information about Synaptic. Feel free to skip ahead if you are already familiar with their work. To know more, please visit [synaptic.com](http://synaptic.com)

The following project was undertaken at Synaptic, an alternative data company that helps VCs and financial firms make smarter decisions. Synaptic’s primary offering is a subscription-based online research software, on which public and private companies can be compared across billions of metrics like website visits, app downloads etc.

## Project Brief

This project involved the evaluation of the performance of the ‘Screener’ module: a multi-metric analytics module on Synaptic where users could compare thousands of companies across hundreds of metrics in a single table.

The objective of this exercise was to determine the root cause behind user complaints of slowness and lagging on this module and come up with solutions to address the problem.

This project was a design-driven exercise, completed without a written PRD (Product Requirements Document) or the involvement of a Product Manager. I was working on this project independently, but under the supervision and guidance of my manager, Mr. Vikrant Raj. My role was to dive deep into the problem, understand user complaints, research about identifying root causes and work closely with engineers to deliver the final intervention.

![A screenshot of the existing screener table](/case-studies/09-ux-improvement/26-existing-screener.webp)

*A screenshot of the existing screener table*

## Recognizing the problem

The first step in recognizing the problem was to look at direct user feedback.

![User feedback from a recorded customer call](/case-studies/09-ux-improvement/27-feedback-1.webp "narrow")

![User feedback from a recorded customer call](/case-studies/09-ux-improvement/28-feedback-2.webp)

![User feedback from a recorded customer call](/case-studies/09-ux-improvement/29-feedback-3.webp)

![User feedback from a recorded customer call](/case-studies/09-ux-improvement/30-feedback-4.webp)

> The details of these conversations have been deliberately omitted.

Looking at previously recorded calls of clients with our customer support team, we could identify a few patterns in their feedback. Most users highlighted the following issues:

- Lag and responsiveness
- Slow loading time
- Performance not being perfect
- Not able to easily traverse the screener

![A screenshot of the existing screener table showing a blocked screen with a loading state](/case-studies/09-ux-improvement/31-blocked-loading.webp)

*A screenshot of the existing screener table showing a blocked screen with a loading state*

## Estimating the scale of the problem

Looking at the feedback, we were able to estimate the severity of the situation. Based on a certain number of leads not converting and several other renewals being at stake, we calculated the scale of the problem to be $500,000.

### Cost of not solving this problem = $500,000

## Research into relevant heuristics

Because most user issues were around performance and laggy perception of an interface, we needed to have a thorough understanding of perceptual science and cognitive psychology.

We learnt about how different time scales are perceived by users, in Jakob Nielsen’s Usability Engineering (1993). A few heuristics from the book are as follows:

- 0.1 second: Direct manipulation. User in control
- 1 second: Seamless flow of thought. Feels like 2-way interaction
- 10 seconds: Limit of user attention. Feedback necessary
- \>10 seconds: Breaks user flow.

We also studied various cognitive biases that influence how humans feel about any experience - and applied that to user experience.

![The peak-end rule](/case-studies/09-ux-improvement/32-peak-end-rule.webp "narrow")

The peak–end rule is a psychological heuristic in which people judge an experience largely based on how they felt at its peak (i.e., its most intense point) and at its end, rather than based on the total sum or average of every moment of the experience. The effect occurs regardless of whether the experience is pleasant or unpleasant. This is closely related to duration neglect & extension neglect.

## Deep Dive

Understanding Data Flow:

This involved roughly understanding how the flow of data actually worked on frontend and backend: how data was sent by the user, calculated/processed by the system, and sent back to the user for display. Most of this involved a lot of engineering technicality, however the main intention to have a rough idea in mind in order to come up with well-designed solutions that actually worked.

> Analytics API > Columns API > Ranking API

> More context has not been provided as the specific data flow is confidential.

## Key Issues Identified (Design & Engineering)

Key issues were identified along both design and engineering lines.

- Screener doesn’t feel like a spreadsheet, viewing experience is mixed with working experience
- Once data is loaded, viewing experience should be smooth and seamless (load once, view as many times as possible)
- Scroll not smooth - generally feels rougher around the edges of loaded data
- Loading State appears again on scrolling upwards

### Key Perception Issue: Loss of User Control

> “A watched kettle never boils” - Proverb

Based on our research, we discovered that the root cause of the perceived slowness in performance was not necessarily an engineering or data processing issue - although those also did contribute.

The major problem was that the user was being forced to wait on the page for multiple times in a single session, which contributed to this annoyance and frustration with the interface. Having a blocked-out screen during the loading state made the user feel powerless and as we concluded from our heuristics, these loading times interrupted the users’ seamless flow of thought and broke their concentration.

## Solutions

We came up with a series of design and engineering solutions that would improve user experience and avoid perceptual issues.

### Improved Loading Experience

Loading state for bottom 4 rows; Allow user control; No double loading

![Current loading state](/case-studies/09-ux-improvement/20-loading-current.webp)

*Current Situation*

![Proposed loading state](/case-studies/09-ux-improvement/21-loading-proposed.webp)

*Proposed Solution*

- On opening, screener to have a single loading state - Loading text to not appear and disappear repeatedly
- On scrolling, screener to have an analytics-like loading experience (row loading) for bottom 4 rows, rest of the screen to stay unblocked and interactive
- Loading state skeleton screen to match the structure of the actual table (columns & rows should align)

![Loading screen on first load](/case-studies/09-ux-improvement/03-loading-first-load.webp)

*Loading screen on first load*

![Loading screen on filter change](/case-studies/09-ux-improvement/04-loading-filter-change.webp)

*Loading screen on filter change*

![Loading screen on scroll](/case-studies/09-ux-improvement/05-loading-on-scroll.webp)

*Loading screen on scroll*

### Visual/Micro-interaction changes: No hover during scroll

A laggy hover state for rows exacerbates the perceived slowdown; removing the row hover state during scrolling totally bypasses this issue

![Current hover state](/case-studies/09-ux-improvement/33-hover-current.webp)

*Current Situation*

![Hover state while scrolling](/case-studies/09-ux-improvement/23-hover-state.webp)

- A laggy hover state for rows exacerbates the perceived screener slowdown
- Proposed solution: No hover state when user starts scrolling, hover state to be activated again only on cursor movement (Reference: Airtable)

### Visual changes: Row Styling

Banded rows add an extra jarring illusion thereby aggravating the perceived slowdown effect

![Stepping Feet Illusion](/case-studies/09-ux-improvement/34-stepping-feet-illusion.gif "narrow")

*Stepping Feet Illusion*

![Current row styling with banded rows](/case-studies/09-ux-improvement/35-banded-rows-current.webp)

*Current Situation*

![Proposed row styling without banded rows](/case-studies/09-ux-improvement/36-rows-proposed.webp)

*Proposed Solution*

#### Header Row

![Header row](/case-studies/09-ux-improvement/06-header-row.webp)

- Visual styling changes
- Headquarter Location renamed to ‘HQ Location’

#### Content Rows

![Content rows](/case-studies/09-ux-improvement/07-content-rows.webp)

*Row height = 33 px*

- Row height reduced to 33px to increase information density
- Alternate row banding removed
- Darker borders provided for rows

#### Padding

![Padding around the table](/case-studies/09-ux-improvement/08-padding.webp)

*32px right and bottom padding*

- Extra right and bottom padding around table to provide better visibility/readability to last column/row
- Provides a sense of ending to the table

#### Hover State

![Hover state](/case-studies/09-ux-improvement/09-hover-state.webp)

#### Selection State

![Selection state](/case-studies/09-ux-improvement/10-selection-state.webp)

## Table Redesign

*Overall changes*

![Table layout with horizontal scroll](/case-studies/09-ux-improvement/01-layout-horizontal-scroll.webp)

*Horizontal scroll*

![Table layout with vertical scroll](/case-studies/09-ux-improvement/02-layout-vertical-scroll.webp)

*Vertical scroll*

- Row styling redesign
- Header visual changes
- Column specific design changes
- Extra right and bottom padding around table

## Column Redesign

*Column specific changes*

### Company Column

![Company column](/case-studies/09-ux-improvement/11-company-column.webp "narrow")

- Compare button moved to actions column
- Peek to appear on Hover (as before)
- New tag to appear (as before)

### Actions Column

![Actions column](/case-studies/09-ux-improvement/12-actions-column.webp "narrow")

- Single actions support provided by ellipses (...) button next to checkboxes
- Dropdown menu on clicking this button to show Compare, Add to List, Add to New List actions
- More actions can be provided too in the future - Follow, Remove from List, Exclude etc.

### Description Column

![Description column](/case-studies/09-ux-improvement/13-description-column.webp "narrow")

- 11px font; Single line text (truncated with ...)
- CSS tooltips to be provided on hover to show complete text

### Headquarter Location Column

![Headquarter Location column](/case-studies/09-ux-improvement/14-hq-location-column.webp "narrow")

- Column to be renamed as ‘HQ Location’
- CSS flags + Full country name to be shown
- CSS Tooltips to be provided on hover to show truncated country names (where applicable)
- Min. width of column to be 120px

### Tooltips

![Tooltips](/case-studies/09-ux-improvement/15-tooltips.webp "narrow")

- CSS Tooltips to be used instead of custom Tuxedo tooltips
- Tooltips to match existing design as closely as possible (text, colours, padding, beak etc.)

![Existing tooltips](/case-studies/09-ux-improvement/17-tooltips-existing.webp "narrow")

*Existing tooltips*

![CSS tooltips](/case-studies/09-ux-improvement/18-tooltips-css-demo.webp "narrow")

*CSS tooltips*

### Numeric Columns

![Numeric columns](/case-studies/09-ux-improvement/16-numeric-columns.webp "narrow")

- Width of each sub-column in numeric columns to be 124 px (default; minimum)

### Miscellaneous: Company Column Logos

![Default logos](/case-studies/09-ux-improvement/19-default-logos.webp)

*Default logos (in case of missing logos)*

## Scrolling Experience

*Interaction improvement*

### Pinned Columns

![Pinned columns](/case-studies/09-ux-improvement/22-pinned-columns.webp)

- When columns are pinned (by user or by default), scrolling experience becomes jittery
- Vertical scrolling (eg. on Chrome) is laggier when cursor is on unpinned columns and smoother when cursor is on pinned columns
- Horizontal scrolling (eg. on Safari) causes the header row to visibly lag behind the rest of the table making the screener feel slow and laggy
- All this makes the screener feel a lot more unresponsive and slower than it actually is
- Solution unknown

### No Back/Forward on Horizontal Scroll

![Back/forward triggered on horizontal scroll](/case-studies/09-ux-improvement/24-back-forward.webp)

- On scrolling horizontally to the ends, back/forward action is triggered by browser
- This action is triggered unintentionally many times causing usability issues and therefore should be disabled on screener

## Preventing Redundant API Calls

*Avoid unnecessary delays - save time*

![Network panel showing repeated data calls](/case-studies/09-ux-improvement/25-redundant-api-calls.webp)

- Multiple Ranking API (data) calls takes up extra time - nearly doubling the time the screener takes to load
- Preventing this becomes critical to a faster screener experience

---

Other pages: [Home](https://rupakmishra.com/index.md) · [Work](https://rupakmishra.com/work.md) · [About](https://rupakmishra.com/about.md) · [Résumé](https://rupakmishra.com/resume.md)

Source: https://rupakmishra.com/work/ux-improvement