Understanding Gerrymandering

Interactive Experience

9 Weeks — Spring 2022
Figma, Illustrator, After Effects
Full process deck
GOOGLE DRIVE
Problem
As I was encouraged to create an informative experience, I chose to educate people on the topic of political “gerrymandering—“ the manipulation, or redrawing, of electoral districts to create an unfair advantage for a particular political party or social class.
Goals
I began by identifying some overarching goals I wanted to achieve. Creating a product that was functional from an education standpoint was my top priority. In addition, I wanted to make sure my solution is flexible, in that it could easily be applied to different environments, such as in a classroom, or at home. My final goal was to create a worthwhile, memorable experience for the user.
Furthermore, I defined some general guidelines that would help me avoid problems down the road:
1.  Conveying information clearly, with accompanying visual aids.
2.  Limiting the amount of text-based information.
3.  Creating an effective structure to organize information.
Intended Use
My intended audience included everyone from college-aged students to Gen X-ers and beyond. I also identified two possible use cases, in which my product would be grounded in either an education, or news platform. As gerrymandering is more known as a contemporary issue, I chose to center it around a news platform.
User personas and product environment
Comparative Analysis
To begin my research, I compared my concept to similar interactive websites and data visualizations. This allowed me to identify patterns of what tends to work within the solutions, and what does not.
Examples used in comparative analysis
UX Design Trend Research
I also spent time researching trends in user experience design, which would influence how my product would actually function. Some of these included the timeline UI pattern, creative animations, and smart use of onboarding.
UX Design trend references
Sketches & Sitemap
My sketches laid out the basic structure that each state in my solution would follow. Even though I sketched enough states for the entire experience, I would focus on just a few of these going forward. The sitemap provides a visualization of how I intended to plan my information hierarchy.
Sketches
Sitemap (final product screens emphasized)
Grid & Wireframes
A 20-column grid with 80-pixel margins, and a 10-pixel baseline grid gave me a clearer design structure to work with. Once I had a grid, I moved on to creating wireframes based on the previous sketches. Here, I switched from Figma to Illustrator, as it would help me later when it came time to create an animated prototype.
Horizontal and vertical grid systems
Wireframe examples
Style Inspiration
The aesthetic direction I chose was dark and dramatic, with a strong emphasis on contrast, and sporadic pops of color. I originally intended on using red for the product’s branding, however this would change to green in order to make it feel more welcoming. I also drew on inspiration from data visualization concepts and even the White House website.
Pattern, texture, and color
Applied typography
UI
Applied graphical elements
Further style inspiration
End Product
The solution that resulted from many design iterations includes the entrance, initial screens which introduce the topic of gerrymandering, later screens for a “state activity,” and a menu.
The entrance welcomes the user, and includes the overall branding and style of the experience. A brief description is included to draw the user in, and subtle background graphics hint at what gerrymandering is all about.
The section title page for “How gerrymandering works” offers an overview of what will be covered in the following section. This introduces the “timeline” UI pattern which is used throughout the rest of the experience.
This subsection explains the broader topic of congressional redistricting, which is deeply connected to gerrymandering. An animation to the right shows how the redistricting process affects district boundaries.
The following subsection explains how abuse of the redistricting process can lead to gerrymandering. The user can interact with the graphic to the left to see how districts can be manipulated to offer an advantage to a particular party.
When the top right button is tapped, the menu appears, which allows the user to see where they are in the flow, and jump to any section in the experience.
The “try redistricting yourself” section introduces a new redistricting activity to the user.
This subsection prompts the user to select a state they would like to use for the activity. Grayed-out states are not selectable, since they only have one congressional district.
Once a state is selected, the activity screen would appear, followed by a pop-up modal informing the user how to use the interactive map.
After the pop-up is dismissed, the user can interact with the map on the right hand side. The user can pinch to zoom, and drag along district boundary lines to reshape the district. The information to the left shows how changing these districts affects the electoral makeup of the state.
Animated Prototype
My animated prototype showcases the different interactions and transitions that would be featured in the functioning tablet experience.
Reflection
My takeaway from this project is the importance of defining a clear emotional connection for the user. I struggled with this aspect because I was still unsure of what I wanted the end product to be by the time I got to design iteration. Once I knew my experience would be part of a news website, and more specifically, a news website that targeted the younger generation, everything began to fall into place. My sense of branding evolved dramatically once I had clearly outlined a use case.
‍
I now know that this is crucial step to the design process that should not be overlooked.

Let's get in touch.

CONTACT

loganmoplinger@gmail.com

CONNECT

LinkedIn

© 2022 - Logan Oplinger