Bringing teams together through a design system
(and have more time for coffee too)
Designers today no longer work in silos: we collaborate with colleagues from diverse backgrounds to launch a website, a campaign, or ship a product more quickly to market.
When designers have to race against time to launch a campaign, we have little or no time to think about creative direction. Instead, we spend the bulk of our time creating visual elements in silos that result in inconsistent, non-unified design language. Other teams end up independently reinventing solutions, creating a disjointed experience for our users.
Having a design system can help us approach our design process in a more systematic way.
A design system is made up of a library of components which allows a team to use cohesive and stylized components to create a webpage or a campaign. You can think of these UI components as a bucket of Lego pieces that can be formed into all kinds of shapes.
Setting up a design system requires proper planning — usually with the Site Architect — and takes into consideration tech feasibility, time, and business requirements. In the case of my projects, some of the use cases are:
- Adapting designs to different campaigns needs;
- Having multiple teams work independently on the same campaign at the same time;
- Using repetitive modules in large parts of the campaign;
- Making frequent changes to copy and artwork;
- Scaling and evolving with business needs;
- Having limited time to ship out
homepages for 5 radio channel websites. Credit: SPH Design
Creating and maintaining a design system has its upsides and downsides, but these can be managed through proper planning and arriving at a common goal with your business units and team members.
Pros of setting up a design system
- Easy to maintain
- Consistent design language
- Saves time on repetitive work (that’s when you have time to connect with your colleagues over coffee)
- Reduce repetitive coding efforts
- Closer collaboration
Downsides
In one of the projects, our web developer estimated three weeks to build a component library, as compared to a three to five days’ effort in building a hard-coded campaign page from scratch. However, I worked out that we can reduce the hours of repetitive coding efforts per week (three to five days) to only one to two hours if we had a stored library of reusable codes.
As we work with changing needs, we occasionally run into one-off requests to design special modules. These modules became redundant after one campaign. With this as a learning point, I iterated with looser design guidelines that could cater to special requests.
With a design system, some modules typically look generic, yet we make sure the style guide can give designers creative freedom.
Delivery
Your design system should be accessible via the channels you are most comfortable with. At SPH Design, most of our designers are familiar with libraries in Sketch & Zeplin, and we use Google Slides for annotation. Other projects require our components to be compatible with WordPress.
Takeaway
A design system allows you to scale your design, ensuring seamless communication between project managers, designers, and developers. More critically, it allows you to push your campaign or product more quickly to market. Previously, we required three to five days of effort to build a campaign landing page. Today, our front-end developers can achieve hand-off within two hours using a design system.
The design system helps automate the campaign development process so marketing ideas can be rolled out more quickly
Some resources to help you get started:
