PATTERN LIBRARY

for Enablement Technologies @ Citrix

THE CHALLENGE

Web Services at Citrix designed and built a vast array of tools. Some were enablement tools for specific Citrix offerings and some were general resources that all Citrix customers, partners, consultants and employees might use, which put the UX team in an interesting place when it came to the direction of the products we supported. Marketing had their brand/ui guidelines, but no clearly stated UX guideline. Customer Experience had brand/ui guidelines and clear UX guidelines, but since our team fell under the marketing umbrella, we didn’t have direct access to them.

It was clear that with 4 UX designers, 4 UI Developers and 20+ Backend Developers, we needed to create a way to offer recurring solutions that solve common design problems and make them available to everyone within Web Services. I was assigned to lead the team in creating a user experience pattern library.

ANATOMY OF A PATTERN LIBRARY

The first step to creating our pattern library was to define its anatomy. What makes up this collection of patterns… obviously patterns, but what else? I scoured the web, looked at every library I could find and came up with this answer:

  1. Design: This section of a pattern shows the UI and how it should look. I put this first because I felt it was easier to rule out a pattern if you could easily see it and know it was or wasn’t what you needed.
  2. Specification: This is the redlines behind the design. It offers clear guidance to the UI designers and the developers.
  3. Documentation: This is the meat and potatoes of the pattern. It contains the obvious items such as name, category and description, but it also contains the reasoning behind using this pattern such as When to use, Baseline appearance & behavior, RationaleSub-patterns and Related patterns. This is where the HCI comes into play.
  4. Code: This is HTML, CSS and any other markup code that someone implementing the design into a product. This content was created by the Principle UI Developer on our team.
  5. Discussion: It was important to have a place for the UX designers and Developers to note where they used the patterns, a place to offer comments and a way to recommend changes to the pattern. This is where they could do that.

Aside from the actual patterns themselves, there were 3 other sections. One was titled Examples. The examples section was were we could go to see real life, functioning examples of a pattern. Another section was titled Resources. The resources section of the site was links and posts to UX related matters. Some of the links here were to well known UX assets such  as ui-patterns.com, patterny.com, patterntap.com and Smashing Mag articles as well as some great hidden gems like designingwebinterfaces.com and Common Ground by Jennifer Tidwell.

And last but not least, the about us section. I know, I know… who needs that… but the purpose for this section was to offer a way for other Citrix employees inside Web Services to know we are there to help them and give them a way to get in touch with us.

THE PATTERNS

Layout
Overlay
Hero
Header
Footer
Container(s)
Grid
Columns

Navigation
Primary Navigation
Left Rail Navigation
Breadcrumb
Hyperlink
Pagination
Steps Left
Menu button

Content
Typography
Paragraph Text
Status Messaging
Activity indicator
Lists
Tooltip
Tabbed
Help text/note
Buttons

User Input
Form Elements
Smart Default
Forgiving Format
Auto complete
Inline Edit
Form Validation
Advanced Search

Misc
Tour
Icons
Images
Video
Badges
Blank Slate
Voting
Wizards

Data Display
Blank Slate
Tables
Progressive Display
Bulk Actions
Accordion
Search Results
Reports
Graphs/Charts

Related Projects