A Design System for 15+ products

Description

My first big dive into Design Systems was with SDU, a leading publisher in legal content. They needed a Design System to make developing their 15+ digital products faster and more scalable. We started with a "Design System Takeoff" to figure out everything needed to build a custom, scalable Design System. Over nine months, I worked with a team of three other developers, two designers, and two researchers. We chose one of SDU's products (NDFR) to rebuild first. This hands-on approach let us see how our components performed in real-life situations and where we needed to make improvements. The system was built with React, TypeScript, Apollo, GraphQL, and styled components, complete with unit tests for all components.

Business and User Outcome

Implementing the Titan Design System allowed SDU to develop their digital products more efficiently and scalably. Our biggest win was making the system flexible enough to cater to 15 different products without needing to create custom components for each. This approach meant everything we built had to deliver real customer value. It led to a lot of brainstorming sessions, creativity, and hackathons with various teams at SDU.

Biggest Challenge

The main challenge was creating a design system that worked for 15 different products, making limitation our strength. We aimed to strip everything back to its core, only building what was necessary to deliver value to the customer. This required a lot of collaboration, creativity, and discussions with different teams within SDU. Another technical challenge was ensuring the Design System supported Internet Explorer 11, as many of SDU's existing customers used IE 11 in their practices.

What I've Learned

This project taught me the huge difference between developing a product and setting up context-independent design system components. It requires a unique way of thinking and a special vision for code. This mindset and vision have stayed with me over the years and continue to help me every day in my work. Supporting Internet Explorer 11 while pushing forward with modern development practices was a significant challenge, but we managed it successfully.

Hard Skills

• React / TypeScript
• Apollo / GraphQL
• Styled Components
• Unit Testing
• Design System Development

Soft Skills

• Collaboration: Working effectively across teams to find universal solutions.
• Strategic Thinking: Developing scalable components that could be adapted across multiple products.
• Problem-Solving: Addressing the technical challenge of supporting outdated browsers while maintaining modern standards.