arrow_back
DEC 2020 - JAN 2022

Building a Design Culture Foundation at GrowingIO

In October 2020, I returned to China and joined GrowingIO as the Product Design Manager. My mission was to build the design team from the ground up and rejuvenate the design culture at this pioneering data analytics company.

Understanding Our Users

Our small but dedicated design team committed to establishing our design values, processes, and standards. We conducted extensive user and market research to create essential personas that would steer our design efforts effectively. To gain a deep understanding of our primary users, we undertook a series of contextual inquiries and user interviews, which led us to identify three main personas: the Data Analyst, the IT/Data Manager, and the Data Consumer.

Data Story Telling

Listen to users’ needs. Understand their problems and goals.

Complexity to Simplicity

Break down complex tasks. Prioritize essential tasks over secondary ones.

Experiments and Tests

Be brave to innovate and ideate. Be careful to test solutions.

Principles

With these personas in hand and through several rounds of collaborative discussions, we defined our GrowingIO (GIO) design values. These values serve a dual purpose: First, they highlight the most critical aspects to consider when designing products and making decisions. Second, they help us strike a balance when weighing the pros and cons of different approaches. This framework ensures we remain user-focused and maintain consistency throughout our design processes.

GIO Visualizations

Our ultimate goal is to present data in a way that enables data consumers to understand it quickly and clearly.

1. Visualization Color Studies

Previously, our charts relied on various third-party libraries, leading to inconsistencies. To standardize and enhance our visualizations, I led the design effort to create our own library, GIO Charts.

We selected blue (#5F87FF) as our primary visualization color. This choice aligns with our branding and its neutrality makes it accessible for people with color blindness. To adhere to top accessibility standards, we carefully curated color palettes.

We paired warm and calm colors to enhance contrast and reduce visual fatigue. Keeping dark mode in mind, we chose colors that maintain balanced luminance across both light and dark backgrounds.

To further improve accessibility, we simulated color-blindness scenarios and intentionally selected colors that remain distinguishable for color-blind users.

2. Presenting Data Relationships

Visualization helps illustrate the relationships within complex data, making comparisons and storytelling much easier. Inspired by Stephen Few's "Show Me the Numbers: Designing Tables and Graphs to Enlighten," we established our data visualization principles. Based on user research, these three principles guide our chart and diagram designs:

Prioritizing Accuracy

To depict changes over time, we use line charts composed of straight lines connecting individual data points, avoiding distortion from curves. Dotted lines compare the same dimension across different time frames, while different colors represent various dimensions.

Helpfulness and Scalability

Bar charts are preferred over column charts for long labels. Users can adjust the width of displayed labels for better readability.
‍

Screen Friendly

We designed specialized charts optimized for analysis scenarios. For instance, our custom column charts for conversion analysis maximize clarity across various screen widths.
‍

GIO Design System

1. Building the Atoms

We used an "atomic" design approach to create web app building blocks, focusing on core interactions and leveraging browser standards for efficient information exchange.

2. Meta and Variables

Using metadata to describe containers like cards, modals, slideouts, and popovers ensures elements are automatically positioned and spaced.

3. Visual Style as Variables

Dark mode is vital for reducing luminance in our dashboard, achieved seamlessly with CSS variables so all UI components support it.

Efficiency

is crucial for our small team tackling big business challenges. To boost development speed, we created an open-sourced design system that ensures a consistent design language and reusable components. I led a team of designers and front-end engineers in this effort.

4. Building the Complex: Business Components

To reinforce consistency, we standardized interaction flows for business logic, enabling systematic product design. For example, our "list picker" component was defined with clear behaviors and limitations, making it straightforward to design and develop components that align with these definitions.

More Solutions

For nearly every project, we start with a research plan. Our designers use an end-to-end design approach to ensure we solve the right customer problems effectively.

Data Dashboard

Our fully customizable dashboard is a user-favorite. Unlike traditional BI tools, it allows real-time monitoring of events and metrics. Users can add, drag, and resize charts to their preference, with the dashboard automatically sorting them to maintain organization.

Reports

Reports enable customers to gain deep insights into user behavior, helping them devise strategies to convert, engage, and retain users. Customers can explore detailed analyses and combine related reports into a comprehensive data dashboard for easy review.

Dark Mode

With Big Screen Mode, monitoring real-time data and product KPIs on large TV screens becomes effortless. Dark mode reduces screen luminance, minimizing disruptions for data consumers during extended monitoring sessions.