Portfolio of Christina Fowler

When I stepped into the role of Head of Design, we had a newly created design system that had been designed in isolation by a team of UI designers. The lead designer on the design system also left as I stepped up and I found there were a number of challenges:

• Designers within product teams had not been consulted as to which components would be designed or built first.
• Some designers were not using the design system at all as they felt so detached from it.
• No one knew how to submit or request new components to grow the design system.
• We were paying for Zeroheight to power design.bca.com however, it had been in "Beta" for almost a year and was not shared outside of the design team.
• Many development teams were also not using the React.js UI library code snippets and were building everything from scratch wasting time and money.

Design System Improvements

I first focused on ensuring that all designers were contributing to the Figma design system. Every two weeks the design team bring together any new components they have designed and we vote on which of the new components would be useful for the design system.

I took charge of design.bca.com and ensured that all the connections to Figma and Storybook worked correctly and the navigation was easier to use. I also built a new component gallery to allow designers and devs alike to easily find the component that they need.

Three months after I took over the design system, I presented design.bca.com at the company Town Hall to help create awareness and kick start discussions with any tech teams that don’t have designers. I then began to reach out to dev teams across BCA and Constellation Automotive Group to improve awareness of the new design system and encourage usage, especially within teams who do not have design resource.

UI Library Priorities

Once design.bca.com had been communicated out to the business, I held a workshop to bring together lots of teams that have an interest in the UI library and get their feedback.

UI library developers, product designers, product owners and project developers were all invited to have their say on what should be the day to day priorities for the UI library devs.

The results of this workshop were a clearly defined set of priorities for the types of tasks that appear, alignment with the design team’s project priority list and new rules of engagement for the UI library team.

We now had a clear set of priorities for the UI Library team to follow and some rules for extrernal teams to follow when it came to requesting new components or visual changes.

Finally, I led a monthly show & tell to ensure that POs and developers alike were aware of all the work that was happening in the UI Library. What components were coming up, what upgrades would be available soon and what was in the backlog waiting to be picked up.

White Label Themes

One of the big benefits of the new design system that had been created by my predecessor was it's potential to have themes applied. The collection of pre-designed UI elements and components had been designed to be reused across multiple design projects, including non-BCA brands.

I tested the scalability of the design system using theming to match the branding of partner organisations. The newly branded components were then available to designers in Figma, and also to project developers through the React.js UI library ensuring consistent quality across all products.

Next steps

The future of the BCA design system is to expand into mobile using React Native and ensuring that as many mobile products as possible are sharing code as well as design components.

I am currently recruiting for a lead designer to take over the design system. It will be their responsibility to lead the UI library team and ensure focus shifts on building new components and improved support for mobile products.