Behind the UI: Timeplus Design Principles

Wei
Timeplus

--

At Timeplus, we are building a unified streaming and historical data processing platform with high-performance and low TCO. We empower data scientists and engineers to monitor, investigate, and take actions on their data.

At a fast-paced startup, one of our Timeplus team’s strengths is being able to move and build quickly, while maintaining a thoughtful design process. Our goal is always to create an intuitive, clear, and seamless experience. We want to be friendly to use for users who are well-versed in SQL, and also those who are less familiar.

Recently, we were named as a finalist in the Vancouver UX awards, in our category, “Best Digital Product Experience”. We are honored to be selected and have an opportunity to share our product with the design community.

In today’s blog post, we’re taking you behind the Timeplus UI — here are the design principles our product team follows when we plan and implement each feature.

Prioritize focus for the user

Help our users focus on the task at hand.

Our users may work with dense information, but we still need to avoid having too much clutter on their screens. We don’t want to be distracting by offering too many steps or options right away. In the console, we have one key user flow:

  1. Add data (create a source)
  2. Explore data (run query)
  3. Present and monitor data (create chart and dashboard)
  4. Take actions (generate sinks or alerts)

Feature focus: Onboarding Flow
For new users, we offer an onboarding guide, with steps on how to easily get started. For this guide, we focus on helping the user complete tasks quickly, and included how many minutes it takes to complete.

The onboarding guide includes the 4 actions of the key user flow.

Provide clarity on the system’s status

Always be clear.

One of the most frustrating things for a user is when a system does not give the user proper feedback. The user is stuck asking, “Is it running? Is it not working?”. We aim to always prevent user confusion.

Feature focus: Query Status
SQL queries are at the heart of our product. In every step, whether it’s the Query page itself or on a dashboard, we are clear about the query’s status (eg. actively running, error, etc.). We also make sure our error messages are clear and give users an opportunity to correct an action.

When a query is running, we show a small green dot in that query tab.

Build trust and guide users

Help our users work quickly and efficiently.

Build trust between the user and our system, and also guide users to use our product efficiently.

Feature focus: Dashboards and Visualization
In addition to writing and running queries, users need to visualize and present their results. We make it easy for users to create charts and add to dashboards. Users can add charts via the Query page, or on a dashboard directly. In dashboards, we have View-Only and Editing modes, to prevent unwanted changes.

Users can switch between View-Only and Editing modes in dashboards.

Stay flexible

We are constantly iterating and evolving.

While our console is flexible to users’ customizations, our team is also flexible in how we work. Our designs adapt according to our users’ needs and research — we move and pivot quickly as needed. Our process is highly iterative — we focus on bringing key features to users quickly, and evolve and enhance features along the way, as we collect more feedback.

Feature focus: Source Configuration Wizards
We recently redesigned our Source configuration pages for a more intuitive experience, with clear steps, instead of one long form.

The new Source configuration wizards guide users through each step, with a clear flow.

Looking back at our previous Source configuration page:

Bonus: looking back at our initial wireframe (before we went dark mode):

Be consistent with our interface

A consistent visual experience throughout the product.

UX is only half the story. We also want to deliver a polished UI to our users. Each page and user pattern should look familiar, and we use colors and icons to guide the user.

Feature focus: Data Lineage
To help users visualize how their data flows within the workspace, we show a data lineage diagram. When a user clicks on a card, we highlight the arrow line to clearly show the user all other entities that are connected, and a side panel expands to show additional details.

In addition to labels, we give each type of entity a color and an icon.

Looking back at the previous iteration, which didn’t have the clear color-coding and icons:

With these principles in mind, our design and engineering teams work very closely together. We all consider ourselves to be a product manager, pitching ideas for feature enhancements and always looking for ways to improve the product. We share the common goal of creating a clear, intuitive experience for our users.

Want to see our design principles in action? Try out Timeplus yourself by creating a free workspace, or explore our demo workspace.

--

--