Maintaining a layered, evolving design system for a growing financial institution.
Project Captivate is the title of an atomic design system I helped create during my time at Two Bulls. It’s custom built for Lord Abbett, a growing international financial investment firm. As their reach expanded, they looked to build a robust online brand presence to share their philosophy, approach, and offerings.
Over time, I designed 200+ web components and collaborated closely with developers to launch them, all while evangelizing to earn our clients’ trust.
lordabbett.com hosts thought leadership, portfolio information, and up to date insights on ever-shifting market forces. They planned to publish scores of new webpages as soon as possible. Quick growth was expected.
The design system is used to build the following website ↓
We partnered with Lord Abbett developers to build a toolkit of reusable custom components. These simple “building blocks” allowed their in-house content team to spin up new webpages on the fly using AEM.
Some examples of the ‘building block’ components:
Reusability was the core of our strategy.
Reusable components and templates meant the Lord Abbett team could publish polished, final webpages with little to no hands-on work from designers, saving them time and money.
Each component was a balance of brand recognition and generic-ness. We usually designed with general content patterns in mind rather than any specific copy. With this approach we could design 5 headers that serve 200+ news stories, for example. Over time we created a large library that even non-designers could draw from.
We used an atomic design methodology to create a shared language, which helped us get on the same page with developers.
When developers knew a Block or Element was intended to be reused, they could build with that in mind. The tech debt we avoided with this coordination made everyone’s lives easier.
The atomic mental model communicated structure. Every component could be broken down to its base elements, which could be as simple as spacing, fonts, and colors.
Over time we created a ‘lego box’ of UI pieces for the development and design teams. With some imagination, anything could be wrapped and published in the style of Lord Abbett.
Outcomes ↓
During this project, we launched 200+ AEM components. The team of editors has grown to dozens, and the live website attracts thousands of daily users.
I learned to design within a system – reusing as much as possible, and only introducing new elements if the situation truly required it. It 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. The main constraint in this project was time – I worked with a large team of developers, so my value as a designer needed to be immediately realized. I gained valuable experience collaborating with my team on delivering quick + effectively.
