PRODUCT DESIGN

Revamp of a data analytics platform

SEMOSS 2.0: a low-code no-code environment that enables data exploration and insights reporting.

 

Keywords -

Enterprise web application

Data analytics platform

End-to-end design process

Design system

Complex workflow

The Challenge

The high-level mission is to transform SEMOSS, an end-to-end data analytics tool, into a no-code low-code self-service environment that empowers people with little technical knowledge to leverage its capabilities via intuitive user interfaces. 

Duration -

Aug 2020 - ongoing

The Solution

Tools -

Figma, MURAL, Phabricator, Excel

  • The sole designer on the team planned and executed the end-to-end design process from user research, ideation, wireframing, visual design, QA on design implementation.

  • Redefined terminologies, optimized information architecture, streamlined workflows, elevated system appearance, and designed new interfaces that are more friendly for non-technical users.

  • Established the SEMOSS design system to ensure a consistent user experience and facilitate cross-team collaboration.

  • Aligned team on the product strategy by planning and co-facilitating visionary workshops.

The Impact

SEMOSS 2.0 was released at the end of March. To April 20, 2021, it contributed to contracts worth $2.3M, serves 700+ users from 10+ clients.

 

It is well-received by the users who shared positive feedback such as:

 

"I love the new look, it's way cleaner, and the graphics look beautiful!"

 

"Thank you so much for the updates, this is making my life a lot easier!"

 

The team is continuously receiving feedback from users and will address them in future releases.

Design process

Team -

Three business leads/product owners

One designer (myself)

One business analyst

Seven developers

 

Final Design Overview

Revamped workspace with streamlined workflows and optimized information architecture
 

Break down big tasks into small steps to guide users through the process. Also, chunk walls of information into smaller pieces to make them digestable. 

Supports rich features with resizable panes and right-click menus.

Introduce resizable panes and right-click menus to support rich features that users need to complete the tasks, while avoid cluttering the interface.

Introduced SEMOSS design system that standardized design and elevated the look
 

Established the SEMOSS design system consisting of design guidelines and reusable components to ensure a consistent experience across the platform. More details in this article.

 

Project Deep Dive

 

Can you describe the three top use cases that interact with SEMOSS for?

Can you walk me through the processes of achieving <a use case goal>?

What are the things that work well and why?

What are the challenges and constraints you're facing?

* Sample questions in user interviews

Project immersion

I started with reading through existing documentation, talking to seasoned team members, and sitting in user training sessions to understand how SEMOSS works and what issues users are facing. From there I conducted 15 user interviews to dig deeper into the problem.

To capture the full landscape of how users interact with the system, we recruited 15 users representing different levels of interactions with SEMOSS. I catered questions for each individual as they work in different contexts, but the high-level questions remained the same as below:

  • What: use cases, workflows, processes, motivations, and goals 

  • How often: frequency of using the certain features

  • How long: the estimated time they spent on the features

  • Who: other people the user interact with 

  • Likes

  • Pain points

 

The users

Based on the interviews, I segmented users into four main archetypes: three types of insight creators and one group of insight viewers.

In the beginning, the team loosely defined "Data analyst" as the user persona. Through interviews, I learned that users can be divided into two main groups: insights creators and viewers. Among creators, we further segmented them into three levels based on their thought processes and behavior patterns. (See below). 

Align on the vision

 

After realizing there're huge misalignments on product visions within the SEMOSS team, I proposed visioning sessions to bring people together and think through the possible directions to go. While the big question remains unaddressed due to the business model of SEMOSS, a clear short-term goal is defined and established the foundation for later design decisions.

When I report user interview findings to the SEMOSS team and asked about prioritization, a debate happened among three business leads. That revealed a bigger problem: within the team, there are misalignments on what SEMOSS is and what it could be.

To close that gap and establish a collective vision for the team, I proposed a workshop and invited key decision-makers and core team members to think through the current usage and possible future directions of SEMOSS. We hosted two one-hour-long sessions of brainstorming and discussion, while the big problem won't be addressed once-for-all due to the business model of SEMOSS, a clear short-term goal is defined.

Visioning session hosted on MURAL

The user journey of the primary persona

Based on the short-term goal, we prioritized creator level 1 as the primary priority. I then synthesized the research insights into a persona-based user journey map to communicate the problems and opportunities.

The persona-based user journey map conveys information about the user persona, her journey interacting with the system, her thoughts, and feelings along the way, communicated her pain points and opportunities for improvements. The team found it inspiring and super helpful.

 
SEMOSS-user-journey-map-01.jpg

User persona

  • 28 years old

  • Four years in the BI domain

  • Familiar with Tableau and Excel

  • No programming background

As a business analyst, Linda wants to derive and visualize actionable insights from data so she can help her leads understand firm initiative performance and make decisions regarding funding allocation.

Linda - business analyst

Problem Framing

Synthesized findings from user interviews and group discussions, I concluded four high-level "how might we" questions to use as north stars that guide design decisions later on.

 

There are so many things on this single page. Where do I start and what am I supposed to do next?

What am I looking at? What are those colorful blocks?

How do I update a data column name? Can we pivot the data table? I feel like I'm always trying to figure out what's available and where things are

The interface looks sloppy, the icons seem different and things are off here and there... squished... not aligned...

How might we guide users to accomplish their tasks?

How might we better inform users about where they are, what's next?

How might we help users know what's available and find what they want more efficiently?

How might we bring a consistent and visually pleasant user interface?

Quotes from user interviews

High-level how might we questions

 

Design Iterations

For this case study, I'm presenting redesign of the SEMOSS home page, the workspace for visualization, and pipeline building. Below you'll find how the design evolved from the SEMOSS 1.0 to 2.0 (from most left to right), responding to user questions above.

Streamline workflows: Declutter the interface to guide users through the process

Initial Interface

Screen Shot 2021-02-19 at 2.33.54 AM.png

The cluttered interface overwhelmed users. Hard to tell where to start.

Inconsistent visual symbols and confusing labels.

Early Iteration

Frame 503.png

Created a collection of visual symbols with consistent visual vocabularies.

Users don't know how to add text or filter as they are considered as visualization types in the system.

Final Design

Frame 554.png

Streamlined the workflow of creating visualizations in the right panel

Grouped features in ways that match users' mental models such as add chart, add shape, add control. Added quick access to commonly used features on the toolbar.

Labeled chart names and grouped chart types by use cases to help users explore data with different visualizations

Home page redesign: browsing and accessing insights made easy

Initial Interface

Screen Shot 2021-03-01 at 9.42.43 PM.png

No labels. Can't tell what we're looking at

Users heavily relied on the search to find specific files. They had to recall file names every time and it demands more cognitive effort than recognizing what they need from the catalog.

Early Iteration

iteration2.png

Added insights preview yet according to feedback, it won't help distinguish insights as users could have multiple versions of the same insights.

Added more content on insight cards to supply enough information to help users decide which to double click

Final Design

running insight - default.png

Established a clear labeling and navigation system to help users explore and locate insights with ease. (i.e., Introduced starred and last modified features for quick access. )

Connected a stock image library and added image editing features to standardized image formats and ensure the home page looks clean and fun

Optimize information architecture: Boost feature find-ability by categorizing features into meaningful groups and subgroups

Initial IA: 100+ features presented as four long lists.

Categorized and prioritized features into groups that match users' mental models. Fine-tuned the terminologies to better resonate with non-technical users.

Design interface to accommodate rich features: Introduce resizable panels and right-click menus to support rich features without overcrowding the interface

Initial Interface

Initial interface

The current view is missing a few key elements that are critical for users to complete tasks, for instance, data preview

Have 50+ tools in a list overwhelms users and prevent them from using

 

The layout of the screen doesn't follow the same pattern as the rest of the workspace, causing user confusion

Early Iteration

Frame 504.png

Breakdown the list of 50+ tools into meaningful groups so users can easily explore and access what they need 

Color-coded different widgets types to distinct groups and support recognition

Still missing important elements users needed

Final Design

data-pipeline.png

Add a resizable panel for data preview and pipeline config. Users can customize workspace area based on use cases

 

Use right-click for the tool panel display to save real estate on the workspace

Elevate the look and ensure a consistent user experience by introducing SEMOSS Design System

More details here.

The results

SEMOSS 2.0 was released at the end of March. It contributed to client contracts that worth $2.3M. It was well-received by the users who shared positive feedback such as:

 

"I love the new look, it's way cleaner, and the graphics look beautiful!" 

 

"Thank you so much for the updates, this is making my life a lot easier!"