Optimised front end design of Wercker's CI/CD automation tool

Wercker is a Docker-Native CI/CD Automation platform for Kubernetes & Microservice Deployments

Victoria Domalik
Victoria Domalik
August 11, 2016

Over the years we’ve added, subtracted and moved various front-end elements to reflect changes and new features that we’ve built.

Whilst these changes have contributed to making Wercker incredibly badass, we felt that our UI needed a bit of love.

image

 

We wanted to create a user interface that clearly communicates its function without dreaded scope creep so we decided to make three simple changes to our UI that make a world of difference.

1) We tidied up our navigation bar

Users should be able to get what they want without searching through a smorgasbord of extra information. We took out the most used components from the settings button and put them on a navigation bar, whilst simultaneously compressing less used features. Now more space has been freed up for the important stuff, and our users can stay on screen without unnecessary clicking.

2) We added contrast

Creating an architecture of importance using size, shape and colour is what gives a page impact and legibility. We wanted to draw our users towards the new navigation bar in a clear and concise way so we added contrast in the form of colour between the header and the content. That way the user is able to absorb the page at a glance.

3) We added friendly URLs

https://app.wercker.com/wercker/cronetes/runs

From a usability standpoint friendly URLs make referencing easier. Now a user can bookmark a page without having to rename at the point of saving, or worse having no reference to what the page is without actually visiting. Friendly URLs also make slack searches that much easier. Imagine posting a messy numbered URL in slack… and trying to go back and search for it a week later.

So there you have it. Our three simple ways to clean up your user interface without breaking a sweat. Stay tuned for our technical post on how we switched the routing in our front-end from backbone to react.

Earn some stickers!

As usual, if you want to stay in the loop follow us on twitter @wercker or hop on our public slack channel. If it’s your first time using wercker, be sure to tweet out your #greenbuilds and we’ll send you some swag!