The document provides recommendations for improving the Queen Anne's County Board of Elections website. It summarizes goals for successful elections websites outlined by the PEW Center on the States, including answering key voter questions and providing easy-to-find, well-organized election information. Research methods like content analysis, card sorting, personas and wireframing were used to understand user needs and propose a new site information architecture and wireframes. The wireframes aim to guide users through tasks with clear navigation, content highlighting, and accessibility features. Search integration is also recommended, with features like spelling correction and query suggestions.
2. Board of Elections Website Goals
According to a 2008 report from the PEW Center on the States, elections websites may be “successful” if they can
achieve the following:
Answer three primary questions of prospective voters:
• How do I register to vote?
• Where is my polling place?
• What candidates and issues are on the ballot?
Provide information for the following primary tasks:
• Registering to vote or checking status of registration
• Learning about upcoming elections
• Obtaining information on volunteering for an election
Provide the above information in a way that is:
• Easy to find
• Well-organized and understandable for users
• Designed and coded for optimal accessibility
• Up-to-date and accurate
We have sought to address each of these areas in the following recommendations.
Source: “Being Online is Not Enough: State Elections Websites.” The PEW Center on the States. October 2008.
http://www.pewstates.org/uploadedFiles/PCS_Assets/2008/VIP_FINAL_101408_WEB.pdf
3. The Current Site – What Works, What Doesn’t
What Works…
• Site offers very comprehensive election information.
• Content is up-to-date.
• Site falls within first three Google search results.
What Doesn’t Work…
• Too many navigational items, which vary as the user goes
from page to page, are confusing to users.
• Reverse type and centered text on all internal pages is
difficult to read.
• Invalid, deprecated HTML markup and table structure
throughout the site impedes accessibility by visually
impaired users with assistive readers.
• Typos and broken links lessen the validity of the
information.
4. Research Methodology
The researchers used the following research methods to understand, test and propose the subsequent
recommendations:
Content Inventory
The researchers recorded and organized all website pages and files in the current website in order
to understand more deeply the breadth and depth of content and the manner in which
information is currently organized.
Card Sorting & Sitemap
Using the card sorting software WebSort, the researchers conducted 10 in-person open card sorts
and 36 online closed card sorts. The results were incorporated into the proposed sitemap.
Personas & Scenarios
The researchers developed personas and related scenarios to represent four specific target
audiences of the website.
Wireframing
A final step, the researchers developed two paths of wireframes for each of the main pages of the
site. Wireframe components were chosen to enhance site usability and support accessibility.
5. Wireframes
Based on the previous research, a selection of wireframes were created to represent the new information flow and to
produce an more usable web site.
• Build reusable layouts that can be expanded and enhanced for users as user and site needs change.
• Develop a wireframe approach that leads the users through the website to their desired destination
pages through:
– Large, task-oriented buttons and targeting global navigation on the homepage.
– Organized and descriptive sub-navigation previews on landing pages.
– Following detail page content, highlight boxes that help users learn about possible next steps.
• Construct site components that may be implemented using flat HTML files or a content management system.
6. Wireframes – Homepage
1) Logo: To be developed in accordance with 1
branding guidelines. Linked to homepage. 2
Displayed on all pages. 3
2) Utility Navigation: Links to landing pages for 4
each section (first is a homepage link). Displayed
on all pages.
5 6
3) Search: See following slide explanation.
Displayed on all pages.
4) Global Navigation: The five top tasks for users.
Local navigation expands as a drop down menu on
hover. Displayed on all pages.
5) Billboard: A static or rotating segment that
would highlight 1-3 highly important elections
actions. Entire billboard should be linked to
appropriate destination page. 7 8 9
6) Quick Links: Four customizable buttons linked to
the most popular user pages.
7) Upcoming Dates: A manually editable area to
highlight important upcoming dates.
8) Polling Place Finder: A Google map plugin. The
image is linked to the interactive “finder” page.
9) Board News: A manually editable area to
highlight important board actions and news.
10
10) Footer: Board address, administrative
information, and social media links. Displayed on
all pages.
See live page: www.carnaghan.net/qa/wireframes/index.html
7. Wireframes – Landing Page
All applicable elements noted previously, plus…
1) Global Navigation: When within a section, the respective 1
navigation element stays highlighted. 2 3
2) Breadcrumbs: Shows users’ location within the site. All non- 5
current elements are linked to their respective pages. Displays on
all pages except the homepage.
3) Tools: “Enlarge Text” link enlarges all body and navigation text
each time clicked. “Print Screen” prepares a printer-friendly
version of the page and queues the user’s default printer. Displays 4
on all pages except the homepage.
4) Local Navigation: Displays the applicable secondary and tertiary
navigation elements within the global navigation. Column displays
on all pages except the homepage.
5) Body Content: Contains a number of highlight elements
describing each sub category within the global navigation element.
A large button is linked to the respective detail page.
See live page: http://www.carnaghan.net/qa/wireframes/voting_registration.html
8. Wireframes – Detail Page
All applicable elements noted previously, plus…
1) Body Content: Displays all detail page content. Content
should be divided into sections with clear headings to make it
as scannable as possible. Images, if desired, may also be used 1
to illustrate the topic and provide visual interest.
2) Highlight Elements: Two manually editable content areas
that may hold information directed toward users. These
areas may contain important upcoming dates, links to other
popular or related pages, or special notes to users. They
should be kept short and scannable.
2
See live page:
http://www.carnaghan.net/qa/wireframes/vote_absentee.html
9. Wireframes – Polling Place Finder
All applicable detail-page elements noted
previously, plus…
1) Descriptive Body Content: A short area meant to explain
how to use the polling place finder. Upon completing a
search, this content would display the search results, including 1
the location’s address, phone number, hours, wheelchair
accessibility, parking availability, and vending machine 2
information.
2) Address Field: An entry field for street address. Upon
3
entering an address and clicking “Look up”, the address’ local
polling place information displays.
3) Google Map: An interactive Google Map plugin that displays
the location of the polling place and offers direction options
(through Google).
See live page:
http://www.carnaghan.net/qa/wireframes/polling_places.html
10. Wireframes – Past Elections Database
All applicable detail-page elements noted previously, plus…
1) Descriptive Body Content: A short area meant to explain how to use the
past elections database.
2) Filters: Drop down menus allowing users to select election year, election 1
type (e.g., presidential) or precinct to see the results. Upon selecting an 2
item, the table repopulates with the appropriate information.
3
3) Table: Lists downloadable PDFs of all past year’s elections data by
precinct and county-wide. Table column headings sort
ascending/descending when clicked.
See live page:
http://www.carnaghan.net/qa/wireframes/past_elections.html
11. Search
While research has led to the most efficient information
architecture structure presented here, search is still an
important tool to consider for implementation. The
researchers have provided some recommendations on how
search should be integrated into the new board website.
Recommended Features
• Comprehensive stemming, synonym recognition and the
ability to self-correct spelling mistakes are essential for a good overall user experience.
• Query suggestions should provide relevant results when the search cannot return a suitable number of relevant
items for the user.
• Vertical searching should be made available where appropriate for the different audience types as well as content
areas (e.g., Candidates, Voters, Staff and Election Results, General Election Queries, Locations).
• The search application should be user-friendly and provide similar features to common search engines with which
users are already familiar.
Planning & Implementation
Development can be expensive in terms of both time and cost to write a customized search platform. Readily
available search applications are available, which can be tailored to the site’s specific requirements.
• Google provides a free custom search product, which would be well suited for the board.
• The search features described above are integrated into Google search, with added customization features.
• Other free open-source search engines (e.g., Lucene, Zettair, Sphinx, Sqlite, and Xapain) provide greater levels of
control, however require higher expertise to implement and manage.