Civic Engagement Toolkit - Design Workshop

1 | Civic Engagement Toolkit – Jan 2016 workshop
Civic Engagement Toolkit for Election Officials
Report from the Design Workshop
January 22, 2016
Hillsborough, FL

The Civic Engagement Toolkit
The toolkit is
• A web site to house a set of free tools that election officials
can use to increase civic engagement—turnout, voter
registration, smooth operations at the polling place.
• Shaped by direct input and priorities from election officials.

About the design workshop
The goal for this workshop was to explore the content and organization of the
site that houses the Civic Engagement Toolkit.
This information will provide input to the design of the information
architecture, which includes the:
• organization of the information
• placement and hierarchy of information elements on the page
• length and type of information elements
An additional goal was to discuss details about how election officials can use
and contribute to the Toolkit.

Who was there?
Hillsborough County, FL (hosts)
• Craig Latimer
• Gerri Kramer
• Hannah Prince
Other election officials
• Noah Praetz, Cook County, IL
• Kammi Foote, Inyo County, CA
• Chris Moore, Leon County, FL
• Tim Tsujii, Guilford County, NC
• Kristine Grill, Ramsey County, MN
Center for Technology and Civic Life
• Tiana Epps-Johnson
• Whitney May
• Kurt Sampsel
Center for Civic Design
• Whitney Quesenbery
• Nancy Frishberg
• Drew Davies

What did we do?
The day consisted of a series of group exercises to work through different input
needed for the Toolkit website design.
• Introduction to organising information
An exercise called "Tea, coffee, and ..."
• Design challenge 1: Who are the users?
Brainstorming who might use the site and why
• Design challenge 2: What information is included for each tool?
Selecting and organizing types of content
• Design challenge 3: What is on the home page to help review all of the tools?
Creating a visual look and density of details about the tools on the home page.
• Design challenge 4: What other information does the site have to contain?
Discussing other pages, including news posts, subscribing options, and sharing

The top concepts
• Line length publishing tool
free app to publish wait times in real
time
• Library of infographics
repository of templates and
instructions
• Polling place reporting
accounting and reconciliation in real
time using Google sheets
• SMS tools
for sending updates on elections
• (Video 101) How to create videos
short, targeted voter education, for
use on social media or web
• Future Vote Initiative
year-round program to engage middle-
high school students
• How to manage social media – tools
and campaign templates
• How to use web analytics
more effectively
• Icon library
images for all purposes elections
• Voter Registration Drive in a box
forms, templates, scripts for
community groups
• Web site template
the CTCL template
As input to the exercises, we used a list of the top tools concepts from the priorities
workshop in December 2015.

Who are the users?
Who will use the Toolkit
(and why)?

Who will use the site...and why?
We started with brainstorming about the different people who might use the site, and
what their goals for each visit might be.
• Who are they? What is their role within the elections office (or in relationship to
elections)?
• What is their goal overall? What problem are they trying to solve?
• How did they find or reach the site?
• What is their immediate need in using the site?
These mini-personas helped us think about different ways people might use the site.

Different modes of using the Toolkit
How did they get
to the site
Searching
(keywords)
Following a
recommendation
(“word of mouth”)
or links
Going back to learn
more (bookmark)
Discover
Find the site and learn what is here
Explore
Learn about the the tools and compare to your
needs. Making a decision based on deeper
understanding.
Use
Decision made! Now it's time to get to work.
Recommend
Suggest the tool to others (within your organizion
or more broadly).

People who might use the site - roles
In the election office
• Director
• Outreach or engagement
director
• General staff
• Web or IT specialist
• Intern
Each might have a specific goal or be
looking for more general ideas.
All of them might visit the site
several times with evolving goals.
Outside the elections office
• IT person – Skeptical, needs to be
"won over". Does not report to
elections office.
• Candidate or party rep – looking
for ways to work with election
office
• Teacher – history or civics teacher
looking for class materials
• Voter/Advocate – looking for
solutions to suggest to elections
department

Samples of the "roles and goals" brainstorming
Users from elections offices
Election office videographer
Role: Create successful video
presentations
Goals: Samples of good video
and images or clips to use
Technical decision-maker
Role: Decide on tools for web
site
Goals: Evaluate a new
technology to use for the
elections office
Voter education coordinator
Role: Communications
Goals: Find ideas for ways to
communicate upcoming
deadlines to voters
Deputy clerk
Role: Make the office in a small
county run on a low budget
Goals: A tool she can afford to
automate election night
reporting
Supervisor of elections
Role: Keep up with new ideas
Goals: Try out a tool found on
a neighboring jurisdiction's site
or heard about at a conference
Media representative
Role: Keep elections in
the news
Goals: Try out a tool
found on a neighboring
jurisdiction's site
Elections staffer
Role: Write voter information
Goals: Find illustrations to help
low literacy voters through the
polling place
Communications staff
Role: Manage social
media
Goals: Get help using a
wide variety of social
media effectively.
Outreach coordinator
Role: Outreach to local
colleges
Goals: Set up a campaign
to remind students
about elections

Samples of the "roles and goals" brainstorming
Other potential users
Candidate or party representative
Role: Register voters who might support their
candidates
Goals: Run a voter registration drive and be
sure they are following all of the rules
Poll worker team member
Role: Interested in improving elections and
making sure there enough people to work in
her polling place.
Goals: Looking for a way that she can recruit
more (and better) pollworkers. She want to
recommend it to the elections office, and be
part of it as a volunteer.
County official
Role: Communications and outreach
Goals: Looking for materials to use in
presentations at local schools about voting
School teacher
Role: Civics education
Goals: Looking for activities to get her
students involved that can be part of their
service learning requirements
Reporter
Role: Local government reporting
Goals: Pitch a story to their editor about
what's happening around the state in the
upcoming election
Voter
Role: Speaking up!
Goals: Share an idea with their election
officials

The tools pages
What information is
included for each tool?

Design concept: The "tool" page content
For the next exercise, we looked at the information about an individual tool in the
toolkit. Thinking about the different people (and their roles and goals) who might read
this page, we explored:
• What types of information on the page?
• What information do users need? On a first visit? On a second+ visit?
• How is the information communicated (short text, image, icons....)
• How might the chunks of information be arranged on the page?
• What might users need to do with the information?

Design concept
Tool page content
#1
Image/Photo Title
Attribution
(who contributed)
# of Voters
(range for size)
Kind of jurisdiction
(urban, suburban, rural)
Short Description
Why would I use this?
When would I use this?
What you will need:
# hours, # people, software, hardware, skills
How to do this
(steps)
Email, Print,
Download, Save
FAQ list
(could replace some
attribution points)
Contact button
(email? moderated?)
May change
as tools are
widely
adopted
Share
buttons
Reviews
(moderated)
Rate this
# of stars?
check mark?
grade?
Favorite?
Fill in bubble?
Metatags

Design concept
Tool page content
#2
Icon Title
Problem solved
Icons/Indicators for:
Cost # Time Committment Geek factor
Send to..
Printer
PDF
Google Doc
Evernote
Wow
Factor
Description: 3 bullets
Instructions
Discussion
More/related
resources
Share
buttons
Get
started

The home page
How do users review and
select a tool

Inspirations: Recipes, Lynda.com, Pinterest
Several people came up with the idea of using "tiles" on the home page to represent
each of the tools, so they are attractive and easy to click on. Tiles can also hold more
information than a simple text links.

Concepts for how to present individual tools
Everyone sketched a
sample of a tile for an
individual tool to share
ideas about:
• What information
to include
• Formatting
• How to highlight
what’s visible

Ideas from the exercise
Common elements
• Image or design element
(challenge with the non-visual
nature of some tools)
• Title
(must be both attractive and
accurate)
• Short description
(is it needed if the title is good?
how many words?)
• Tags or keywords
• Rating
(could be # of likes or downloads)
Interactions. Click on a tool (or
button on the tile) to:
• Open it
• See more details about it
(tile flips or expands)
• See related tools
(list filters or sorts)
• Like or save it for later
(minimal interaction – icon
changes status)

Categories of tools
How should the tools be
tagged for filtering?

Flat navigation
The design goal is to create a very "flat" and efficient navigation, so tools are
just one click away from the home page.
Instead of drilling down through menu pages, users will select a tool from the
home page, either seeing it right away, or by sorting, filtering, or searching
the collection.

Finding a tool: Categories, tags, sort, or search
We discussed ways to narrow the list of tools to focus on a smaller group of
relevant items. This is not as important when the list is short, but will be more
critical as the list grows. Options included:
• Don't filter the lists of tools, just sort them so the closest matches are at
the top.
• Use search instead, and make sure that the descriptions include keywords.
• Have clear categories, based on common goals or types of tools, and
include an easy way to see only those tools.
• Tag all of the tools in invisible metadata and use the list of tags for search
or filter.
• Include a "show only tools like this one" function, avoiding the need to
explicitly name the categories.

The challenge of categories
It was hard to find coherent categories for the list of tools because
• Some of the tools can be used in many different ways, so fit into more than
one category
• Some of the tools were hard to describe at all
• Many of the categories seemed to include almost all of the tools

Possible tags or categories for tools
• Communicating with voters, Communication tools, Comunication
• Voters, Voter engagement, Voter outreach, Voter education
• Community outreach, Outreach, Serving your community
• Running elections, Smooth operations, Increase effficiency, Admin
• Polling places, Staff your polling place, Managing polling places, Polling
place resources, Polling place management, Lines. Poll worker
• Web, Manage the web, Web tools
• Social media, Mobile
• Graphics, Election graphics, Design
• Data, Display your data, Data management, Managing election data,
Measuring success, Visualizing your election, Statistics
• Partnerships, Programs
• Increase registration

How we grouped the tools ( 1)
Looking at the groups in a
similarity matrix, there are
some clusters of tools that
are often placed together.
• Future Vote Initiative,
Voter Registration Drive
• Icon Library, Infographics,
Video
• Social Media, SMS Tools
• Line Length Tool, Analytics
• Web site template
• Polling place reporting

How we grouped the tools (2)
The dendogram view shows the grouping as a tree. It start from individual tools
and shows how they are grouped together into larger and larger groups.
This information can be useful for identifying related tools to recommend or
categories for filtering.

The rest of the site
What other information
is included in the site?

Contacting someone about the Toolkit
The site will need a way to get in touch.
• General contact information: who runs this site?
• Learn more about a tool: ask questions, make comments, or ask to get in
touch with the people who created a tool
• Comment on a tool: add comments, recommendations, or a case study
• Request a tool: suggest something to add to the Toolkit
• Submit a tool: suggest a specific tool to be included
We think these will be a set of different forms, so we can ask for full details and
contact information to make the contact more efficient (and screen out spammers).
The Toolkit will not have its own social media sites, but will include links to help
people share it on social media

News, announcements, case studies
The site will also have a way to post news and other information:
• Announcements when new tools are available
• Case studies or stories about how the tools are being used and adapted
• Links to media coverage or articles about the Toolkit on other sites
• Mini how-to guides or answers to frequently asked questions
Posts – especially case studies or articles with tips or resources - will be connected to
the relevant tools, so they appear as links on the tool page as well as in the archive of
news and announcements

Subscribing
The Toolkit will be open to everyone to read and use, but we might offer a
subscription option so that people can add favorites or have access to submitting
comments.
The most important benefit of subscribing might be getting news and updates from
the site. The advantage to CTCL is easier policy-driven moderation of discussions
(rather than open posting by any visitor).

About the Toolkit
Information about the Toolkit includes:
• Background and general information
• Credit to funders and project team
• Partners and contributors
• And business info like accessibility, privacy, and other policies

The design exercises
About the exercises

Exercises from the UX design toolkit
All of the exercises we used in the workshop are used as part of UX design work.
The slides that follow have some background on them, and links to more resources.
• Tea and Coffee memory game
• Roles and user stories
• Persona-based walk-through
• Card sorting

Design exercise: Tea and Coffee memory game
1. Tea and coffee memory game
 Each person gives their order for preferred beverage in detail (“double latte in a small
cup, 2% milk,” “diet Coke, no ice,” …)
 All must listen without writing, and after everyone has made an order, each person
writes all choices.
 If the group is 4, most people can recall all; as it gets larger, it’s harder.
2. List of 16 items (read aloud)
 Listening to the list of 16 nouns stretches the capacity of most people’s recall.
 Knowing the list has 4 named categories each with 3 items makes recall easier.
 Seeing the items expressed as a table makes it even easier to remember.
Learnings
• Reminder that unstructured information is hard to remember.
• Structure can be conveyed verbally (aloud), through writing or layout.
• Each person remembers some; group likely can remember all accurately
Resources
http://www.businessballs.com/free-team-building-activities.htm#teacoffeegame)

Design technique: Roles and user stories
Who are the expected users of this website and the collection of tools?
Making these expectations explicit will help
 Name the tools
 Write the descriptions and instructions, create metadata and tags
 Evaluate whether each prospective user can find their way and get what they want
 Publicize the tools
Roles can include election officials, as well as others outside ROV office.
• One person might wear several hats – come to the site with different motivations
Goals can be expressed as the story of
• Why is this person coming to the site? (what’s their goal or motivation?)
• How did this person get here? (from a search engine? Word of mouth
recommendation?)
• What are a satisfying outcomes for this person? (download a tool? recommend?)
Notice the focus on behaviors in the roles (“create an effective social media
campaign”), rather than demographics (age, gender, socio-economic status)
Resources
• Personas
http://www.usability.gov/how-to-and-tools/methods/personas.html

Design technique: Persona walk-through
The idea behind a persona walk-through is that you use a persona (or a quick
description of a user and their goal) to review a design idea. This helps you think
about users, instead of just your own ideas.
It can be done at any time, from exploring early ideas to thinking about how real
people might use a completed site.
The results can be used to
• Explore how different people might try to find information or do something
• Look for gaps in terminology or missing features
• Think about what content or design helps people use a site successfully
Resources
• Review your web site through personas and conversations by Ginny Redish
http://redish.net/blog/item/52-review-your-web-site-through-personas-and-conversations
• Designing Web Sites for Older Results – A review of 50 web sites - Dana Chisnell
and Ginny Redish
(This is a big report, but the opening explains the technique well)
http://assets.aarp.org/www.aarp.org_/articles/research/oww/AARP-50Sites.pdf
• How to look at a form in a hurry (using a story to guide a review)
http://www.wqusability.com/articles/how%20to%20look%20at%20a%20form.pdf

Design technique: card sorting
Card sorting is a technique for exploring how users think
about information. It is a way to get input from users on the
site organization or "information architecture" and help
make a site more intuitive to navigate.
Card sorting focuses on terminology and concepts rather
than presentation, so it's a way to think about the content
and data on a site.
The results can be used to
• Identify content that users think of as a group
• See content groups and top labels
• See the most popular grouping strategies
Resources
• How to do card sorting – usability.gov
www.usability.gov/how-to-and-tools/methods/card-sorting.html
• Card sorting software – Optimal Sort
www.optimalworkshop.com/optimalsort
• Card Sorting – Book by Donna Spencer
rosenfeldmedia.com/books/card-sorting/
Images of card sorting
in groups, individual and a
completed view.

Civic Engagement Toolkit - Design Workshop

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (14)

Similar to Civic Engagement Toolkit - Design Workshop

Similar to Civic Engagement Toolkit - Design Workshop (20)

More from Center for Civic Design

More from Center for Civic Design (20)

Recently uploaded

Recently uploaded (20)

Civic Engagement Toolkit - Design Workshop