Timeline

Jan 2019 - Jul 2021

Domain

SaaS web app (enterprise)

Role

Individual contributor

Project

Redesign, design system

Background

Timeline

Jan 2019 - Jul 2021

Domain

SaaS web app (enterprise)

Role

Individual contributor

Project

Redesign, design system

Background

fb-main
fb-main

Focus

When I joined the company, it was ready to invest in the redesign because the existing app was implemented with priority for the speed of development and required improvement of usability, aesthetics, and functional changes.
I decided to start by discovering and putting together pain points and general feedback, with the goal of creating an approach where the current functionality is compatible and could coexist with planned features. The aesthetical side of things also made a big difference because it's supposed to serve as a distinctive competitive advantage compared to similar tools in such an enterprise domain.

Within the general task of a complete redesign of the app, I defined the following areas to focus on:

  • Interface scalability
    Reusable components, design system, guidelines.
  • Aesthetics, usability, and accessibility
    Modern UI with accessible color palettes for data visualization.
  • Self-serve onboarding and adoption
    Self-serve signup with educational onboarding tours and templates.
  • Engagement and functionality
    New functionality around app customization and team-related features.

Scope

I decided to split such an obscure and tremendous task as «redesign» into several stages.
Each high-level stage has also been broken down into specific steps and actions. 

Observation

Observation

Observation

Observation

  • Watching user sessions,

  • Working in the support,

  • Structuring complaints and requests,

  • Analyzing competitors.

Hypothesis validation

Hypothesis validation

Hypothesis validation

Hypothesis validation

  • Quick surveys (forms),

  • Quantitative research,

  • Customer development sessions,

  • User segmentation.

Analysis & decomposition

Analysis & decomposition

Analysis & decomposition

Analysis & decomposition

  • Describing user flows,

  • Converging UI and business metrics,

  • Designing information architecture,

  • Determining missing backend,

  • Prioritization and estimation,

  • Defining the scope of the first versions.

Implementation

Implementation

Implementation

Implementation

  • Designing high-level UI concepts,

  • Layout and basic elements design,

  • Functional components and interactions,

  • Corner cases,

  • Assembling design system,

  • Writing specifications.

Testing & improvement

Testing & improvement

Testing & improvement

Testing & improvement

  • Watching user sessions,

  • Collecting feedback,

  • Mechanics improvements and visual restyling.

Framing design assets

Framing design assets

Framing design assets

Framing design assets

  • Describing functional components,

  • Defining the animation rules,

  • Matching design system tokens with the frontend components.

User research

For qualitative research, I used customer development interviews, UI feedback calls, watched user session records and read all requests addressed to the support.

For quantitative research, I adhered to the UEQ surveys along with event tracking and quick unmoderated surveys.
Using Segment.io visual tagger helped me to quickly deliver product events and track them on Fullstory so I was able to cover new features with the events and filter out the relevant session records.

image1

How it all starts

One of the goals was to open the platform for a larger audience so prospects can sign up self-serve. Signing up is possible via invite links, emails, or SSO. Hence, the process was a bit different based on a flow.

Along with the login or signup form, a user sees the carousel on the right. For logging in, I decided to populate the slider with platform updates exposing major features but for the case of signing up, the gallery shows testimonials of existing clients as an additional trigger.

Connecting data

After creating an account, the UI suggests either trying the app using the demo account or start uploading custom data.

The idea behind promoting the demo account is to increase the conversion rate (since the NLP model needs time to process custom data and the user cannot try the app immediately), and provide prospects with prominent examples of the app possibilities (for instance, report and dashboard templates in different combinations).

Aggregating feedback

The Feedback page is the least abstract level of data visualization in the app. The UI is represented by the list of reviews and conversations with supplementary meta-data and a set of different filters to operate on millions of responses with ease.

The page allows operating on different types of feedback (reviews, chat conversations, etc.) along with customization of filters and saving their combinations as "segments" for quick access and share.

Building reports

In short, the «Analytics» page is a chart (report) builder where clients can group various metrics by specific attributes, apply filters and, as a result, see data visualized in different formats.

One of the main usability issues to solve within the redesign was that the previous UI had a lot of logical limitations such as the impossibility to combine some metrics and different chart types.
Therefore, my objective wasn't only to improve the UI and make charts correct and accessible but also to eliminate all interface restrictions.

Besides the report builder, the Analytics page contains predefined reports, such as Impact of themes illustrating positive and negative drivers of sentiment mentioned in customer reviews.

Assembling dashboards

A significant advantage of the platform is the possibility to group any custom reports in a shareable collection of widgets so customers can promptly get an overview of the customer feedback trends and specific review verbatims.

One of the major things to take into account was creating an approach to visualization that won't overload users with content and noise and let them focus on individual reports easily or read charts as a sequence of stories that complement each other. 

ctmlllfwd
ctmlllfwd

In the old app, the choice of widget sizes was very limited and chart content was just proportionally stretched when changing size. The goal was to provide users with a higher level of customization and make content responsive to size.
An early concept ↓

Automating workflows

The main idea behind the Workflow tool was to provide seamless integration of client daily flows and the Chattermill platform so customers can keep abreast of new relevant comments, KPI changes, and anomalies in data.

A workflow consists of:

  • Trigger â€” defines a specific event that starts the workflow.

  • Conditions — a combination of filters and operators applied to a given data sample.

  • Actions — what should happen as the result of the workflow.

We've also invested much effort into implementing the workflow testing feature. It's pretty crucial for users to realize how a message or ticket will look like because usually it's being shared with their teammates and confirming the format and content is extremely important.
An early concept ↓

Settings

The goal of the Settings screen was to provide customers with access to the UI from any part of the app and instantly get the user back to the previous screen without reloading the page and losing data.

Technically, the idea of the Setting UI is a full-screen modal window that auto-saves changes instantly and doesn't require a dedicated terminal button for each section. After making a change, the system shows an indicator of the successful operation replacing the exit button.

Conclusion

After two and a half years of working for the company, I've successfully finished a complete redesign of the platform, framed and handed in the comprehensive design system on Figma and Storybook.
I was actively involved in the technical implementation process during the entire period by doing QA, task decomposition, priority, and risk analysis.

Visual design metrics have also improved significantly (according to UEQ, the min. value is "-3") compared to the app before the redesign:

Attractiveness

Attractiveness-n_new

Perspicuity

Perspicuity-n_new

Efficiency

Efficiency-n_new

Dependability

Dependability-n_new

Stimulation

Stimulation-n_new

Novelty

Stimulation-n_new-1

Results for the business:

  • The new app has drastically decreased the number of complaints and bug reports to the support;

  • The conversion rate has been increased when demoing the tool to enterprise customers (most of them highlighted the top-quality interface);

  • NPS has grown from 53 to 75.

Results for customers:

Customers benefitted from having a flexible system that they can customize based on their goals:

  • An analyst has pre-saved sets of filters and reports templates in quick access;

  • A manager can reach a necessary dashboard in a single click, set it up as a home page, share externally, and embed it in a third-party tool;

  • Other users can be notified of changes and anomalies on Slack, by email, or another channel.

Customers no longer need to tailor their data and filters due to improved filter usability and the smart search that understands natural language requests. They simply connect data sources and get results.

Users require significantly less manual work to tag reviews due to seamless automation and improved bulk tagging UX. It allows users to save much time and focus on business research.

Live training sessions have been replaced by automatic onboarding tours, templates with examples, and help documentation. It allowed getting information on an issue quickly without waiting for a live support session.

gregory@murynmukha.com

gregory@murynmukha.com