Cyclops: CenturyLink Cloud’s Pattern Library
In case you’re unfamiliar with the history of CenturyLink, a large portion of its 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 Bellevue, WA based startup where I was Creative Director — to deepen its cloud infrastructure hosting and management capabilities. Tier 3’s Cloud Management Platform, for which I designed much of the product user interface, became CenturyLink’s Cloud Platform.
Why a Pattern Library?
In an effort to bolster its cloud offering, existing CenturyLink teams based in St Louis, Denver, and Edmonton, shifted to focus their efforts to develop 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 a pattern library. We needed to be able to scale the impact of 3-person UX/UI team that I lead, so that an organization of 300+ can create new products with a user experience that is familiar to 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.
Over the course of four months, we developed the pattern library we call 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 is an open source collection of atomic pieces that make up the CenturyLink Platform Control Portal interface. The benefits of living pattern libraries or style guides have been around for a while now, so forgive me if you are already familiar. By documenting and assembling a reference site of UX/UI 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 that:
- We give a unified and consistent user experience across CenturyLink Platform products and services.
- We build consistently, allowing teams to 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.
- We have 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 UX/UI team to make it as easy as possible for product developers to use the patterns we defined, thus facilitate 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 in’s and out’s 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 by our team’s lead developer, Matthew Osborn, 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 org has been a success. As we work with remote teams to build their product UIs, product managers, developers, and org leadership have realized the benefits of faster development time and consistent high quality user experience. I’m proud to say 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’s been in existence for a significant amount of time, there’s a large amount of existing markup and javascript that we’re working to refactor 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. For example, we’re currently researching data visualization options so that teams can easily display charts and graphs in their UI.
We’ll continue to collaborate with product managers and developers to iterate and define the customer experience. Which leads me to what we call Monocle, our system for working with product teams to produce high-quality prototypes based on Cyclops.
Resources
We couldn’t have developed our pattern library without help. We borrowed heavily from some fantastic resources. Here’s a list of some of them:
Pattern Lab
http://patternlab.io/
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
http://styleguides.io/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
http://styleguides.io/
Everything good that’s been written or said about style guides and pattern libraries, it’s probably here.
Bootstrap
http://www.getboostrap.com
For it’s 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
http://fontawesome.io/
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.
