Six months into an 18-month contract, our digital design team, known for their expertise, heard rumblings that Marketing had contracted with an external agency to rebrand the organization. Despite our Digital Design (product) team’s requests to be involved, knowing that we would be responsible for it in the long run, Marketing kept it under wraps for another six months.
Eventually, we learned some of the underpinnings behind the engagement. The new Marketing Director had a preexisting relationship with the external agency and negotiated a lean scope of work to close the contract.
The finer points proved to be a challenge. We found that only marketing pages would be rebranded. The agency purchased an independent UI Kit with prefab templates, but they had limited design system experience. The site would be built in React on Drupal.
At the time, our Digital Design team had a fully-fledged design system, supporting six primary products and service lines and 40+ designers and developers. To make matters worse, BJC was an Angular shop.
In the final four weeks of the rebrand work, we received a few materials, like brand guidelines, a color palette, and a preliminary Homepage design. At a cursory glance, we had two new font families (one serif, one sans-serif), six stand-alone colors, and no design file(s) to work from.
Of course, the new marketing site was well into development, and the proposed launch date was fast approaching. With little time to waste, we conducted a preliminary audit of our existing DNA design system to understand what we would need, either from the third-party agency or created intuitively by our team based on their supplied brief.
After a thorough investigation, and as more agency materials passed hands, we realized there would be no opportunity for reuse of our previous design system. An all-new brand architecture and system design would have to be generated.
Fortunately, a core group of designers, including myself, heavily contributed to the previous design system, providing a solid foundation for our work. We also anticipated the need for DNA to be an agnostic design system, given the marketing React site and the Angular product development. Our foresight allowed us to build a system that would Be cost-effective and maintain brand integrity across applications.
After weeks of preparation, scoping, estimating, and reviewing proposals, we convinced BJC leadership to add me full-time, along with four new developers and a dedicated product owner. To fill that kind of burst, we brought on additional Daugherty consultants.
In just six months, we built a token-based architecture from scratch to support our new core theme, brand essentials, components, and content templates. This rapid progress is a testament to our team's efficiency and dedication to the project.
While our planning, diagrams, and collaboration were done between Teams, Jira, Excel, and Figjam, our DNA design system work was a balance between Figma, Figma Token Studio, Visual Studio, Github, and Storybook. We also created training materials and held regular workshops, onboarding product designers and developers so there would be no downtime during handoff.
STYLES & TOKENS (6 weeks)
- Colors & Gradients
- Typography
- Shadows & Blurs
- Dividers
- Grids & Spacing
BRAND ESSENTIALS (4 weeks)
- Logos
- Favicon
- Iconography (4 sets)
COMPONENTS (16-18 weeks; some overlap)
- Alerts (2 sets)
- Avatars (4 sets)
- Buttons (10 sets)
- Cards (15 sets)
- Chips (4 sets)
- Content Templates (9 sets)
- Inputs (10 sets)
- Image & Illustration Sets (2 sets)
- Lists, Menus & Pickers (10 sets)
- Navigation (14 sets)
- Progress Indicators (5 sets)