OVERVIEW
Cloud Pattern Library
My role: Lead Product Designer
Client: Large financial company
Duration: Twelve weeks
Objective: Design a pattern library to enable over 10,000 developers and architects to work faster by reusing patterns, code, and ways of working.
Methods: Wireframing, prototyping, usability testing
Tools: Figma, FigJam, MS Teams, Photoshop
What is the Cloud Pattern Library?
In this project, I worked with a large financial company to design their Cloud Pattern Library (CPL). A pattern library is a repository, similar to GitHub. It is a giant internal product cataloguing every component that developers use. The CPL is a metadata hub and user interface designed to speed up development and to help automate digital governance. Resources within the CPL allow developers and architects to deliver applications faster. The CPL provides a searchable catalogue of cloud products including approved designs, CI/CD pipelines, and Infrastructure as Code (IaC), which can be accessed by everyone within the organization.
What is a pattern?
A pattern is a design for a reusable structured collection of one or more IT Components. Examples of IT Components include a UI element and a straight-through processing flow.
The Ask
My client wanted to build a modern, intuitive platform that would increase the efficiency of development. With over 10,000 developers in the organization, a 1% increase in speed would produce big results.
I was hired to bring a design perspective to the project. I worked closely with a project manager, collaborating and sharing my work in daily meetings.
Key deliverables included:
Style guide
UI kit
High-fidelity wireframes
Information Architecture
This data model depicts the Pattern Framework. The IT Component is at the center, with relationships to providers, code, products, services, etc. When I first saw this overwhelming diagram, I knew I needed to use some information architecture (IA) methods to understand the content and concepts forming the backbone of the CPL.
I first attempted to make sense of the CPL by creating a site map. I wanted to sketch out the organization and navigation scheme together with the PM. We came up a high-level site map containing the most important features:
I also wanted to map out the relationships between patterns and components, as well as the categories of patterns. These would become filter categories.
Through discussion with the PM, I realized that these filter categories weren’t hierarchical. I determined that a site map wasn’t the best tool to use and instead led a card sorting exercise to organize the filter categories and IT Components.
One of the challenges we uncovered during this card sort was the “stupidly long list” of AWS IT Components, which dwarfed the list of components from Azure and Google Cloud Platform (GCP). Our initial thoughts were to use a typeahead search to deal with this list.
Competitive / Comparative Analysis
I gathered examples of similar solutions, beginning with an advanced filtering feature.
I also analyzed two examples of services that were very similar to the CPL: Terraform and the AWS Prescriptive Guidance Library.
We came away from this analysis with notes on visual designs, content organization, and filtering flows to emulate in the CPL.
Sketching & Initial Wireframing
After creating an IA skeleton with the client and collecting some examples of solutions to reference, I began sketching layout and interaction concepts.
Throughout the design process, I got feedback from the PM and incorporated his ideas and preferences.
Creating a Design System
Medium- to High-Fidelity Wireframes
One of the biggest challenges for this project was creating and implementing a consistent design system across very different components.
I used our design team’s Medium-Fidelity Wireframe Kit, an in-house design system that I contributed to, for quick ideation and iteration.
I also began to define the visual design for the Pattern Library by creating color and typography systems. As I finalized my design system, wireframe iterations became increasingly higher-fidelity.
Best Practices in Figma
While working on this project, I was simultaneously progressing through Figma Academy, so I took the opportunity to learn and apply best practices in creating my design system. I delivered beyond the ask by going through my own design process to ensure that all assets were high-quality and well-organized, with logical naming conventions and hierarchy of components.
I also based components on Material Design for easy implementation, which paid off:
“Sometimes the design is so funky that no one can implement it, but the [developers] have been able to implement it really quickly and easily.”
From LEGO to Molecule Logo
The client initially wanted a LEGO transformer logo to represent the pattern library. Later, he decided to use a molecule as a logo. I minored in chemistry in college, so I was excited that all of the time spent drawing organic compounds was not in vain!
Creating a Loading Spinner
The client wanted the molecule logo to also serve as a loading animation. I used Figma prototyping to simulate his vision: a line drawing of atoms coming together to form a molecule. After reviewing the prototypes with him and the developer in charge of the animation, we chose to use a more traditional loading spinner in the style of a molecule.
Design QA
After I delivered final wireframes, developers asked me to review their implementation of my designs. I placed wireframe screenshots side-by-side with the developed screens and identified any inconsistencies.
Results
My contract was extended
I was hired by a different group within the same company
When budget became available, the project manager brought me back to continue working on this project for another five months
“The outcome is fantastic. Sometimes the design is so funky that no one can implement it, but the [developers] have been able to implement it really quickly and easily.”
“[The client] wants you back because of the amazing delivery you did.”
“[The client] just loved your work so much and requesting you by name is a great sign of the quality of work you deliver.”