Design and Democracy: Week 5

Jess Liu
Design and Democracy
7 min readDec 9, 2016

The final product and reflections on the project

From the Jacobs Winter Design Showcase at UC Berkeley

This is Week 5 of Design and Democracy, where I’m keeping track of a design project I’m doing for a class at Berkeley. You can find week 4 here, week 3 here, week 2 here, and the introduction to this project here.

Week 5’s assignment focused on preparing for the Jacobs Winter Design Showcase at UC Berkeley. In this article, I’ll discuss final refinement of my ideas for this project, go through the high-fidelity mockup that I created for the presentation, and discuss some reflections on this project.

Final refinement

At the end of last week when I worked on refinement of concepts from ideation, I had decided to create a companion to voting that would serve as a central, digital platform for voters.

The platform would compile non-partisan information about candidates and ballot measures, provide sample ballots and instructions, send push notifications for important deadlines for registration and sending in absentee ballots, and, if possible, give confirmation that a voter’s ballot was received and counted.

At the end of initial concept refinement, I had created a user journey, sketches, and a mid-fidelity wireframe for the use case of a college-aged absentee voter using the mobile app. You can refer to week 4 of this project to learn more about those parts of my design process.

In week 5, I wanted to make higher-fidelity wireframes and create a somewhat functional prototype to better understand the user journey through the app.

High-fidelity wireframes

While I only addressed a single use case of a college-aged absentee voter, the platform has a lot of pieces to delve into:

Onboarding

Onboarding

When thinking about the onboarding process, I knew I needed to strike a balance between asking for enough relevant information from the voter and not making a voter uncomfortable by asking for too much personal information in order to access the platform. In this, the only personal information requested is the ZIP code of their voting address, so that the platform can provide personalized information about local and state elections.

As with most onboarding processes, this process has one prompt per screen at a time with progress tracking at the bottom of the screen so that it doesn’t overwhelm the user with too many questions at once.

Regarding color choice, I wanted to stay away from using a combination of blue and red because that combination echoes too much of partisanship — instead, I used a combination of green and red for the buttons to help the user associate green with positive input and red with the opposite. In this case, I feel that the red connects more with answering “no” for a question rather than any political party. I stayed with a white background so that a user’s attention would be on the content of the app rather than a color scheme.

Features

National news, Local/State news, Notifications, Search, Profile

In week 2, through user research, two insights I found were that voters have a lot of stress with ballots being on time and that they want to make informed decisions on their ballots. With these insights in mind, I decided to center the features of the app around providing users with news for all levels of elections, notifications about deadlines for registration and mailing in ballots along with other relevant notifications, and a profile that would provide voting information specific to the user’s voting county.

Click a green rectangle for the section-specific instructions

Sample Ballot + Instructions

One interaction that I developed a bit further was the sample ballot and instructions. During my user interviews and during my own experience with absentee voting, clarity of instructions was an issue — the language was unclear, but instructions were also poorly matched to the corresponding sections on a ballot.

In order to remedy this, I added a feature to allow people to click onto different sections of the ballot to clarify section-specific instructions, which alleviates the issue I mentioned above.

Working Prototype

Finally, with the high-fidelity mockups I designed for this use case, I created a somewhat functional prototype using Marvel, in order to better understand the interactions with the steps of onboarding and exploration of different features for the platform.

Reflections on this project

I had a lot of fun exploring the absentee voting experience in this project, and I’ve learned a lot by individually going through a design process from start to finish. In reflecting upon the past five weeks, I want to discuss some improvements I would want to make on my process and work, as well as lessons that I learned in doing this project.

Improvements I would make

  1. I definitely want to conduct much more user research. If I want my design decisions for different users to be driven by research, I need to do more research on many more use cases, and especially conduct more interviews with different types of voters.
  2. I want to improve my questioning process when conducting contextual interviews. Once, when I was discussing my user research process, I mentioned that an interviewee said that filling out the ballot in pen made them “nervous,” and I realized that I never dug deeper to truly understand where that emotion came from. In the future, I want to improve my questioning in order dig deeper at what specific interactions or subtleties are causing interviewees to express certain emotions or reactions.
  3. There are some areas of my high fidelity wireframes that I want to clean up. For example, after reading this article about creating better input fields, I want the input field for the ZIP code in onboarding to be a stronger affordance, and to automatically pull a numerical keyboard rather than a full one. Additionally, I would want to improve upon the icons for different features so that the user has a clearer idea of what sections the icons bring them to. These areas might seem like details, but details definitely matter in creating streamlined, functional, and delightful interactions.
  4. User test, user test, user test. Because I had a relatively short time frame of five weeks for this project, I was unable to conduct any rigorous user testing, which is a part of the design process that I believe to be imperative to creating a truly user-centered product.

Lessons Learned

Through doing this project, I also learned a lot of broader lessons about design and life (even if that’s cheesy, I did).

  • It’s important to not get caught up in constraints too early on in the design process. Back when I was still doing category research and selecting a design space, my thoughts were already getting caught up in concerns about time restraints, laws about ballots, feasibility, and other issues. However, while it is important to define reasonable constraints before ideating and refining, I learned that I shouldn’t constraint myself too early on in the process and potentially lose out on exploring different spaces and ideas.
  • Communicating ideas in print is incredibly different from doing so digitally — I had to print materials from this project each week for critiques in the class I’m taking. While I didn’t really discuss this issue in my writing on Medium, designing for materials to be pasted on a wall is a very different fight. I had to consider text size, colors, and images in a very different way from how I would for a digital presentation — for example, even arrangement of physical materials affected how people were able to view and understand my ideas.
  • Don’t be afraid to ask for help. I’m really bad at going to office hours and talking to my professors, sometimes because I feel like I don’t have the time to, but mostly because I’m scared of talking to professors. During this project, however, due to some time constraints that I was working with and some trouble I was having with selecting a clear final concept, I went to discuss my ideas with my professor, and that was arguably one of the most valuable things I did in this project. I was able to talk through issues that I was having in my process, as well as share my passion for this project with someone else, and (somewhat) overcome my fear of talking to professors.
  • The current U.S. election system is kind of awful. But that’s why I explored that space during this project, and I hope I’ve been able to communicate an idea that could potentially improve it.

I’ve learned a lot and had so much fun doing this project and writing about it here on Medium. For a long time before working on this, I perceived design as a discipline mainly applied to the tech industry and mainly tech problems, but there’s a whole world of social, political, and non-tech related issues for design to tackle — I can’t wait.

I’ll (hopefully) be posting weekly as I go through research, ideation, iteration, and refinement of my project, Design and Democracy. Feedback is always welcome and appreciated!

Also, I want to give a huge shoutout to my friends Jarry, Sergey, and Kyle for their constant support.

Lastly, If you’ve been reading along for the past few weeks, thanks so much!

--

--