I’ve joined Redash last November to improve the design and user experience. I’d like to give you an overview about the redesign we implemented in V4 and what shaped our thinking.

…but first, why was this redesign needed?

When I first got Redash in my hands, my immediate thought was that it could benefit a designer. Redash has plenty of powerful features, but as it was growing organically, user experience was neglected over functionality. The design became inconsistent and flaws appeared in the layouts and interactions.

As the product grown, it became clear it needs a dedicated UX lead. Someone needs to overview the design decisions and taking care of UX issues. To grow Redash further as a product, better user experience is crucial.

“As part of Redash maturing from an Open Source Project to an Open Source Product we had to put more emphasis on better UX. It’s been on my mind for a long time and I’m glad we’re finally doubling down on this.” — Arik Fraimovich

This is how I entered the picture a few months ago.

How are we going to do this?

When you’re entering a project late as a designer, you have 2 options: big redesign or step by step improvements.

We passed on the big redesign option (which takes long time to nail and delays development) and decided to go with the leaner, step by step approach.

We still didn’t release all the in-progress work as we didn’t want to confuse our users. After months of hard work we reached the point where we can release what we did so far and future iterations will be rolled out immediately.

And now that we reached a stable version, we can talk about what’s coming.

Let’s dig into the improvements

General design improvements

We’re introducing a new visual design. The most important thing about this new, lighter design that we wanted to create an interface that’s “invisible”. And even though we’re not there yet, we think that we’re on the right track.

The most important thing about Redash is the data: queries, visualizations and dashboards. The design must be secondary and support you in every step interacting with data. This thinking is the main driving factor behind our design decisions.

You’ll see many improvements here, to give you a few ideas:

Settings, forms and fixed width layout

We’re introducing a new fixed width layout and nicer looking forms.

Tables

← Before | After →

Font change: from Roboto to system-fonts

As part of making things simpler and thanks to the improvement in the system fonts in recent times, we decided to stop using a custom font (Roboto) and use the default system font.

← Before | After →

We’re introducing a less prominent navigation with our light navigation theme. This will blend the navigation more into the app which is aligned with our intention to bring the data closer to you and decrease distracting visual elements. Notice the Create button, which allows you to start a Query, Dashboard or Alert creation anytime.

New Query Editor

The query editor is one of the most important feature of Redash. We wanted to double down on this and introduce big improvements. As you can see, the before/after doesn’t make sense any longer, since the new design is so different.

← Before | After →

The new layout gives your query and data more room, while also giving you the ability to hide sections when you need more focus.

Improved first time experience

Something that is always easy to overlook in a product that’s been around for along time, is how the experience looks like for a new user? In this version we take a first step in improving this by adding better empty states to guide the user with the next steps.

Guiding the user’s first steps

Improved flows: data source, alert destination, user profiles, dashboard creation

As we’re aware of some fundamental issues with critical flows, we wanted to improve the design on those as well. Adding a new data source (or creating a dashboard) was absolutely unguided in the past, making it very difficult for new users to get started.

Enhanced Add Data Source flow

Nice and friendly “Add Data Source” flow

Dashboard creation

Great improvements for our Dashboard Widgets.

Not only that creating a new dashboard is a more guided experience now, but we also added new capabilities for editing the arranging the dashboards. More on this in future posts.

That’s where we are and there is a lot more!

The design and UX is only one aspect that was improved significantly in the upcoming V4 release. We also added new visualizations, improved existing ones, added new data sources and fixed many of those annoying bugs.

As V4 coming to a release in the next week, we’re going to post more about the new features and changes. If you don’t already follow us on Medium or Twitter, you probably should 😎 (or just subscribe via email below)