Back arrow
Go back to all blog posts
How we completely redesigned the Orchest UI: join us live to learn more!

How we completely redesigned the Orchest UI: join us live to learn more!

After months of hard work, we are thrilled to announce that we have revamped the Orchest user experience! The new design makes the life of our users easier and lays a solid foundation for the product improvements we are planning for the next months.

We will unveil the new design during our first community event on September 21, 17:00 CEST (15:00 UTC), and we invite you to join us live! You will also learn about the latest improvements we have made to Orchest, see a project walkthrough showcasing the new UI, get a glimpse of what’s in the pipeline for the coming months, and get a chance to talk with the team.

In the meantime, in this blog post we describe in more detail how our redesign process went, from identifying the pain points and bottlenecks of the old navigation and layout to carrying user interviews and mapping the Information Architecture. After our Community Event, we will make a bigger announcement describing the results in more detail.

Challenges

When Nick, our Product Designer, joined the company back in April, the first thing he did was to install Orchest and start getting familiar with it - to give us a fresh look at the product and start empathizing with new users.

Shortly after, he formulated some hypothesis and research questions and started conducting proper user interviews with the help of the rest of the team. What’s good about evaluating new users is that making navigation easy for them makes it easy for everyone else, including existing users.

Despite the fact that Orchest is purposely a conceptually simple product with few moving parts, the feedback from the user interviews showed that there were two main challenges in the user interface.

Tricky navigation

In Orchest, each project has several entities (Pipelines, Jobs, Environments) as well as its settings, and the user can have several projects. This means that there are two axis of navigation: intra-project (going from Pipelines to Environments) and cross-project (going from one project to the other).

However, the first thing users saw when opening the product was a hamburger menu, hiding the main navigation elements and showing only some icons that were difficult to relate with the concepts they were representing. As a result, it was unclear where to go or what to do next.

In addition, the cross-project navigation would only appear after going to any of the project properties in the form of a dropdown, which could become unwieldy for accounts with many projects.

Inconsistent layout

Another thing that became apparent is that the layout of the user interface had some inconsistencies: the colors of the buttons were somewhat heterogeneous, primary buttons did not always have a uniform style, and in general there was a lack of visual hierarchy. Nick mapped these differences, representing how different areas of the screen were being used for different purposes.

Goals

After identifying these points and bottlenecks, our main goal became optimizing the navigation and the layout to improve user onboarding, streamline workflows for existing users, and improve feature discovery.

To this end, Nick worked on the Information Architecture of the product and crafted some design prototypes that were shown to the users during the interviews to gather early feedback and iterate quickly.

At the end of the research process, we already had a series of recommendations in the form of user interface elements that needed to be redesigned, and a solid idea of how we wanted the final designs to look like. With Rasmus joining Huang-Ming in June to complete our Frontend team, we just needed to translate those designs into actual code.

Yes, the word “just” is doing a lot of heavy lifting there. But we made it!

Results

The results of this work can be seen in the screenshot below, taken from a development snapshot of the Orchest repository!

You can already spot some of the most notable changes, for example:

  • The hamburger menu is gone, and a new tab navigation was introduced to switch between the different entities of a project. Abstract icons were replaced by the names of the entities (Pipelines, JupyterLab, Jobs, Environments).
  • A new project selector with searching and filtering capabilities allows for easy cross-project navigation.
  • A more subtle bar replaces the “environment building” dialog for a more pleasant experience.
  • A new “Run all” button was added to quickly run all the steps of the pipeline.

Beautiful, isn’t it?

Want to see more? Join us live!

This is only the tip of the iceberg! All the product pages have been redesigned, the onboarding flow has been revamped, and lots of subtle interactions have been improved.

However, we don’t want to spoil everything in this blog post: if you are excited to see the new Orchest UI in action, register now to our first community event happening on September 21, and see you there!