Work

Blog

Resume

About

Work

Blog

Resume

About

Work

Blog

Resume

About

BotNot

BotNot is an e-commerce analytics platform helping Shopify merchants identify bot traffic and make data-driven decisions through visual insights. As the founding UX/UI designer, I redesigned the dashboard and the whole design system. The redesign helped us double our early client base within 90 days of launch. Additionally, my user research insights inspired the founders to create the company's new slogan.

BotNot is an e-commerce analytics platform helping Shopify merchants identify bot traffic and make data-driven decisions through visual insights. As the founding UX/UI designer, I redesigned the dashboard and the whole design system. The redesign helped us double our early client base within 90 days of launch. Additionally, my user research insights inspired the founders to create the company's new slogan.

Roles

The first and only UX/UI Designer; Collaborate with 2 founders and 2 developer leads

Responsibilities

Heuristic evaluation; UX design; UI design; User interviews; User testing

Time

May 2022- Aug 2022
~3 months

3D Render
3D Render

—

TLDR

TLDR

TLDR

—

—

—

The Hidden Data Struggles of a Shopify Merchant

Small and medium-sized Shopify merchants are master jugglers. From designing products to managing marketing, customer support, and operations, they handle it all while keeping their business running. After talking to many small business owners, we found the two main critical data challenges they face.

1. Merchants Lost in Their Numbers

As solo entrepreneurs handling everything themselves, they lack the resources to do data analysis, yet Shopify's built-in tools aren't enough to help them make sense of their business data.

2. Bot Traffic Corrupting Business Insights

Bot traffic is polluting their data—on Black Friday 2021, over one-third of ‘shoppers’ weren’t real customers, but bots and fake accounts. With such unreliable data, making informed business decisions becomes nearly impossible.

Bot traffic is polluting their data—on Black Friday 2021, over one-third of ‘shoppers’ weren’t real customers, but bots and fake accounts. With such unreliable data, making informed business decisions becomes nearly impossible.

Bot traffic is polluting their data—on Black Friday 2021, over one-third of ‘shoppers’ weren’t real customers, but bots and fake accounts. With such unreliable data, making informed business decisions becomes nearly impossible.

Solution

As the sole designer, I redesigned and created 10 dashboard interfaces for e-shop owners and workers to easily access insights about orders, products, and customers with risk indicators, to make informed business decisions. The dashboard also includes recommendations and data visualizations to simplify data analysis for stand-alone shop owners.

As the sole designer, I redesigned and created 10 dashboard interfaces for e-shop owners and workers to easily access insights about orders, products, and customers with risk indicators, to make informed business decisions. The dashboard also includes recommendations and data visualizations to simplify data analysis for stand-alone shop owners.

As the sole designer, I redesigned and created 10 dashboard interfaces for e-shop owners and workers to easily access insights about orders, products, and customers with risk indicators, to make informed business decisions. The dashboard also includes recommendations and data visualizations to simplify data analysis for stand-alone shop owners.

Impact

1. With improved usability and better met user needs, we successfully met our goal in growth within 90 days after the launch, even with only a subset of the new features implemented.

2. My user research insight inspired the founders to create the company's new slogan: Trust is a two-way street.

1. With improved usability and better met user needs, we successfully met our goal in growth within 90 days after the launch, even with only a subset of the new features implemented.

2. My user research insight inspired the founders to create the company's new slogan: Trust is a two-way street.

1. With improved usability and better met user needs, we successfully met our goal in growth within 90 days after the launch, even with only a subset of the new features implemented.

2. My user research insight inspired the founders to create the company's new slogan: Trust is a two-way street.

100%↑

Early User Base Within 90 Days

—

How I Got There

How I Got There

How I Got There

—

—

—

—

Background

01

Background

01

Background

01

Company Stage

Before I joined, BotNot didn’t launch their product. Their initial interfaces had lots of usability and visual issues. As the first and sole designer, my goal was to redesign all the screens and create a great user experience.

Before I joined, BotNot didn’t launch their product. Their initial interfaces had lots of usability and visual issues. As the first and sole designer, my goal was to redesign all the screens and create a great user experience.

Before I joined, BotNot didn’t launch their product. Their initial interfaces had lots of usability and visual issues. As the first and sole designer, my goal was to redesign all the screens and create a great user experience.

Project Goal

Create insightful and easy-to-use data dashboards to ease the pain of data analysis and filter out bot traffic for e-shop owners and employees to make informed business decisions.

Success Metrics

Growth in user base and daily active users. As we didn't launch the product officially before, user growth is our top business metric.

Problem Discovery

02

Problem Discovery

02

Problem Discovery

02

Uncover Issues in Existing Interface

I choose heuristic evaluation to identify problems in their initial interface. After conducting heuristic evaluation based on Neilson’s 10 usability heuristics and accessibility, I found lots of problems in content, information architecture, user flow, and UI.

1. Usability Problems

1) Inconsistent color usage and component design
2) Redundant and inconsistent information
3) Not accessible for colorblind people

2. Incomplete User Flows

Lack of customer overview, recommendation overview,  and individual pages. Users cannot finish the actions in a full cycle.

3. Too Many Numbers Without Actionable Insights

The interfaces looked like an excel data dump, which is challenging for less data-savvy users to digest.

Collect User Needs Through Interviews

I chose user interviews as a way to gather user input, in order to avoid making decisions based on assumptions. Although the founders didn't approve user research initially, I actively advocated for user research and conducted 3 interviews with e-shop team leaders recruited from my own network, which was later proved to be very insightful to the company.

Key topics: Workflows, Data analysis, Order processing, Data trust

I chose user interviews as a way to gather user input, in order to avoid making decisions based on assumptions. Although the founders didn't approve user research initially, I actively advocated for user research and conducted 3 interviews with e-shop team leaders recruited from my own network, which was later proved to be very insightful to the company.

Key topics: Workflows, Data analysis, Order processing, Data trust

I chose user interviews as a way to gather user input, in order to avoid making decisions based on assumptions. Although the founders didn't approve user research initially, I actively advocated for user research and conducted 3 interviews with e-shop team leaders recruited from my own network, which was later proved to be very insightful to the company.

Key topics: Workflows, Data analysis, Order processing, Data trust

1. Users want to know meanings behind data

If they see the changes behind the data, they would like to know what it means and what they should do next.

If they see the changes behind the data, they would like to know what it means and what they should do next.

If they see the changes behind the data, they would like to know what it means and what they should do next.

“If I see a periodical change in sales data, I want to what caused it. Is that because of my actions or because of market change?”

“If I see a periodical change in sales data, I want to what caused it. Is that because of my actions or because of market change?”

“If I see a periodical change in sales data, I want to what caused it. Is that because of my actions or because of market change?”

Interviewee

E-shop Owner

2. Building user trust is essential to a business

Similar to e-commerce businesses, as a small startup providing unique data insights, building users’ trust with our data is critical.

Similar to e-commerce businesses, as a small startup providing unique data insights, building users’ trust with our data is critical.

Similar to e-commerce businesses, as a small startup providing unique data insights, building users’ trust with our data is critical.

“I am wondering if I can trust the data I see.”

“I am wondering if I can trust the data I see.”

“I am wondering if I can trust the data I see.”


Interviewee

E-shop Owner

3. There is an unmet need for individual customer analysis

Most dashboards only offer insights for customer overview. Providing analysis for individual customers can help shops target certain segments easier.

Most dashboards only offer insights for customer overview. Providing analysis for individual customers can help shops target certain segments easier.

Most dashboards only offer insights for customer overview. Providing analysis for individual customers can help shops target certain segments easier.

“We built a database and analyzed the persona of each loyal customer.”

“We built a database and analyzed the persona of each loyal customer.”

“We built a database and analyzed the persona of each loyal customer.”


Interviewee

E-shop Owner

Design Iteration

03

Design Iteration

03

Design Iteration

03

Optimize Site Structure for Quick Insights and Action

I structured the dashboard to help merchants quickly understand and act on their data:

  1. Sidebar Hierarchy

  • Placed actionable recommendations at the top for immediate visibility

  1. Consistent Two-Level Information Hierarchy

This structure lets merchants choose between quick glances and detailed dives

  • Overview section at the top provides quick insights

  • Detailed individual pages below for deeper analysis

Below are the information architecture and different layout options that I have explored.

Iterate Based on Design Principles

I designed 10 main screens and dozens of components in total. Below are three example components or sections that I designed iteratively based on design principles synthesized from user research.

I designed 10 main screens and dozens of components in total. Below are three example components or sections that I designed iteratively based on design principles synthesized from user research.

I designed 10 main screens and dozens of components in total. Below are three example components or sections that I designed iteratively based on design principles synthesized from user research.

  1. Scalability

As a data dashboard for e-commerce businesses, scalability was a key design principle. Our users' businesses grow rapidly, which means their data visualizations need to handle increasing amounts of information while staying clear and useful. For example, when designing the social network graph that shows connections between user accounts, I faced this scalability challenge directly.

As a data dashboard for e-commerce businesses, scalability was a key design principle. Our users' businesses grow rapidly, which means their data visualizations need to handle increasing amounts of information while staying clear and useful. For example, when designing the social network graph that shows connections between user accounts, I faced this scalability challenge directly.

As a data dashboard for e-commerce businesses, scalability was a key design principle. Our users' businesses grow rapidly, which means their data visualizations need to handle increasing amounts of information while staying clear and useful. For example, when designing the social network graph that shows connections between user accounts, I faced this scalability challenge directly.

Before

My initial design used simple bubbles to show connections of an account, but this wouldn't work well as businesses grew.

After

To improve scalability, I added segment controls and filters that let users highlight only the most relevant connections, making the graph useful even with large amounts of data.

  1. Consistency

Visual consistency builds trust. Otherwise, people might think, "How can I trust data if you can't even keep a simple filter consistent?"

Before

Initially, the components were designed independently, leading to inconsistency across the dashboard.

After

Applying principles from atomic design, I created a unified system for all components like filters to ensure a cohesive experience.

  1. Simplicity

Simple design was essential - our users already deal with complex data, so the interface shouldn't add to their mental load.

When I was designing a new export flow to other SAAS software, I tried different layouts: 1) pop-ups without preview; 2) pop-ups with preview information; 3) a full page overlay; 4) sidebar overlay. Considering information density and layout consistency, I finally decided on a sidebar overlay design.

Iterate Based on User Feedback

I conducted 5 tests with current and prospective clients. I chose user testing because it can help us validate our design concepts, find new problems, and evaluate users' satisfaction at a minimal cost before launching the product. Three main insights are:

  1. Help users process information faster

Looking at lots of data all at once is tiring for users. I need to add color coding or any other means whenever possible to help them digest data.

  1. Use colors meaningfully but not distracting

I showed three UI options to users: the first one had colorful cards; the second one didn't have colorful cards; the third one was mono-color with gradients. All the users selected the second one. They wanted some colors to convey meanings but didn't want colors to be distracting.

  1. Make tabs more prominent to encourage usage

Users primarily used the sidebar instead of the four main tabs on the table, complicating the user flow. One user stated they didn't notice the tabs during testing. To simplify operations, making segment controls more prominent may increase usage of this table.

Final Design

04

Final Design

04

Final Design

04

  1. Actionable Recommendations

To solve pain point: users don't know meanings behind data, users can enhance their business by acting on highlighted recommendations, now prominently featured as the default tab on the homepage, encouraging engagement through easily accessible action buttons.

  1. Impact Visualization

Users mentioned they won’t trust the data and recommendations automatically. They will first try it out and see the impact. If it works, then they will trust it. Therefore, I designed a BotNot impact visualization to show them visually how much money BotNot save them.

  1. Seamless Integration with External Tools

To make recommended actions implementable, I designed this export flow to Klaviyo so that users can manage their marketing email lists on other platforms.

  1. Data Visualizations

Too many numbers and excessive information is challenging for less data-savvy users to process. Therefore, I added various types of data visualizations on every page and marked raw data with visual aids, such as colors and tags, to make data more digestable.

Design System

05

Design System

05

Design System

05

Takeaways

06

Takeaways

06

Takeaways

06

Learnings

1. During early stages, product strategy can go back and forth pretty frequently, thus following atomic design principle and starting from the building smallest components can save you lots of time.

2. For companies who don’t naturally value user research, when I  want to advocate for user research, I need to help them see the value, such as conducting trial interviews in my own network.

3. Working in a startup can be risky, but can also be rewarding and fun. I enjoy making more impact and seeing the impact in a short amount of time.

Room for Improvement

1. Currently, some information on individual pages didn’t get completely aggregated on overview pages. If I have time, I might explore more ways to aggregate information.

2. Continue improving design system by designing different states and nailing down more  details with developers.

More Cases

More Cases

EDDC File Repo

Wanderflow

Cat VR Training

City Settlers

All illustrations credit to Canva and Undraw.

Let's work together!💪 zcjess24@gmail.com

LinkedIn

Resume

Let's work together!💪 zcjess24@gmail.com

LinkedIn

Resume