Since last summer we’ve embarked on a complete revamp of our user interface and experience.

The main drive to improve UI and UX was to make Clarive easier for new users. We’ve realized, after some careful user research, that only advanced users were using the interface with fluidity. They would navigate it’s internal tabs and easily find the information to build releases and deploy changes. Most users however had slower reaction times and took a long time to find information located in our application menus, in special when working outside the main flow they were used to.

It was time for a revamp.

User research

As our team went through a Google Residency, we’ve amped up our game when it comes to Interface research. Applying the Design Sprint philosophy helped us improve our UI design process.

Project-based interface

One of the most notable features of Clarive is it’s multi-application, multi-project navigation. Most Dev and Ops tools have a project/application/repository selector as a starting point. We were always concerned about giving our release managers a way to drive their releases across many applications.

But most day-to-day users, mostly developers, work on one project or application at a time. We were forcing them to gaze through lots of information that were not in the right place to start with.

Clarive is now both single project (see the project selector) and multi-project thanks to the Explore selector. We are working on two more views, first on the user-mode views, where the user will see all of their project data that pertains to them, and the project group view later, which will be a single mode project scope.

Oh tabs!

One of the most noticiable things we got rid of are the built in tabbed interface. This feature has been part of Clarive since its inception and early versions that ran on IE6 and it was a tough call to make.

The reason we had a tabbed interface was that our users needed to deal with a lot of information and, if you recall from a long time ago (Microsoft) browsers did not have tabs in them. We’ve dropped IE6 support a long time ago, but the tabbed interface persisted… until recently.

Some of our power users will miss having tabs, but to be honest we ourselves were annoyed by how the interface would become very busy very quickly, difficult to find your way around and non-standard as URLs did not correspond to the UI state at a given point in time.

React to this

The new interface is slick!

We’ve migrated the layout and most of our UI components to React. It’s been a fun and rewarding process.

We tried Vue.js component interface first, which was good, but we just found React components and JS-focused architecture and style was more familiar to the team.

We are used to building visual components straight in Javascript, and JSX seemed like a more natural and intuitive fit. We are also in love with Ant Design’s library of components that were ready to use and easy to style.

Pubsub and logging streams

With our revamped pubsub server, UI push updates happen on the fly and make the interface even more reactive. So no need for autorefresh anymore.

We’ve also took the opportunity to reformat and restyle the log output stream, with terminal ANSI colors and push updates.

The Topic Grid

The topic grid, also known as a topic list or table, has been completely redone in the just released version 7.4.0. We cover that in another blog post, but that also has been an exercise in interface design.

We’ve also improved topic querying and filtering, with new revamped filters that are also reflected into the URL as query parameters. That way you can just use your browser bookmarks as a replacement for the deprecated favorites.

Admin users and roles

We’re still in the process of updating some of our admin interfaces, but for now the most significant changes come in the Admin users and role/action configuration.

Shields

We also wanted to give our users more standard visual cues for the status of a release or changeset build, testing and deploy.

For that we’ve picked https://shields.io/ as the reference implementation and now it looks like this:

It should make it much easier for our users to get a feeling of how their changeset is progressing through the delivery lifecycle.

Deprecation: Favorites

Besided dropping our tabbed our tabbed interface in favor of single page design, we’ve removed the Favorites section, since now you can use the browser favorites instead. Favorites were a slapped on fix to the old tabbed system, since tabs did not have cannonical URLs most of the time.

More to come

Watch for more UI revamps, as we’re looking now into these interfaces for the upcoming 7.6 series:

• Job monitoring and job dashboard
• Release planning redo
• Inline topic editing (without a separate window)
• Report designer

The above should be available later during this year. In the roadmap for next year, most likely the 7.8 series, there will be a rule designed revamp, as we’re implementing project-based rules inspired on our YAML rulebooks (which are already project based).

That’s all for now, I hope you enjoy working with our new UI as much as we do.