Team: Jennifer Yoo (Me), Casey Catelli, Abraham Abbas
Tools: Adobe Illustrator, Sketch, Adobe XD, 
Platform: Web
Timeline: 2 Week of research, 2 Weeks of design, prototyping, testing, & iterations 

This project is not affiliated with the LA innovation team or any LA voting program or department. The following work is a conceptual educational exercise to practice and refine UX Skills.

The Los Angeles Innovation Team serves as an in-house consulting team focused on helping the City
address complicated problems.

How can we update the voting booth, currently an analog system with an inked stamp and physical ballots? How can we enhance speed of setup in a variety of community polling places, by volunteers?
How can we establish certainty and trust in a digital system? (Assume data security and anti-hacking
measures are invincible.)                                               

What I did

           Why I did it

            What I learned

Research

What I did
Asking a series of questions to gain insights, information, and an understanding of problems. 

Why I did it
To find target users, and to get specific targeted information from those users. 
 

What I learned
The physical process of voting is inconvenient, long, complicated, and inefficient.

Screeners
Screeners, the initial interview to weed out users who are not our target audience. I found that the majority of our users didn't pass the screeners, This was not the ideal outcome.

Interviews
From the interview, I discovered that voters are not informed about issues and candidates. Because they are not informed they don't care about issues. The physical process of voting is inconvenient, long, complicated, and inefficient. 

I don’t go to the voting booth until late until, it almost closes. I always wait until the last minute to vote. Sometimes I even missed the deadline because I dread the process of voting.

-Maral

Things are so important at the local level, and people don’t realize that these districts are powerful in terms of Money, and resources (community level)
You Have to be involved in the local level to be effective.

-Sylvia

I want to be more politically engaged but I don’t have time

Time is HUGE FACTOR in why I don’t vote more

-Maral

What I did
Wrote down all the comments that were said onto sticky notes and arranging it on a wall or board

Why I did it
To find patterns or trends within the multiple people interviewed. See if any problem was a reoccurring problem between multiple people

What I learned
The biggest issues faced by our users was the inconvenience with the registration process and the  the voting process. 
 

After conducting those interviews, I took all of what was said during the interview and put each comment on sticky-notes. We arranged them on the wall and kept rearranging them until we saw some similar or commonly faced problems. So after rearranging them the patterns that we found were that the process was inconvenient, difficult. and time consuming. We at this point were considering ideas such as creating a physical kiosk that would solve some of these problems.
Then we later realized that IDEO, actually created a prototype of a physical kiosk with many innovative many of the ideas were were considering to solve the these problems. It was at this point that we decided to make a online platform for voting at the city level. 

What I did
Task Analysis
To observe any problems, confusions, or unexpected complications that may arise.

Journey Mapping
Creating a visual map that depicts emotional ups and downs our users experience while completing their task.

Why I did it
Task Analysis
Having users complete a task to observe how they go about completing that task.

Journey Mapping
To empathize with our users. Seeing their struggles during their task, helps  create specific solutions.

What I Learned
What we learned from the task analysis and journey map was that it was difficult to find one site that had all the information that was needed. The websites that do exists have so much information its hard to find exactly what you want.

From this task analysis and journey map we discovered that there is no one site that has all the information you need about voting. There are however a couple of sites that are dedicated to voting but they also included other information pertaining to the city such as information on birth certificates and death certificate etc. The image below is of a journey map of one of our user trying to find information on candidate and measures for the next local election.

What I did
Creating a visual/ (tangible ?) representation of the summation of our users.

Why I did it
To empathize with our users.  and make sure we are designing/ creating for our persona. 

What I learned
Our target users are people who already vote. People who consider it their civic duty to vote regularly.
 

Behaviors:

• Engages in online political discussion
• Lobby for topics she believes in
• Occasionally will volunteer

Maria

Maria is a 37 year old avid voter who moved from Chicago to Los Angeles 6 years ago. She grew up in a family environment that encouraged her to vote. and was taught from a young age that it is her civic duty to vote.
 

Frustration:

• Long Lines
• Rude poll-workers
• confusing and tricky language
• blind voting
• People who say "voting doesn't effect me" as a reason not to vote

What I did
Evaluated the website to identify usability problems or UI problems.

Why I did it
To get first hand experience of how the website operates and to identify some obvious usability problem.

What I Learned
What this site needs is good information organization, a intuitive navigation bar and breadcrumbs. 
 

From the heuristic evaluation from other popular voting site, we discovered a couple things. Those discoveries included the need to only have one Navigation Bar. The navigation bar and the information hierarchy needs to make sense and because this is a significant amount of information the need for breadcrumbs. Below are the Heuristic evaluation chart for lavote.net and votersedge.org

What I didWhat I did
Took all the features on this site and on competitor's site and determine whether it is a must have feature, should have feature, could have feature, or won't have feature.

Why I did it
It makes it easier to determine what your MVP is and what should be on your site. It also prevents featuritis (having too many features, and having too many unnecessary features.)

What I learned
This was crucial to prevent featuritis. Now that we determined our MVP is to gain information and to vote those features had to take priority.
 

Next we conducted a feature prioritization. Feature prioritization is when you get all the features you are considering putting on your site and first considering the importance of each feature, then determining whether the feature is a must have, should have, could have, or won't have. And as mentioned earlier because our MVP is to gain information and to vote, those features take the most priority. Below is an image of a MoSCoW (Must have, Should have, Could have, Won't have) chart. 

What I did
Putting all pages of a sitemap onto cards (sticky-notes) then asking users to organize it in a way that it makes sense to them

Why I did it
To observe the user's thinking and to find out why the
users organized it in the way they did. 

What I learned
The cards for the card sorts came from the MVP. You will see in the site map that there was only three necessary main navigation and they consist of flows that complete that task. 

Next I moved into card sorts, in which I put every page of a website (sitemap) on note cards (sticky-notes). With as little  influence from me as possible,  we asked our users to organize these pages into main pages and sub pages in a way that made sense to them. Now taking the patterns that arose from this testing, and trying to incorporate as many inputs as possible, I made a new sitemap.

What I did
Created a new Navigation Schema and footer, and made a visual blue print of those pages in a site

Why I did it
To organize the site efficiently, by making a intuitive navigation schema, and footer. 

What I learned
That we only need three main navigation tabs, which is all part of the MVP: registration (which is needed to vote, vote, and get informed.
 

A sitemap is a map of your website. It holds a list of all your pages in a hierarchical system that shows you which sub-pages are nested within larger or main pages. What we did was, after gathering the information from the card sort, user interview, and C&C (comparing it to our competitors), we created a site map. These fixes were solutions to some of the confusions our users were facing 
 

Design

What I did
Initially sketched basic outline of
how the website will look like. basic shapes like squares as placeholder for images, text, button, logo etc. 

Why I did it
Because it is a quick, cheap, and efficient way to start.
Allows you to make mistakes on the hand sketches
instead of on the expensive high fidelity.  

What I learned
That you can communicate a lot with low fidelity wireframes. Even without color or text its still relatively clear what everything is.

After we got our website structure from the site map, we began flushing out some of our design. We began with low fidelity sketches because its cheap, quick, and a efficient way to get some basic ideas going. 

From there we moved to medium fidelity, which was digitizing these low fidelity sketches, and getting the information in there.

What I Did
Created the Medium Fidelity digitized sketch of the low fidelity.

Why I did it
After the Low Fidelity hand drawn sketches the next step is to digitize in black and white.

What I learned
At this stage we adjusted the registration and voting forms multiple times. There were some confusions caused by the spacing of the answer box to its title. 

Then to the low fidelity we added some color, texts, and pictures. We then prototyped the medium fidelity before creating the high fidelity so if there were any major problems with the medium fidelity it can be caught at this stage.

What I did
Created fully rendered out websites as it would look live. With final fonts, color, any design elements

Why I did it
To have it for the prototype and eventually the live website.

What I learned
When making the low fidelities, although there are no details like color or text, putting more effort into the low fidelity pays of when making the high fidelity.

Lastly, we put some pictures, colors, and overall more information, to make it high fidelity.

Here are a few high fidelity  examples of the in-n-out e-commerce sites.

For more please take a look at my prototype

Prototype

What I did
Make an early sample, model, or release of a product ... which in this case was prototype of a website.

Why I did it
To test a concept or process or to act as a thing to be replicated or learned from.

What I learned
Its much easier testing the high fidelity prototype than the low. Users thought that the website was very plain so for next steps possibly embellishing it.

Then lastly we made our prototype. Taking the mid/high fidelity I put it in InVision and made a basic prototype and we got some users to try them out. Because of time there were not many changes made to the prototype but form the user testing we got different and valuable input.