It’s been about two years since we created Probo’s initial UI designs. The UI and UX have served us well so far, but it’s time for change!

The user experience for the app was originally developed mostly through intuition, like most brand new projects. We started off looking at other CI tools available, then modified what we found based on our needs.

However, over time people began letting us know they were having trouble navigating the web app. Rather than jump in and make many incremental changes, we took a step back and collected some data. Using this data and feedback from a set of stakeholder interviews from Proboers and staff, we’re now ready to make big changes to Probo’s look and feel.

First, some branding considerations

Two of the primary design considerations we have with the Probo project is standards compliance and branding. Most of our design components for all Probo websites, including the web app, are standardized in a central repository, the probo-styleguide.

The styleguide is generated using KSS Node, a processor that trawls your CSS for documentation comments to build an HTML report of components. We’ve beefed up the number of components in the styleguide and redeployed all the projects. This was no small feat, and we have John Kaeser to thank for the effort. You may have noticed the font and button changes that went live recently; these changes were part of this standardization process.

Jen Rovner and I spent hours (amazing, exciting, fun hours) poring over fonts and settled on Sofia Pro, which comes from the Mostardesign foundry in Typekit. Sofia is now our primary font used throughout the web app and on all the public websites. Why Sofia? Well, many of Sofia’s characters have a rounded quality that complements Probo’s spherical logo (well, tricontahedronical logo, but we don’t need to go there). The combination is pleasing, and we also appreciate Sofia’s crisp and modern look

Next, think about experience

The really difficult part is now in progress. People frequently lose their place in the web app, so we determined pretty early on that we want to make significant changes to improve the overall user experience. This means a ground up rethinking of the app’s structure.

We have several layers of nested entities in Probo, and our challenge is to arrange them in an intuitive way. For example, your Github organizations become Probo organizations. Inside those organizations are Projects/Repos. And of course Repos have many Builds.

As I wrote earlier, our initial UX considerations were done through intuition and basic research. We’ve learned a lot about how our users interact with our product since then, and with that in mind, Jen, John, and myself have been working on some changes to make things right (or at least, righter).

A web app is an app, not a website By their nature apps behave differently than websites, and people expect different UI components in an app than they expect in a website. For example, an app doesn’t usually have the (dreaded?) hamburger menu denoting a mobile menu drawer.

Apps also have different UX. A website might contain different components within self-contained boxes and is usually thought of by the user as a collection of pages. Yet an app is usually the full width of the window, a more responsive, edge-to-edge environment.

We’re moving into a panelized display to help visualize the hierarchical nature of the various entities within Probo.

This layout helps our app feel more app-y. You have a main content area and several auxiliary toolbars or windows containing related information or functionality. The layout is full screen; there is no content frame like a website might have.

Most importantly, it is far easier to keep your entity hierarchy in mind.

Coming soon to your Probos

You can see we’re taking UX/UI considerations very seriously. We’ve put a lot of effort into a new UX strategy, which was ultimately directed by data and feedback we’ve received from you - our clients!

Since the changes we’re planning are so comprehensive, we won’t be deploying them incrementally. Instead, we’ll make a single push to get the new designs out in production all at once. And of course, we’ll make that update scheduled so you know when it’s coming.