CivicMakers

Aug '15 – Present | Visual, Product Design

Background

CivicMakers is a platform that empowers the civic tech community and democracy practitioners to share, discover, and create solutions for better civic engagement and collective governance. Part services directory, part collaboration community, the knowledge sharing platform presents online tools and social technologies to makes it easy for developers to find users and clients, and for practitioners to identify the right solutions and find partners for their projects.

I joined the project team through Code for America's San Francisco chapter to lead the visual design of CivicMakers' first release, a functional MVP that we'd use to gather feedback and iterate on. I also supported Chris Palmatier, the lead UX designer, with feedback and alternative solutions to the UX as the requirements for the MVP shifted.

Links

My Role

Visual Designer, UX Designer (supporting)

Other Contributors

1 Lead UX Designer, 1 PM, 6 Engineers

Process

Lawrence (Grodeska, the PM) and Chris had wireframes for the MVP by the time I joined the team. The MVP included Project pages (case studies of civic tech projects including tools used, and a Q&A), Tools pages (descriptions and reviews of tools used, or open-source tools created as civic tech projects), and a Homepage (an index page).

I made some adjustments to the layout, like:

Removing cover images from Story pages as it forced important content further down the page

Shrinking and moving the icon on the Tool page

Stripping extraneous fields from the sidebars for the Tool and Story pages since it made the input forms longer and I wanted to keep the sidebar to key information as it would be at the top of the visual hierarchy on mobile devices

For the visual design, I used the results from a word association exercise to figure out the core message of the product, and got team members to collect and comment on other sites and groups whose branding they liked and why.

Designs

I clustered the words from the exercise, and the key attributes I wanted to convey were: openness, accessibility, action, participation, and optimism.

I chose Open Sans as the main font because it expresses friendliness (rounded shapes), tech-savvy (legible, clean, minimal), and openness (round shapes again, and that it's a Google web font).

For colours, I wanted to put a spin on the blue and red one normally associates with government. I kept the colours fairly close to convey the civic nature of the project, but made the red more orange to express creativity, and used it for the primary actions rather than the blue to emphasise action and participation.

The elements are mostly rounded or circles, and I emphasised images of people to highlight the participatory nature of the platform.

Next Steps

I'll be gathering feedback on the prototype and refining the visual design based on that. Some things I'm watching out for now:

If the Q&A section is high enough in the page hierarchy

How to manage long descriptions to make them feel less heavy (depending on how long the descriptions people enter are)

How tightly tools and stories should be linked – are people looking through stories for tools? The other way around?

I'm also working on a CivicMakers logo, and designs for later releases of the product when features like Reviews, Similar Tools, and Projects Using This Tool are added (if they're validated as needs).

Mockup of future functionality in the tools page, with the original right sidebar.