Cycle's New Interface, Part 1

After a span of 5 long years, we've bid farewell to Cycle's old portal. Our engineering team has been working tirelessly over the last 10 months to bring a fresh, new interface to the platform for our users. This new design encapsulates the wealth of insights we've gained during this period. Just last week, we took the decisive step of launching it into production, and the initial feedback has been overwhelmingly positive.

In this 3 part series, we’ll dive into the how and why of the new portal, both on a user experience level, and a technical level. In the final installment, we’ll look forward and discuss the anticipated future and the exciting possibilities that lie ahead.

Part 1: Exploring the User-Centric Upgrades in Cycle's New Interface

Over the last five years, our team has learned a lot about how people interact with our platform. When we first set out to create what later became our first portal, there were a lot of unknowns. How the platform would develop and what sort of interactions people would have with it were still a mystery - we had to shoot somewhat blindly and build our interfaces with limited and often missing information, often as they were being implemented platform side for the first time as well.

While I can say I’m very proud of the first iteration of our user interface, it left a lot to be desired. Some things felt cobbled together, on both a technical and user experience level. As the scale of our customers grew, we ran into upper limits in the design - things were hard to find, navigating the increasingly complex structures became bulky, and new concepts became harder and harder to integrate. Not to mention, the design had become out of date with our current brand, and redoing it was already shaping up to be a monumental task.

Despite these issues, the “old” portal as we’ve started lovingly referring to it, marched on and accomplished far more than it was originally designed to. It has been the face of Cycle for half a decade, and regardless of its quirks, we’ve all grown accustomed to it. We’ve done our best to keep a similar feel in the new design, while incorporating everything we’ve learned since we’ve launched Cycle.

Cruising Complexity: Crafting UI for Compelling Data Composition

One of the biggest problems in old portal was the difficulty in switching between various items like environments, image sources, etc. and the number of clicks required to compare two items. This was due to the lists being completely separate pages, adding an extra click when going back and forth (back button or environments > environment again). As you dove into sub categories, you would lose context of all other items in that category. This problem became compounded if you needed to reference some other type of object while looking at another.

In the above example, I’m looking at a list of environments which takes up the full screen. Navigating into any of them replaces this view with a single environment, and I lose the ability to create a new environment, or see other ones I have created. My context is hyper-focused into that environment:

While this is generally okay, it becomes a challenge when comparing multiple environments. As we plan for the future with blue/green deployments and other new features where comparison becomes important, this design becomes unwieldy.

In the new interface, we’ve streamlined list and individual views together. As you navigate environments (or image sources, etc), you’re able to keep other environments in context, and have access to create a new one right from the same view:

You can immediately notice several differences. It is far easier to tell what we’re looking at - we no longer have to rely on a tiny breadcrumb at the top to tell us how nested we’ve become. The top header bar has been removed, and its content merged into the sidebar, removing the dead space at the top. While looking at an environment, I’m able to interact with it via the buttons at the top (which are similar to the old interface), monitor or navigate to other environments , create new environments, or go somewhere completely different in the left-hand sidebar. The addition of the list navigation on the side provides hierarchy and reduces clicks

Our new UI hierarchy is now:
Top-level items > List of item > Item details > Sub items (i.e. containers) [opens in a modal] > Sub item tabs (instances, config, etc) [left side navigation in modal]

The sidebar on the left reveals two additional improvements to navigation. First, there’s a giant search bar that we can click, or open with CMD + K (or CTRL + K for us heathens). This will reveal an action menu where we can search for items, and quickly jump to them. Tucked inside are even more options for quickly executing tasks, such as creating a container, starting/stopping the active environment, and more - all without falling back to ‘click-ops’.

This search functionality was so useful, we ended up back-porting it into old portal for the final few months of its life. So while some of you may have had experience with it, it was never really advertised and its functionality, by comparison, was limited. As new portal continues to mature, we’ll be adding even more useful functionality into the action menu.

The second change you’ll notice, is the sidebar now has expandable sections. In old portal, in order to view servers for example, you’d need to first click infrastructure, then servers, then select the server you wanted to view. In new portal, you can expand infrastructure and go to servers directly, eliminating a whole stage of navigation while making things clear. It is now equal effort to go to any part of infrastructure.

The final change I’d like to highlight regarding navigation is the search bar at the top of a list view. This search is more narrow in scope, and has two modes. By default, it will do a local fuzzy search of all items in the list you’re viewing. This keeps things fast, since there is no network involvement, but may not show everything if you have a huge quantity of items on the list. If you click the magnifying glass, you can switch the mode to “Full Hub Search”, which will query the platform for your item, but is a bit more strict. We have improvements planned here that I will talk about in a later blog post, but in the meantime, it should make it significantly easier to find what you’re looking for, faster.

Doing More with Modals: Multitasking with Mastery

Following our hierarchy from above, one of the challenges we’ve always had with the old portal was how to display that final tier of data - these are your containers (nested in an environment), images (nested in a source), or even pipeline steps. There’s even one level lower with container instances. In some places, we created additional tabs, or accordion-like toggles. A couple years into old portal, we added the container modal, but it was tacked on and didn’t preserve the background context correctly. So while it gave us more space to show all the myriad of things associated with the container, the background would always jump back into the environment and you would lose your place.

With the redesign, we decided to make modals a first-class citizen, and move all ‘final tier’ items into modal contexts. Now, they’re integrated into the search params portion of the URL (?dialog=container). This brings a ton of benefits - first, opening a modal will preserve the background context (the main part of the URL), so closing it will keep you exactly where you expect to be. Second, we’ve unlocked the ability to open the modal from ANYWHERE in the interface. Need to reference a container’s port configuration while you check its DNS record? Just open the action bar and view the container right there, close it out and you are right back on the records page for the zone. Finally, you can share these URLs with colleagues to have them look at EXACTLY the same thing as you. Each tab in a modal is baked into the URL, so pointing someone to the exact same view you’re looking at has never been easier.

We’ll be adding a lot more functionality here, but with this system in place, we’ve made it much easier to switch contexts and take care of prerequisite steps when you’re in the middle of another task.

We’ve also moved more forms into modals. In old portal, we had a few such as ‘Create Environment’ etc, but in new portal we’ve moved them into this system (meaning you can create an environment or container from anywhere), and improved them quite a bit.

Streamlining Services: Showcasing the Shift to a Separate View

Over the last few years, the importance of an environment’s auxiliary services, such as the load balancer, have increased drastically. Today, there are three: Load Balancer, Discover, and VPN. Of these three, Load Balancer and VPN had dedicated tabs in an environment. However, as we focus more and more on visibility and metrics in the coming months, we realized we wouldn’t have enough space to show off all the fancy graphs in addition to the configuration options. Add to that we’ll soon need a new tab for the discovery service, and who knows what new things we’ll be adding later, and suddenly the old portal design has become extremely limiting.

As we built out the new portal, it made sense to treat these services as sub items to an environment, and following our new hierarchy, they get their own dedicated modal with navigation.

On the environment dashboard, you’ll be presented with a “Services” panel and the new “Manage” button. Clicking that will open up a modal for the selected service:

As you can see, there is a lot more room for displaying information, and we don’t need to try and combine the metrics/basic information with the configuration. It’s not only load balancer that benefits, VPN also feels better organized:

And finally, we now have the room to do more with Discovery in the future.

Getting the Job Done: The Joys of the Jobs Menu

Jobs are a critical part of Cycle. Most everything that can be done on the platform is asynchronous and creates a job behind the scenes. Starting a container, deploying a server, or deploying a stack are all examples of this. What’s more, the platform may create jobs automatically behind the scenes, such as generating a TLS certificate. They can be created by other members of your hub, or by API keys. Essentially, jobs are everywhere, and knowing they are happening is critical for visibility.

We’ve added a clearer counter for jobs on the left hand side, next to the search bar.

The counter shows the number of active jobs the platform is processing for this hub, and when one succeeds it pulses green. If one fails, it’ll pulse red, and you’ll get a notification.

Old portal had a numeric counter in the top right corner, but these small animations and transitions add a note of polish that make the interface feel smoother and more responsive. There are some technical improvements regarding jobs that I will discuss more in-depth in the next article.

Dawning of the Dark Age: Dark Mode Steps into the Daylight

Finally, one of the most anticipated changes (for me at least) is the long-awaited dark mode. When you’re scaling up infrastructure late at night to meet your new demand, the last thing you want is to be blinded by a white screen in your dark room. Really, it’s good for your health.

By default, the portal will match your system theme settings. However, to change modes simply open the action menu (cmd/ctrl + K) and select “Change Theme”.

UX for You

That wraps up the major changes to the interface. Hopefully, it is fresh but familiar, and improves visibility and productivity for everyone. We’ve poured a lot of time and energy into this redesign, so let us know what you think over on our slack channel.

Next up in this series, I’ll talk about some of the technical details behind the new portal, how we built it, and why it means more features, faster. In the final installment, we’ll look toward the future, and how we expect the portal to evolve.

💡 Interested in trying the Cycle platform? Create your account today! Want to drop in and have a chat with the Cycle team? We'd love to have you join our public Cycle Slack community!