top of page

Enki.ai

Inputs Customization & Interactive Heat Map Design

Design inclusivity for identifying early emerging opportunities with intuitive data visualization.

My Role

Lead UX Designer

Timeline

Feb~May, 2023

Team

CEO, Engineers, Other Stakeholders

Deliverables

End-to-End Delivery

The State:

Shipped

Main Focus

Service Design;

User Research;

Design Strategy

The Context

Enki.ai is a forward-looking AI-powered market intelligence platform that helps businesses predict potential customers and opportunities. I cross-functionally collaborated with CEO, engineer, and different stakeholders to deliver end-to-end UX design.  

​

Since the company is in a transitional phase, after the generative research and synthesis analysis, I prioritized design decisions that align with the transition period and enhance competitive advantage while enabling future scalability.

Frame 2609775.png

In THIS design, I will talk about the 02, Input Customization; 03, Tree Structure; and 04, Interactive Heat Map, as they are the analysis part of the nested loop.

The Problem

After conducting generative research, I identified user behavior patterns in researching and analyzing user-defined business scopes. 03&05 are the pain points associated with this design solution.

 

Additionally, users expressed a desire to have the capability to customize inputs to align with their unique perspectives.

Frame 2609776.png

How might we help the businesses with a thorough, comparable analysis that is tailored to their specific business scope, vision, mission, and even inspirations?

Inclusive | Customizable | Intuitive

The Solution

Many opportunities arise across different fields, but it can be challenging to identify them without a forward-looking mindset. Recognizing this demand expressed by users. After discussing with the CEO, I decided to make a customizable, scalable, easy-to-use, and intuitive analysis mean.

Frame 2609779.png

Input Customization

Unleash the boundless potential of blending subjectivity and objectivity.

Forging a path towards innovative decision-making.

Frame 2609780.png

Dynamic Tree Structure

Building a clear mind map, navigating through complexity.

Since some prompt words are both children and parents, or children in different groups, a clear mind map is necessary.

Frame 2609754.png

Interactive Heat Map

Capture essence in one glance.

Connect to vital insights through Intuitive data visualization and scalability.

Impact

When users get valuable insights from input customization and interactive heat maps, it increase happiness, retention rate (+234%), NPS, and brand perception, leading to increased sales and profitability.

Frame 2609638.png

Happiness & Retention Rate

Frame 2609634.png

NPS & Brand Perception

Frame 2609630.png

Subscriptions  & Profitability

Frame 2609637.png

Market Share

Equinor & Techstars Energy Accelerator Demo Day

How I got there?

Decision Evaluation

After the generative research, I employed the hierarchy of effects model. I modified it to best fit our design purpose, and implemented it to evaluate the decision-making at every design step. I also took SMART goal as a sub-reference. Always considering the company’s blueprint and current constraints helps me prioritize the features, improvements, and future scalability.

​

We value that extraction plays a vital role in learning and analysis. With the deepening of understanding, modification is inevitable. Respecting the iterative nature of research also embodies obtaining knowledge, extracting the essence, and modifying the input to get closer to the core.

​

This design is mainly about extraction & modification to form a deep understanding and analysis by enhancing iterations.

Frame 2609621.png

Hierarchy of Effects Model 

Frame 2609573.png

Big Challenges

Understand the Purpose:

I had internal meetings with the company CEO and developer, and I got to know that Enki.ai’s primary users are dedicated Excel users, and the company would like to provide flexibility to let users use both ends to tailor their specific business needs.

The Challenges

01, Be in Enki and Excel users' shoes and know how they use both ends for deep analysis.

02, Need to have a deep understanding of the ways Excel organizes data.

03, Clear data visualization to let users see the connections and grab information in one glance.

User Research

Know Our Users & Their Analysis Habit

I conducted several rounds of user research with reflections for each design solution and validation. The purpose is to learn how users use Excel and why it is efficient for business analysis, how they combine Enki.ai with Excel to make in-depth analysis, and what other parameters impact the analysis results.

The Method:

01, None-Guide Observations
02, Qualitative Questions
03, Secondary Research
04, Synthesis Analysis
05, A/B Testing
06, Cross-Functional Workshop
07, User Flow 

After Synthesis Analysis

Key Insights

Frame 2609646.png
Frame 2609646.png
Frame 2609646.png

Solution 01: Input Customization

Let the user own the analysis

Empower users with flexibility & intuition.

Data Organization & Visualization Research

Secondary Research

In order to guarantee smooth export and connection to Excel regardless of any changes in the user-defined Enki input, I conducted an in-depth exploration of how Excel employs tables to arrange data and select the three common ways our primary users use, which are presented below with the same data structure.

Hierarchy 

Grouping

1 to 1 relation

And based on these three data organization methods, I proposed three design options.

Design Option 1 (Hierarchy) 

Design Option 2 (Grouping)

Design Option 3: Selected

(1 to 1 relation)

Input Customization Design

After communicating with the engineer, I selected design option 3: 1 to 1 relation because it is easier to convert into any data organization type for Excel files. 

Design Highlights

Input Customization.png
Design Highlights 1.png
Design Highlights 2.png

Solution 02: Tree Structure

Intuitive Design for Complex Relations

Mutual hierarchy reveals the crucial connections.

Decision-Making

Reflection 1

Grouping is a way to build relations among inputs. However, is that enough?

 

​

 

After A/B tested two data visualizations: groups & ecosystem diagrams. I decided to introduce tree structures for an intuitive visual impact because it shows a clear hierarchy and reflects the grouping relations of input customization.

A/B Testing

Frame 2609541.png

Reflection 2

One input could be both parent and children, or the children in different groups, how to display the complexity in an intuitive way?

​

Leveraging visual hierarchies is essential. So I created an interactive tree structure. This tool empowers users to visualize reverse hierarchies, enabling them to gain a comprehensive understanding and facilitate profound analysis.

Tree Structure Design

After discussing with the engineer, we decided to realize the MVP first and scale the tree structure to develop in the future.

The MVP

Future Scalability

Solution 03: Interactive Heat Map

Create a Channel, not a Destination.

Solve the problem through system interaction, not a simple function

Understand the Core Value of Enki.ai’s Business Analytics

Before designing the heat map, I wanted to make sure I had the correct understanding of the design and had a meeting with the CEO to clarify the purpose and confusion of the heat map design.

Frame 2609696.png

What Enki.ai Wants to Provide

Helping clients narrow down the scope step by step with AI analysis

Frame 2609651.png
Frame 2609651.png
Frame 2609651.png

The Challenge

Combining all of these steps into a single heat map while ensuring information clarity is very challenging.

Interactive Heat Map Design

After talking with the engineer, I decided to keep the table as the foundation of interactive heat maps because it can be easily converted into .csv files.

Frame 2609652.png
Frame 2609653.png

Explore the Relation of Tree Structure & Heat Map 

In order to endow the data visualization with a deeper meaning for thorough analysis and comparison, I explored the connections between tree structures and tables. I designed a technique to transform it across various levels for future scalability.

Furthermore, I investigated methods to control visual parameters in order to effectively communicate clear information through the heat map.

It is important to avoid excessive visual parameters with disparate correlations within the same scope, as they can lead to confusion.

Design the Relation & Scalability

The MVP

Future Scalability

Currently we are building and improving design system with latest Figma features. The finalization of the UI will be updated later. 

Learnings & Reflections

  • Research should never stop. Always trying to get user feedback is crucial, especially for complicated problems.

  • Understanding the big picture as well as daily operations can help prioritize the tasks to make solid steps.

  • Knowing the stakeholders and utilizing suitable research and communication methods can greatly facilitate the process.

This Work is Very Special to me

As a UX designer, I deep-dive into the multi-system and their interactions, creating interactive connections by utilizing different data visualization techniques to transform, break down, and integrate multiple systems.

I am fascinated by creatively applying the right amount of interactive design can
simplify complicated systems and bring more accessibility to users.

©2024 by Jing Wang Designs

bottom of page