Alexandre Sar
Alexandre Sar
Interaction Designer
 
 

ALAMEDA COUNTY

encouraging voters

 
 
ACVOTE_Hero.png
 

ACVOTE.org is an informational website for citizens
to easily find local voting content.

 
 
 
 
 

OVERVIEW

The goal of the project was to help Alameda County Voting Office build a new website experience to better serve Alameda citizens.

 
 

 
 
my Role

UI/UX Design

Tools

Sketch, Invision

Developper

TBSCG

 
 
 
ACVOTE_Transition.jpg
 
acvote-polling-selection.gif
Event Page

Event Page

 
 
 
acvote-homepage-scroll.gif
Homepage

Homepage

 
 

1 / 3 Research

Design workshop

The core team of the project was composed of people with different background. The workshop allowed me to create a space where everyone was invited to share ideas without being judged.

 
 

Familiar tools to stay productive

To facilitate the exchange of feedback, I shared with the team a Google Slides document that includes all design visions or decisions.

 
Slides to discuss visual and to introduce design system concept

Slides to discuss visual and to introduce design system concept

 
Shared findings: clear visual hierarchy + accessible navigation menu

Learning from existing patterns

I emphasized my inspiration research on news sites which rely on bold and modular layouts. The goal there was to learn about how they categorize key information for the readers.

 
 

Key findings

One major finding that resonates well with the team was the importance of balanced visual contrast within the page layout. I applied this principle to revise the early design of some components.

 
 
findings-1.png

Cards visual language to highlight content.

 
findings-2.png

Use of short and bold headlines to increase readability.

 
findings-3.png

Use of grid to better manage white space and visual hierarchy.

 

Adjusting the design

In addition to the research, the team provided also constant feedback during the process. It helped me to fine-tune design ideas.

Transition block component

Transition block component

 
 
 

2 / 3 User Experience

Detailing scenarios

With a diversified audience, it was important for me to make sure most user cases would be covered when thinking about the new vision for the website.

 
 
acvote-scenarios-screen.png

Prioritizing needs and features

After interviews and creating user personas, my main task was to share a document that would summarize all the function requests. This allowed any team member to discuss and prioritize all important features.

acvote-workshop.jpg
 
 

3 / 3 Prototyping

Shaping
a new vision

The prototyping phase was important in the process.
It brought up conversations that helped clarify design details.

 
 
 

Improving two core elements

I proposed to the team to revise not only the design but also the content. It was important to make it easily scannable for readers and to keep its tone consistent as well.

acvote-core-elements.png
 
Shared findings: clear visual hierarchy + accessible navigation menu

Simplifying access to the content

Navigation labels items and content were reorganized. When users need to find specific information, the navigation menu is the primary point.

 

Adding new interactions elements

One component I worked with the team was the top navigation menu behavior. I specified how it will behave when users would be scrolling down the page.

Shared findings: clear visual hierarchy + accessible navigation menu
 
 

Other created screens

 
10d_Polling_Place_List@2x.png
 
5g_Desktop_FAQ@2x.png
 
6d2_Desktop_Calendar_Page@2x.png

Results

After the launch of the new website, the feedback was positive. Both staff members and the community found the new design more intuitive than its previous version. Due to the nature of the project, the official statistics can’t be shared publicly. Nevertheless, thanks to it, I managed to build trust with the team members giving me a new opportunity to collaborate together again on a different project.

 
Shared findings: clear visual hierarchy + accessible navigation menu

Next project

AbbVie

abbvie-hero.jpg