Chief’s Content Design System
Chief’s first content design system, built to define and align content design practices across the digital platform while educating and empowering product designers and engineers to write their own microcopy.
A lil’ background first
Role
Sole owner of this project. Responsible for:
all work included in content design system
implementation of guidelines in net-new work
education around how to use the system
I was the first content designer at Chief, and with that, comes a lack of a content design system. They were a digital experience rooted in copywriting practices, instead of UX writing practices, and product designers were expected to write the content for their projects. Mix this together and you have an inconsistent, silo’d, and disjointed experience.
Stakeholders
I collaborated and reviewed with various partners:
Engineering manager
5 front end engineers
2 product designers
Director of design
Duration
6 months
As a living document, changes have been made as the design system advances.
Constraints
6 months, though as a living document, changes have been made as the design system advances
The research and work
Things considered
Our member base was vast, and rapidly expanding. We’d just launched nationally and were moving quickly into the UK market space, with the intention of going into Canada and Ireland next.
The system needed to account for localizable currency, spelling, language (specifically French-Canadian), and cultural differences.
Rooted in my knowledge of localization, accessibility, and inclusion best practices alongside extensive research, the Chief Content Design System was born. While Chief only expanded to the UK at the time, the content design system was built with broader expansion in mind.
Included in the work
This was no simple job, and the deliverables included:
Education-focused home page to empower non-content designers
Four extensive libraries including localization, emojis, buttons, errors, and iconography
Guidelines for components, content patterns, voice and tone, and more
Challenges and hiccups
The biggest challenge for this process was getting all of our engineers aligned on the changes I recommended. Educating them of the system was easy, but there were a lot of opinions on the best way to implement.
If I could do it again, I’d get EM buy in to have a dedicated engineering resource to create an implementation plan.
Ada Interface System
Chief’s first design system focused on designing, building, and maintaining UI components that meet AA accessibility standards to ensure our designs are inclusive for all.
A lil’ background first
Role
Content design manager accountable for:
all the component’s content guidelines
voice and tone standards
inclusivity, localization and accessibility guidelines
Chief had no design system, causing user experience problems across the platform, including accessibility, consistency, and code quality concerns. This lead to the overall member sentiment that our membership didn’t meet our lux price tag.
Team
1 product manager
1 engineering manager
2 product designers
1 content designer (me!)
1 UX engineer
Duration
Ongoing, with our first launch happening within a year time frame.
Constraints
This project, at first, wasn’t fully prioritized by our executive leadership team. It took some convincing, but we finally managed to hire a UX engineer to implement the design work that was done.
The research and work
Things considered
Implementing a design system is a challenge, no matter the company size. This was a scrappy team of six (on a good day) that were trying to transform the look, feel, and tone of Chief.
No one on the team was soley dedicated to this project, and due to limited resourcing and time, prioritizing based on where we could make the most impact was crucial.
Working as a content designer for a design system can be challenging—if you don’t know the right ways to incorporate your work. Luckily for me, this cross-functional team had no reservations to the endless component guidelines, content patterns, and libraries full of error messages, input masking, and aria labels I brought to the table.
Included in the work
This work is still ongoing, but so far:
Content guidelines for each design pattern and component that are inclusive and accessible, including aria labels where appropriate
Inclusive language library and accessibility best practices
Grab-and-go messaging libraries including buttons, errors, modals, and toasts
Challenges and hiccups
Buy in, in a time where our ELT wanted to rapidly expand and build net-new features, was challenging. There was a lot of wins (and loses) when it came to negotiation for design system resources, with our biggest being our UX engineer hire.
If I could do it again, I’d map out (visually) how small changes could impact our platform, and test it with our members to show metrics of impact.
