Adrienne Tilley

CIVIC Case Study 2017

I volunteered as a designer and design teacher with Hack Oregon for about two and a half years, working on a variety of data projects. The last one was branding and product design for their platform, CIVIC.

A final mockup of the landing page
A final mockup of the landing page

The Problem

Hack Oregon had been building a custom site for every volunteer project. They wanted one platform that kept styles consistent, was easier to use and develop, and made it easier to see past projects and build on what had already been learned. For the first version, teams paired with Portland city bureaus would publish collections of data insights.

Role and Team

The platform started with another volunteer designer working as co-leads to define the product and branding over a month or two. I focused on the architecture and how components would behave; the other designer focused on final visual design, and we made the logo together.

I also stepped in as lead designer for the Housing bureau project near the end, mainly turning their data insights into UI.

Users and Audience

The people of Portland and Oregon: giving them access to public data and the power to understand it themselves, with teams pulling stories out of the data for everyday citizens. The long-term goal was a platform other U.S. cities could use with their own government data, so we kept the components flexible even though that was out of scope for V1.

Design Process

Requirements: Scope, personas and requirements came out of the workshop, with direction from Hack Oregon’s Executive Director.

Wireframing & branding: We started with a rough skeleton of the interface. After the workshop, we wireframed how custom pages could be modular and started on branding, with only the name CIVIC to go on.

First rough wireframes
First rough wireframes

Visual & interactive design: After presenting wireframes to stakeholders and the tech team, we moved into visual design and tried out some mobile interactions. As the deadline got close, we put together branding guidelines (including data viz best practices, since many teams had no designer with data experience) and documentation for the developers building the platform.

Prototype created in Framer to get an idea of how some mobile interactivity could behave
Prototype created in Framer to get an idea of how some mobile interactivity could behave

You can see snippets of the branding guide below, or the entire PDF here.

Housing Project

I also helped the housing team with their data insights, since they didn’t have a senior designer. It showed us where the platform needed more flexibility for teams.

Initial wireframes with data insights provided by team data scientist
Initial wireframes with data insights provided by team data scientist
Final designs for the housing project, pared down to meet deadlines
Final designs for the housing project, pared down to meet deadlines

Outcome

Hack Oregon runs in seasons that end with a big presentation, so the deadline was hard and the pressure was high. The result needed polish and a lot of the backend was still to come, but the projects were received really well.

Issues Faced

The timeline was too squished: about 3 months of data grooming and dev time, with everyone volunteering 5–10 hours a week. Still, we laid a good foundation, and it was the first season working with the city bureaus.