Online Voting

The Online Voting System, made as a web application for desktop, was made to create relationships between candidates and voters through aligning values.

Role: UI/UX Designer

Duration: 1 month

Team: 1 UI/UX Designer

Client: Rochester Institute of Technology | Project

OVERVIEW

I created an online voting system that was based on user needs and preferences, backed by user research.

1. The Candidate Cards

2. The Filtering System

3. The Cart-like Ballot

1. THE CANDIDATE CARDS

They provide holistic background information that voters can't find anywhere else- organized by valued categories, unbiased, and directly from the candidates.

2. THE FILTERING SYSTEM

It creates a shopping-like experience that helps that votes easily find exactly who they're looking for, categorized by what means the most to voters- values.

3. THE CART-LIKE BALLOT

It gives voters the chance to see all of their selections in one place, navigate between them, double-check their choices, and submit- all without leaving the page. 

User Research

Through user surveys, benchmarking, and UX mapping, I have found what users are interested in, what they need, and what they want.

1. USER SURVEY

The survey revealed that voters choose candidates based on their personal value system, with the values varying depending on the voter, and the most important categories being:

AGE

GENDER

RELIGION

ETHNICITY

GENERAL VALUES

EXPERIENCES 

Screen Shot 2020-12-08 at 9.22.19 PM

2. BENCHMARKING

Voters are used to various paper and digital forms of voting depending on where they're located, while most voters have used a web browser and/or a smartphone. I took this information and combined the best of all the bests:

THE TRUSTWORTHINESS OF ONLINE BANKING

THE EASE OF POPULAR ONLINE SHOPPING

THE SECURITY OF THE IRS' WEBSITE

THE THOROUGHNESS OF FASFA + GOVERNMENT ASSISTANCE APPLICATIONS

Screen Shot 2020-12-08 at 9.22.24 PM

3. UX MAPPING

The online voting experience needs to provide a certain level of expected and previous experience to create familiarity, comfort, trust, and ease of use...But there is still room for introducing new design in a system that voters take seriously.

theuserexperience copy

GOALS + OBJECTIVES

My goal was to create an emotionally compelling experience using design elements and flows derived from users' needs, values, and past experiences.

TARGET USERS

Target users are those who have familiarity with basic uses of technology and digital media, including online shopping and mobile banking.

User Personas, Flows, and Empathy Mapping

Both users and candidates have the capacity to have deeply ingrained and personal needs that should be met within the voting process.

1. ROSIE RUIZ | THE VOTER

Rosie needs all of the information to know her chosen candidate holistically.

ChildressCaitlyn_UX_Voting_EmpathyMaps-01 copy

2. JJ FISCHER | THE CANDIDATE


JJ wants voters to see him as a person before they view him as a public figure.

ChildressCaitlyn_UX_Voting_EmpathyMaps-02 copy

INFORMATION ARCHITECTURE

I created a custom user story to better understand the user's path and navigation on the single-page website.

ChildressCaitlyn_UX_Customuserstory_white-02 copy

Visual Design

The visual design takes a spin-off of colors used to describe a generic American experience. I selected simple and relatable visual elements, then gave them a little flavor, varying them just enough for some personality.

1. INSPIRATION + MOOD

PLAYFUL

MODERN

LIVING IN THE MOMENT

EDGY

SIMPLE

LIVELY

GROUNDED

5cf934eb11e20543c0391362
Frame 23

2. TYPOGRAPHY

I chose typography that resembles American signage from the 1900s, especially popular with small businesses and protests.

Frame 24

3. COLOR

I took basic colors that would be found in a small crayon box, then made them more "adult" while still having playful and child-like energy. Colors that are more intense and less varied from their "original box color" were used as small accents next to a similar color to add dimension without being too overwhelming.

Frame 22

4. IMAGERY

I used stars and stripes from the American flag, typography as image, and actual photographs/videos of candidates. I made the flag elements have more organic contours to tie in the hand-made feel of the typography.

Frame 1
iMac – 2

more work

Modern Tarot DeckView Case Study →

Rochester Subway MapView Case Study →

The Design GuideView Case Study →

"Observe" TypographyView Case Study →

Cultural Color InfographicView Case Study →

Underwater IllustrationsView Case Study →