Lord Abbett is a rapidly-growing investment firm. As their reach expands, so did the need to share their philosophy, approach, and offerings. They looked to build a robust online brand presence through a large, global website – powered by a CMS.

Two Bulls was helping them build that through an atomic design system, titled “Project Captivate”.

Role

Designer

Timeline

2020 – 2021

Partners & Team

Lord Abbett, Two Bulls

Teammates

Alex Crandall, Spencer Hill, Sam Winfield

lordabbett.com hosts thought leadership, portfolio information, and up to date insights on ever-shifting market forces.

When I joined the Two Bulls team the design system was mature, already in use to build this ↓ website.

Lord Abbett planned to publish lots of new webpages ASAP. Quick growth was expected.

To help them achieve that, our designers partnered with in-house developers to build a toolkit of reusable custom AEM components. These “building blocks” allowed their content team to spin up new webpages on the fly.

Some examples of the ‘building blocks’ of Lord Abbett’s online presence

We used atomic design methodology to drive our approach and a shared language helped us talk about it with developers.

‘At a component level’ we could prepare reusable ‘elements’, which were written in code using ‘tokens’.

Reusability was at the core of our strategy. Over time we built ourselves a ‘lego box’ of interface blocks. With a bit of creativity, any UI element could be designed in the style of Lord Abbett.

Buttons, header fonts, link fonts, pills, etc. were used across components. As designers, that allows us to make a decision only once about what the brand ‘feels’ like – which frees up our focus for bigger things.

As viewers, repeated elements subconsciously reinforce the idea of the brand. Eventually, it only takes a glance to know you’re reading Lord Abbett.

The atomic mental model communicated structure. Every component could be broken down to its base elements, which could be as simple as colors and fonts.

I learned to design with the pieces of our system - reusing as much as possible, and introducing new elements only when/if the need arose.

Building with this design system was a constant trade off between brand and engineering. Essential brand moments couldn’t be too complicated when we had hundreds of components to build.

Overall, this was great experience maintaining and using a design system. I acted as the shepherd and evangelist of this system to a team of engineers and our stakeholders. Communicating the theory to others was a lot of education and presentation. I’m grateful to have been on the team at Two Bulls ツ

Part 2

Designing the team

We were building dozens of components each month, each of which required us to make a time consuming redline document.

There was a glaring problem, though. The redline document format we used wasn’t really cutting it.

The templates we used made it hard to include all the detail developers needed to know.

It left designers explaining important information in Zeplin comments and 5-minute Zoom calls.

The original format for redline (in our case, blueline) documents.

To bridge the gap between design and development, I redesigned the format for our handoff documents.

The redesign created space to explain in detail, so less got lost in translation.

Addition of right rail - shown in red

Added a column to explain relevant details that are required for the build.

That allowed us to include type / color styles and write detailed explanations, reducing need for extra meetings.

I also built new tools to speed up the workflow for my design team.

‘Atomic level’ iconography

Icons signifying “levels” allowed us to more easily show how we intended to build reusabile pieces of our system.

Essential-info checklist

A list that helped our design team make sure to include the information developers needed most.

The list was compiled by auditing previous handoffs and Q&As with developers.

‘Breakdown tools’ stickersheet

A collection of well-crafted Figma components helped our team mock things up just a little quicker.

The redesign had structure to get us started quickly & flexibility to let us explain details when we needed.

After this format was adopted, collaboration between designers and developers got a lot simpler.

Project Captivate

The design system

Designing the team

Wanna get in touch?
Don't be shy. Say hello.

Project Captivate

The design system

Designing the team

Wanna get in touch?Don't be shy. Say hello.

Wanna get in touch?
Don't be shy. Say hello.