Designing the talents connect UI pattern library — a UX case study

My role

In 2013 I joined the german start up Talents Connect (22CONNECT AG) to help make the job search, head hunting and people development more candidate centered. The following is a self initiated project from 2015 which has been ongoing ever since.

The whole process required me to learn and start usability testing, perform a pattern audit, hold workshops, create the visual design and found and lead a chapter in our organization dedicated to improving the pattern library called the Pattern Chapter.

The story

In 2015, the job marketplace Talents Connect had already been around for 2 years. During that period of fast paced growth new pages, new features and landing pages were all designed and built on an as-needed basis, resulting in inconsistent and redundant pattern styles.

The Talents Connect platform saw a handful of redesigns over the years. Each carrying over styles from an older version.

Usability testing showed these inconsistencies led to a lower chance of task completion.

Redundant patterns with different styles increased the cognitive load of our users, resulting in a hard to learn software. For example, while going through the flow of creating a job post, every usability test participant triggered the same error message, overlooking a certain dropdown style. The goal was to create a library of patterns which reduced friction, were eventually consistent throughout our products and reflected our brand (or the brand of a B2B customer).

every usability test participant triggered the same error message

Screenshot from a usability test session — Patterns like this material design inspired dropdown were consistently overlooked in usability tests, causing users to fail their task of creating a job post.

Auditing the current state

I took screenshots of every page/view of the platform collecting each instance of an interactive element where a unique CSS style was used (e.g. buttons, input fields, links, select menus etc.).

Buttons were the biggest culprit — A snapshot of all the unique button styles in one product (2015)

Defining principles to inform the styles

I held a workshop with an interdisciplinary team of colleagues, where I presented the audit. I used Charlotte Jackson’s From Pages to Patterns exercise as a rough structure for the workshop. Together, we group similar elements based on their uses specific to our product.

During the workshop it became apparent that different units had different names for the same elements of our product. We had the opportunity to try and come up with a common language when talking about our patterns and features.

We came up with the following principles and guidelines to help us design the library and choose when to use which pattern:

Principles

• Be brandable. Talents Connect products are sold as rebranded white label solutions. The pattern designs needed to be adaptable to other organization’s CI color guidelines.
• One source of truth. Designers, front- and back end developers need a common source of truth for current styles. For this our front end team used patternlab as a template based on Brad Frost’s Atomic Design.
• One step at a time. This was a self initiated project with few resources, so our implementation strategy was to update the old patterns with the new, when we came into contact with them through everyday business on tickets or projects.

Guidelines

• Don’t re-invent the wheel. Let’s use and test known conventional patterns before designing new patterns.
• Don’t overload the user with choice. Use only one primary action per context. Users should be able to quickly differentiate which action they are suggested to take.
• Clicks aren’t everything, but sometimes they are unnecessary. Use the pattern which requires the least amount of physical and cognitive effort from the user to achieve their goal.

Our guidelines help developers independently make good decisions about usability.

The dropdown which was problematic in the usability test turned into a radio-grid pattern.

The result was a living growing adaptable pattern library…

for both recruiter and applicant products.

The Talents Connect Application Management System and it’s brandable UI.

Mobile views of the web app for candidates.

Detail of our reduced button styles I rendered with HTML & CSS

Key takeaways

From concept people to developers, this common set of patterns has helped us focus more on solving user problems and has kept our products consistent with our brand and the brands of our customers. Our team learned a lot about communication and collaboration while working on our pattern library.

• Designing for reusability. I learned the importance of consistency in an interface in regards to working together with front end developers. Having a set of patterns we could turn to at the start of a new project really upgraded our prototyping capabilities.
• Speak the same language. During the workshop we realized we were missing a shared internal vocabulary for our UI elements. That we still needed to work on.
• Naming matters. When naming interactive elements terms like “Job check” or “Job finder”are not in the average person’s vocabulary. Using simple descriptive language our users use themselves was key to influencing behavior throughout the interface.