GrowingIO Data Analytics Platform
Building Design for GIO Data Analytics Platform
October 2020, I decided to come back to China and joined GrowingIO as its product design manager. When I started, I need to build the design team from scratch and revive the design culture for this OG data analytics company. Fortunately, I was honored to find a few very talented designers to join the team - Kexin Lv as Product Designer, Camellia Chen as Senior Designer, Nan Wu as Senior Designer, and Huiyan as our first design intern.
Our small design team works closely on creating our design values, defining our process and standards, conducting user and market research, and creating main personas to guide our design directions.
As a new design team, all designers wanted to have a better understanding of our main users. By conducting a few contextual inquiries and user interviews, we created 3 main personas - data analyst, IT / data manager, and data consumer.
Based on our personas and after several rounds of discussions, we defined the GIO design values to guide the design decision makings throughout the products. It serves with two purposes - 1) to state what are the most important aspects as we design the products and make decisions and 2) to help us balance our decisions when we are struggling with pros and cons.
On day-to-day design tasks, I help the team to run agile design sprints in order to plan projects ahead and finish them on team. The agile process also ensures us time for lean research and testing, and it also makes sure everyone on the team has exposure to different knowledge domains.
We are also a group of designers who love to share our learnings and develop our leadership skills. We have a "dinner and learn" gathering every two weeks, where we take turns to share a new topic we learned, and quarterly OKRs focused on strengthening the design culture at GrowingIO.
Previously our charts were based on other 3rd party libraries, causing inconsistency between them.
To apply the best practice on visualization, I lead the design effort to build our visualization library called GIO Charts. Our ultimate goal is to present data so that data consumers can understand the data as quickly and clearly as possible.
We defined our primary visualization color as blue (#5F87FF). This color corresponds to our branding and its neutrality accommodates people with color blindness. On this basis, we tried our best to fit our colors with the best accessibility standards.
We arranged a warm color next to a calm color to improve the contrast between colors and reduce the likelihood that people become visually tired. Also with the dark mode in mind, we tried to select colors that balance the luminance on both white and deep gray screens.
We also simulated how people with color-blindness perceive the colors. We selected the colors that can be distinguished with color-blindness on purpose to improve the accessibility of consuming colors.
Visualization is a way to represent the relationships between complex data information. The goal of the visual effect created is to make comparing data and telling a story about the data much easily.
We used the famous book Show Me the Numbers: Designing Tables and Graphs to Enlighten by Stephen Few as the blueprint to design data visualization. Based on our research with users, we also created 3 principles when designing charts and diagrams:
A line chart is best used to present the change over time. The line chart is made of many single data points connected to reflect the trend. Therefore the line is always straight to avoid distortion caused by curves.
We use dotted lines for comparing the same dimension on different time frames and line with different colors to represent different dimensions.
When designing bar charts (vertical and horizontal), we consider data-ink ratio as an important visual factor. The data-ink ratio is the proportion of link that is used to present actual data compared to the total amount of pixels used in the entire displayed area. Studies showed that a balanced data-ink of 1 is the least distracting for the visualization.
Bar charts are better than column charts when the labels are long. On bar charts, we give the users the ability to adjust the width of the labels displayed.
We also designed a set of specials charts optimized for analysis scenarios. For example, for the conversion analysis, we designed a set of special column charts to optimize the information seen on different width of screens. Here are some examples:
When monitoring data on dashboards, especially when big screens are used to display, the dark mode is turned on more often. When turning the dark mode on, the visualization colors stays the same while the axises change colors. Here are a few examples:
As a small team that tackles big business problems, the efficiency of our development team is the key to success.
The goal of a design system is to build a consistent design language across all products and reusable components to improve velocity. I led a team of designers and front-end engineers to build an open-sourced design system.
"Atomic" design isn't a new concept at all, especially when it comes to building web applications, it is about creating basic blocks of matter and assembling them to craft a system.
Our products require a lot of information exchange between the users and the system, how our users input information and trigger actions are the core interactions. We designed all our input and triggering elements around the wide variety of types of the <input> element to take benefit of the browser standards.
We have a few commonly used container components such as cards, modals, slideouts, and popovers. By using metadata to describe the card content all child elements will be automatically placed and spaced to our standards.
Dark mode/the is a very important feature for our data dashboard because the users monitor the real-time data constantly and the dark mode can reduce the luminance from the device screen. By using CSS variables, switching to dark mode was easy. So in fact, all UI components are naturally built with the dark theme.
To further strengthen consistency, we unified interaction flows for business logic. It allows us to design the product more systematically. It sounds confusing? Let me try to explain it with an example:
Before creating a component, we have a standard for what makes a component. In our definition, a component must have clear behaviors (what it accomplishes) and limitations (what it doesn't do).
This is how I designed our "list picker" components. Firstly, we defined the component: the user uses it to select one or multiple options from a group of lists. Surrounding the definition of the component, we can easily tell what should be inside and outside of the component when we design and develop.
Add in different business logics, we can create a set of variants of the "list pickers" and apply them to almost all scenarios in our products.
Unlike the majority of design systems, our system also prioritizes performance, because one interaction can cause a calculation involving millions of data.
For instance, we added the "confirm" button to the multi-select list picker, in order to minimize the necessary server requests that slow down the data services.
For almost every project, we start with a research plan. Our designers take an end-to-end design approach to ensure that we are solving the right customer problems. Here are a few example of the features I personally led the design of:
Our fully customizable dashboard is the favorite feature of our users. Unlike BI tools, our users can monitor all events and metrics through the dashboard in real-time.
They can add, drag, and resize the charts to their satisfaction. Our dashboard will sort the charts automatically so that the dashboard will always look organized.
Reports help our customers understand their users better. They can dig into detailed user behavior analysis to find strategies to convert, engage, and retain their customers.
Our customers use Reports to explore every detail of their digital products. Once they've found anything interesting, they can combine a few related reports together to generate a data dashboard.
Big Screen Mode makes monitoring real-time data and product KPIs on big TV screens easier.
Because we don't want to interrupt data consumers with extra brightness, users can turn on the dark mode to reduce the luminance of the screen.
Large enterprises can use "projects" to authorize data sets for their business departments. Project Home allows them to navigate through all projects and applications integrated to GrowingIO data platform.
