Over the past few years CenturyLink's growth to becoming one of the largest telecommunications providers in the United States has been through acquisition. A little over two years ago, CenturyLink acquired Tier 3 , a startup based out of Bellevue, Washington, in a move to deepen its cloud infrastructure hosting and management capabilities. Tier 3’s Cloud Management Platform, would become the CenturyLink Cloud Platform.

Why a Pattern Library?

To bolster its cloud offering, teams based in St Louis, Denver, and Edmonton are developing products and services that will integrate into the Bellevue-based CenturyLink Cloud Platform. Now, 20+ product teams contribute to the Platform, each with their own development skill, technology stack, and deployment schedule.

With so many different people developing for our Cloud Platform, we reached a point where product complexity and organizational size made us realize that if we wanted to give our customers a consistent, simple, CenturyLink-branded user experience, we would need to design and develop what’s known as a UI/UX pattern library. We needed to be able to scale the impact of a relatively small UX/UI team so that an organization of 300+ employees are able to create new products with a user experience that is fluid for our customers, and allow us to evolve our design language without needing to go to each product team and tell them to update their code or submit a pull request via Github. Over the course of four months, we developed the pattern library we named Cyclops. If you’re unfamiliar with the concept of pattern libraries or style guides, check out the resources section at the end of the article.

Cyclops Page

What is Cyclops?

Cyclops is an open source collection of atomic pieces that make up the CenturyLink Platform Control Portal interface. By documenting and assembling a reference site of UI/UX patterns, we are able to speed up the development process and address internal communication problems inherent with working on a distributed team. Codifying our UI patterns, both in behavior and actual code, benefits us in the following ways.

  • It provides a unified and consistent user experience across CenturyLink Platform products and services.
  • It allows us to build consistently, letting teams focus energy on creating new services, not web forms and list items.
  • We can see all of our patterns in one place, quickly revealing maintenance issues.
  • It creates a shared vocabulary and reference, so that teams can refer to different areas of their user interface with the same understanding.

It was important for us as the CenturyLink Cloud UI/UX team to make it as easy as possible for product developers to use the patterns we defined, thus facilitate the usage of Cyclops. Our team is small, so it’s even more important that each pattern is well-documented. Otherwise we’d be spending all day on Slack or phone calls explaining to developers and product owners about the ins and outs of each pattern. Patterns are displayed with markup and code samples along with a usage description. For more complex UI patterns (e.g. sliders, toggles, account context switcher), web components were developed and documented so that implementors don’t have to deal with large blocks of markup.

Results So Far

We released Cyclops 1.0 internally mid-November 2015, and adoption by teams within the cloud organization has been a success. As we work with remote teams to build their product UIs, product managers, developers, and senior leadership have realized the benefits of faster development time and a consistently higher quality user experience. It is exciting that our organization has adopted a product development process where UX/UI design is central rather than an afterthought, and Cyclops has been a catalyst for this. That may seem like table stakes, but if you’ve ever been part of a enterprise-sized organization, you’ll know that the effort required to change anything is non-trivial.

However, as with any product that has been in existence for a significant amount of time, there’s a large amount of existing markup and JavaScript that we’re working to re-factor to Cyclops patterns. We’re opportunistically working through this technical debt while working with product teams to design user interfaces for upcoming products.

What’s Next?

There’s the obvious, like adding more patterns and refinement. We will look to judiciously add new patterns as we continue to collaborate with product owners and developers to iterate and define the customer experience. We will also focus on including web accessibility best practices as part of our patterns.

All of this leads to what we call Monocle, our system for working with product teams to produce high-quality prototypes based on Cyclops. Stay-tuned for our post on our Monocle system.

Want to Learn More about our Platform in Motion?

New to the Cloud? Sign-up and get going on the CenturyLink Cloud with credits! Looking to Migrate your Cloud? Migrate to the CenturyLink Cloud Platform with Free Onboarding Support!

Resources We couldn’t have developed our pattern library without help. We borrowed heavily from some fantastic resources.

  • Pattern Lab Brad Frost’s project was invaluable as we developed a business case for developing our pattern library. Links to helpful resources, the atomic design concept, and even an open source Pattern Lab as framework to start your own pattern library.
  • Style Guide Podcast A small batch series of interviews on Style Guides, hosted by Anna Debenham and Brad Frost. It was helpful to hear from other designer/developers on challenges they faced, and how they dealt with them.
  • Web Style Guide Resources Everything good that’s been written or said about style guides and pattern libraries -- it’s probably here.
  • Bootstrap For its comprehensiveness and familiarity amongst front-end developers, we adopted many of the html/css patterns established in the this ubiquitous framework, but heavily customized it to suit our needs.
  • Font Awesome We’re not using the actual icon font file in Cyclops, but we are using svgs that are based on many icons in Font Awesome. If you need an icon for your UI, it’s probably here. Awesome indeed.