Using design systems to empower distributed teams

Code For America is a non-profit organisation that envisions a government by the people, for the people, that works in the 21st century. Through initiatives like their Fellowship program and Civic Startups, they encourage innovation at the local government level.

Their website needs to be able to explain what’s on offer and have the ability to expand as more local governments get involved and more initiatives are rolled out. They approached Clearleft to help them in their redesign.

Designing systems, not pages

It was very clear to everyone involved that simply designing and developing a set of pages wouldn’t scale well. What was really needed was a system of modular components from which many page types could be assembled.

Oh, and everything has to work on mobile devices as well as tablets, laptops and desktop computers.

This modular approach is exactly the kind of thing that we like getting stuck into at Clearleft, and we build responsively by default, so this was right up our alley.

We chose to work with Clearleft because they develop a pattern portfolio (a pattern/style library) which would allow us to scale our work to our Brigades. This unique approach has aligned perfectly with our work style and decentralized organizational structure.

Front-end styleguide

The final deliverable for Code For America was a front-end styleguide: a well-documented collection of patterns and templates in HTML, CSS, and a little smattering of JavaScript.

From the smallest components like buttons and links, right up to a grid system for page layouts, everything retains the Code For America look’n’feel through consistent use of colour, typography and whitespace.

Armed with this arsenal of modular components, the Code For America team began to roll out their redesign step-by-step.

Content communication

Code For America are based in San Francisco. Clearleft are based in Brighton. Those awkward facts of geography didn’t stop us communicating constantly throughout the project.

Every day at 9:30am San Francisco time—5:30pm Brighton time—we had a quick “stand up” meeting via conference call. This ensured that there were never any unexpected surprises along the way—everyone involved knew exactly how things were going at all times.

Code For America is a non-profit organisation that envisions a government by the people, for the people, that works in the 21st century. Through initiatives like their Fellowship program and Civic Startups, they encourage innovation at the local government level.

Their website needs to be able to explain what’s on offer and have the ability to expand as more local governments get involved and more initiatives are rolled out. They approached Clearleft to help them in their redesign.

Designing systems, not pages

It was very clear to everyone involved that simply designing and developing a set of pages wouldn’t scale well. What was really needed was a system of modular components from which many page types could be assembled.

Oh, and everything has to work on mobile devices as well as tablets, laptops and desktop computers.

This modular approach is exactly the kind of thing that we like getting stuck into at Clearleft, and we build responsively by default, so this was right up our alley.

We chose to work with Clearleft because they develop a pattern portfolio (a pattern/style library) which would allow us to scale our work to our Brigades. This unique approach has aligned perfectly with our work style and decentralized organizational structure.

Initial Exploration

Armed with a new brand direction and some initial user research and sketches from the team at CfA, we began to explore how the brand language might manifest itself digitally. We created a few element collages, which are like higher-fidelity mood boards that look at the interplay between both fictional and existing user interface elements. These element collages help lay the base styles of the eventual site design.

Front-end styleguide

The final deliverable for Code For America was a front-end styleguide: a well-documented collection of patterns and templates in HTML, CSS, and a little smattering of JavaScript.

From the smallest components like buttons and links, right up to a grid system for page layouts, everything retains the Code For America look’n’feel through consistent use of colour, typography and whitespace.

Armed with this arsenal of modular components, the Code For America team began to roll out their redesign step-by-step.

Content communication

Code For America are based in San Francisco. Clearleft are based in Brighton. Those awkward facts of geography didn’t stop us communicating constantly throughout the project.

Every day at 9:30am San Francisco time—5:30pm Brighton time—we had a quick “stand up” meeting via conference call. This ensured that there were never any unexpected surprises along the way—everyone involved knew exactly how things were going at all times.