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 toolfree app to publish wait times in real time

• Library of infographics repository of templates and instructions

• Polling place reportingaccounting and reconciliation in real time using Google sheets

• SMS toolsfor sending updates on elections

• (Video 101) How to create videosshort, targeted voter education, for use on social media or web

• Future Vote Initiativeyear-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 boxforms, templates, scripts for community groups

• Web site templatethe 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)

DiscoverFind the site and learn what is here

ExploreLearn about the the tools and compare to your needs. Making a decision based on deeper understanding.

UseDecision made! Now it's time to get to work.

RecommendSuggest 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 presentationsGoals: Samples of good video and images or clips to use

Technical decision-maker

Role: Decide on tools for web siteGoals: Evaluate a new technology to use for the elections office

Voter education coordinator

Role: CommunicationsGoals: Find ideas for ways to communicate upcoming deadlines to voters

Deputy clerk

Role: Make the office in a small county run on a low budgetGoals: A tool she can afford to automate election night reporting

Supervisor of elections

Role: Keep up with new ideasGoals: Try out a tool found on a neighboring jurisdiction's site or heard about at a conference

Media representative

Role: Keep elections in the newsGoals: Try out a tool found on a neighboring jurisdiction's site

Elections staffer

Role: Write voter informationGoals: Find illustrations to help low literacy voters through the polling place

Communications staff

Role: Manage social mediaGoals: Get help using a wide variety of social media effectively.

Outreach coordinator

Role: Outreach to local collegesGoals: 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 candidatesGoals: 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 outreachGoals: Looking for materials to use in presentations at local schools about voting

School teacher

Role: Civics educationGoals: Looking for activities to get her students involved that can be part of their service learning requirements

Reporter

Role: Local government reportingGoals: 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 pagesWhat 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 DescriptionWhy 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..PrinterPDFGoogle DocEvernote

Wow Factor

Description: 3 bullets

Instructions

Discussion

More/related resources

Share buttons

Get started


The home pageHow 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 toolsHow 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 siteWhat 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 exercisesAbout 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

Resourceshttp://www.businessballs.com/free-team-building-activities.htm#teacoffeegame)

http://www.businessballs.com/free-team-building-activities.htm#teacoffeegame)


Design technique: Roles and user storiesWho 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

http://www.usability.gov/how-to-and-tools/methods/personas.html


Design technique: Persona walk-throughThe 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 Redishhttp://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 Chisnelland 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

http://redish.net/blog/item/52-review-your-web-site-through-personas-and-conversations

http://assets.aarp.org/www.aarp.org_/articles/research/oww/AARP-50Sites.pdf

http://www.wqusability.com/articles/how to look at a form.pdf


Design technique: card sortingCard 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.govwww.usability.gov/how-to-and-tools/methods/card-sorting.html

• Card sorting software – Optimal Sortwww.optimalworkshop.com/optimalsort

• Card Sorting – Book by Donna Spencerrosenfeldmedia.com/books/card-sorting/

Images of card sortingin groups, individual and a completed view.

http://www.usability.gov/how-to-and-tools/methods/card-sorting.html

http://www.optimalworkshop.com/optimalsort

http://rosenfeldmedia.com/books/card-sorting/

Civic Engagement Toolkit - Design Workshop

Government & Nonprofit

Transcript of Civic Engagement Toolkit - Design Workshop