Madalyn Medrano
Anthem
UX/UI Design Project
Anthem is an iOS app designed to help young Americans engage civically through education and confidently vote in the electoral process. Regardless of party affiliation, Anthem's purpose is to provide simplified non-partisan information about candidates, and primary resources to help guide users at the ballot box.
Project Overview
Anthem entails the design process involving research and analysis, ideation, and development of a mobile interface and branding.
With historical low voter turnout and a major dip in civic engagement, I designed an accessible app that helps users navigate the electoral process and provide free resources to help decision making while maintaining non-partisan.
Timeline:
10 Weeks
My Role:
End-to-end UX/UI Designer
Platform:
iOS on mobile
Tools:
Figma, InVision, Canva, Procreate, Stark, Otter.Ai
Methodology
My process
Using the human centered design approach, I could ensure that each phase of my design process could easily connect back to the pain points, motivations, and behaviors of my users to enhance their experience.
Empathize
Discovery of the problem space
Why are young Americans less civically engaged?
Voting is a difficult space to navigate, especially for young adults who don't feel adequately prepared to vote. In recent decades, our nation has failed to prepare young Americans navigate the electoral process.
Young voters are less engaged in the electoral process and vote at lower rates than older age groups, thus creating a lack of representation in the current political landscape.
The time has come to recommit to the education of our young people for informed, authentic, and engaged citizenship.
Our constitutional democracy requires informed civic participants, and we must align our resources to that goal.
Secondary Research
What is disincentivizing young Americans from civic engagement?
Why civics is important?
General election summaries
The results of poor civic education is clear. Among American millennials, many of whom did not receive a quality civic education, understanding of and trust in our democratic institutions remain alarmingly low.
Consider this:
-
Only 24% of U.S. students are proficient in civics.
Yet the time granted to civics in the classroom keeps shrinking. Today, only 9 states and Washington, D.C. mandate a full year of civic education.
According to the Florida's Department of State Division of Elections, voter turnout decreased by 1,342,141 votes in just two years.
This chart displays voting activity by ballot type. This is insightful as it shows numerical data on the preferred voting methods.
Department of State Division of Elections
Voting Activity by Ballot Type for 2016 & 2018 General Election
Key Insights
After conducting secondary research, I concluded that the rate of participation in young voter turnout in the state of Florida is decreasing, aligning with the historically low voter turnout in United States. My assumption in believing that the low voter turnout among this age group is caused by a lack of civic education was correct.
Through the findings of my secondary research, I began to create an interview guide for user interviews. I wanted to dig deeper into this problem space and speak to real people about their voting experience to find out what barriers they encountered.
I enjoyed this part of the research process, too! I believe it's important to use peer-reviewed journals, government agencies, research think tanks, and professional organizations for my secondary research. By using credible sources, you earn more trust and respect from your audience.
Hypothesis
I believe there's a relationship between Americans and the civic education they received in school that has left eligible voters feeling confused and overwhelmed at the ballot box. I believe this has negatively impacted civic participation, especially in local elections, and that by providing a free and accessible tool for finding upcoming elections and resources to eligible voters will achieve an increase in voter turnout and civic engagement.
Assumptions
To help validate my design solution and hypothesis, these assumptions were developed to help frame my primary research objectives.
-
I believe my users have a civic duty to vote and have their voice heard.
-
These needs can be solved through accessible civic education and adequate preparation for elections.
-
My initial users are eligible young voters in the state of Florida in the age group 18 through 30 years old.
-
The #1 value the user wants to get from this product is crucial information that can help them feel confident in voting for local elections.
-
I will solve this by providing free resources for users to access whenever to better navigate the electoral process.
Primary Research
Understanding the users' barriers to civic engagement
I conducted 30 minute interviews in-person where I asked a series of questions beginning with warm up questions, general questions, two different theme questions, and wrap up questions. This helped me to generate data on their behaviors, motivations, and pain points in their current experience purchasing apparel.
To view my interview guide, click here.
Participant Criteria Requirements:
-
Must be 18 to 30 years old
-
Must be eligible to vote in the state of Florida
Methodology:
-
Three user interviews in a decontextualized setting asking a series of scripted questions in an unbiased environment
Interview participants
Interview Participants
Catherine,
27 years old
"To be a good leader, you have to have empathy and care about people, not just the vote. I like to see myself represented in the people I'm voting for."
Interview Participants
Bethany,
25 years old
"Civic actions can be staging a peaceful protest, writing a letter to your congressman and calling them, or running for office or your school board. You can join organizations, vote, and register others to vote."
Interview Participants
Alicia,
30 years old
"I don't feel very confident in voting because it's a lot of candidates and it takes a lot of time in making sure you know all the information as fas as where they side on certain issues. That can be tough to go through all that and waste time on searching online."
Key Insights
After conducting primary research, the interview participants provided insight on how they navigate the political landscape. The series of questions clarified the quality of civic education they received in the United States, which was overall not helpful. One theme of questions explored the idea of "the people" as a political concept, not just a group of people who share a physical landscape. The second theme of questions explored the relationship between self-government and civic participation.
Affinity Mapping
I sorted through the interview participants' pain points, motivations, and behaviors into an affinity map, which helps to synthesize user insights from research findings into themes and patterns.
Key Insights
The top themes I took away from affinity mapping were:
-
Desire to increase civic participation
-
Participants understood that civic engagement doesn't just entail voting. They showed interest in engaging with community members to organize protests, phone banks, etc. but were unsure how to reach out to likeminded people.
-
-
Voters are unaware of free educational resources that can help them
-
Participants felt that there was a lot of insufficient and credible information out there that made it difficult to find trustworthy and unbiased information on candidates. Often times, these resources required a lot of time to sort through and sometimes even costs money to provide clear analysis.
-
-
Eligible voters feel unprepared to vote
-
Participants expressed frustration on the civics education they received in public education. They did not feel confident when voting, and felt overwhelmed with political jargon.
-
Although all these themes play a role in contributing to my problem space, I wanted to refine my focus toward the one that my secondary research backed up: civic education. I will focus on addressing theme #2 for the most viable product, and continue to work to address the other two main themes.
Define
Design challenge
Addressing civic engagement in local elections
How Might We encourage young voters in the state of Florida to engage in their communities through education to better prepare them for upcoming local elections so that they feel confident and knowledgeable at the ballot box?
User Persona
Gaining an empathetic understanding of my user
After synthesizing all the research and understanding the pain points, motivations, and behaviors of my interviews, using real user qualitative data, I developed a primary persona and experience map to highlight the key attributes of who the app users would be.
Gaby encapsulates the research collected from my secondary research and user interviews. Her characteristics represent only a portion of who the users would be, yet all the frustrations, goals, and motivations provide a broad understanding of the current shared experience.
User Stories
User focused ideation
To help ideate key functionality and features for a solution that would best serve the users, I developed about 30 user stories based on the goals of my persona Gaby that focused on actions that could help her search, browse, access, and share resources.
I created three epics inspired by themes found during interviews.
-
Promoting civic participation
-
Accessing information and resources
-
Searching through the product
Out of the three epics, I chose "search" as it aligns with the Gaby's goal to search for candidates in upcoming elections near her. I will focus on the following features in the task flow:
-
search upcoming local elections
-
view candidates' profiles
-
search my candidate's website
Task Flow
User oriented
After choosing an epic to create a task flow that aims to reach Gaby's goal: to search for upcoming elections near her.
Ideate
Initial design exploration
One of my favorite parts of the design process is ideating a potential solution to address the users' needs. Translating ideas into sketches has become incredibly fun as I use the Pomodoro Technique, a time management tool, in order to get the most rapid ideas onto paper.
In this video, you can see how I reference my user interface inspiration board on InVision to lead my initial sketches.
When I first began my UX design journey, I was intimidated by sketching due to perfectionism. But one of my design teachers advised to draw without using an eraser, to simply let go of perfect and aim for the MVP (most viable product). I really like this advice as it helps navigate industry expectations of time management. It allows me to brain dump before creating various iterations on Figma.
UI Inspiration
UI inspiration board
Once I landed on my primary task flow, I collected inspiration for my user interface from Dribble and UX Archive to include into my InVision board. I created sections based on components and functionality assets for my UI inspiration board to begin the ideating process.
Sketches
Inspired through sketching
I began to ideate features into exploratory sketches then solution sketches and created variations per screen to search for the ideal layout for my task flow. It was important to consider readability considering my mobile app would be a heavy source of information. These sketches represent features mentioned by participants during user interviews.
Prototype
Connecting the inspiration into iterations
I transformed the sketches into grayscale wireframes and prototyped them. Using simple interactions, Anthem slowly started coming to life. After soliciting for feedback on my lo-fidelity wireframes, my designs evolved into my mid-fidelity wireframes.
Lo-Fidelity Wireframes
Mid-Fidelity Wireframes
Test
Giving the people what they want
With a working prototype, it was time to test. I created a Usability Testing Plan to guide me during the testing sessions. As part of the design process, I conducted two rounds of usability tests with 10 participants to see what they thought about the product and how they navigated through it to complete the task. Following this, I was able to collect valuable insights that were used to improve the design and overall experience.
UX usability testing
Round 1
Round 2
Throughout each testing round, I used these output charts to show the success/failure of each task from all participants. I used this research to improve my designs, and therefore needed to prioritize tasks into a matrix prioritization in order to focus on valuable solutions.
After the first round of testing, I created a V2 prototype that addressed the (6) challenges participants had. After the second round of testing, I created a V3 prototype that addressed the (2) challenges participants had.
The main challenges that users had were:
-
Not knowing about the scrolling and expanding abilities
-
Grammatical errors
-
Simplifying the text to further indicate what to select
Refine
Brand development
I began to explore my brand’s visual identity by writing a list of adjectives that represented the feelings that I want to evoke in my users when they interact with my product. Then, I explored possible names for my app. Since my design approach was entirely user-centered, I conducted a poll with my interviewees and some of the users from my user testing so they could choose a name out of 40+ options. In the end, the name with the most votes was “Anthem.”
To refine the app's identity, I listed comparative adjectives using a "More A than B" list. This helped provide more clarity and constraints to my visual identity.
Brand name finalization
Anthem signifies patriotism for ones' country. I believe with engaged and informed citizens, this nation can better represent and celebrate its rich diversity.
This brand name represents a digital solution for low civic engagement in the United States. When I first defined my problem space, I knew I wanted to bring people together.
When we sing the national anthem, we all stand to sing "The State Spangled Banner" together as one. Anthem is meant to educate Americans in understanding our nation's history, and value a healthy democracy.
For my brand's name, I brainstormed different words that directly correlated with the app as well as words with more symbolic meaning. This app is free and accessible for voters with the purpose to adequately prepare for upcoming elections. It's rooted in transparency, education, and engagement.
Moodboard
Setting the mood
Mood boards help facilitate the brand identity process.
After refining my brand's key adjectives, I collected images that conveyed:
-
Peace
-
Hope
-
Patriotic
-
Connected
-
Free(dom)
Color
Color extraction
To begin developing my brand colors, I started extracting colors from my moodboard in InVision that reflected the ambiance and tone that I wanted this app to convey.
I chose two extraction colors from the moodboard and attempted to see how the two paired with each other considering that blue (primary) and purple (secondary) are cool colors.
According to my initial user interviews, participants felt overwhelmed and intimidated about civic engagement. By using cool colors in my designs, I hope to convey to users a sense of calmness, yet professionalism.
Brand color palette
I used the Tints and Shades Figma plugin on the primary color (blue) and accent color (purple) brand colors in order to generate a variety of color shades.
With accessibility in mind, I used the Stark Pro Figma plugin to check the contrast ratio with the color white since white (#FFFFFF) will take 60% of the screen color.
I put a black stroke around each color that passed the contrast ratio on Stark. The rest of the colors had a couple of check marks, but not perfect score. Therefore, I prioritized using the accessible colors.
During my color injection process, I kept in mind the 60/30/10 rule. 60% of the screen color would be neutral, especially since it is a text heavy app and color contrasting accessibility is best with a white background and strong colors. 30% of the color would be blue (primary color), and 10% would be my secondary color (purple).
Wordmark
Wordmark inspiration
I pulled inspiration for my wordmark into a mood board. I wanted to incorporate more than just text into it, so I gathered insight from current political campaigns and art from Doodle.
Wordmark sketches
After deciding on a brand name, I began to use Procreate to sketch out ideas for the word mark.
1) I wanted to emphasize the first letter A in Anthem.
2) I created a check mark for the A letter upside down to insinuate a check marked ballot and a V for vote.
3) Things got a little weird and I made a boot out of the A and flipped it to the other side. (Key learning: sometimes you have to get the ugly out in order to make something good.)
Chosen wordmark
I decided to use the wordmark most similar to the logo of American politician Alexandria Ocasio-Cortez since it represented American Spanish speakers. According to Forbes magazine, the U.S. has the second-largest population of Spanish speakers so it's important to equip your brand to serve them.
I wanted Spanish speaking users to immediately recognize that this mobile app had language accessibility in mind. I also intended "Anthem" to be shouted, conveying an idea of singing along the national anthem with pride.
The colors for these wordmarks will be re-iterated to match the final brand colors. I decided to move forward with the wordmark in the box since the caveat brush conveys a natural handwritten feel. I wanted to be more engaging than boring, and using rigid text would be boring.
This is the final wordmark in different variations of the primary blue color. The dark shade passes the accessibility contrast test by Stark - this was important in the color decision process.
Application Icon
Exploratory sketches
After I finalized my wordmark, I wanted to use an iteration of one of the exploratory wordmark sketches for my app icon since I didn't use it in my wordmark. I used Procreate on my iPad to sketch out iteration of the app icon.
I created various swatches using my primary and accent colors for the app icons. I placed a star on my top picks.
However, I quickly discovered that the lightest shade of blue did not pass the contrast test by Stark, and accessibility is my top priority.
I pivoted designs in order to relax the user's eye, as well as connect the chosen wordmark to the app icon. I moved on to select my choice with a yellow gold star.
This app icon is for the iOS store. It's simple and easy to identify the brand since it's pulled from the chosen wordmark. After speaking with peers, I decided to pivot from the sketch ideas that I originally intended to use in order to make the icon more accessible to read. The white background helps users better identify the brand.
Typography
Chosen typography
My chosen typography is Inter.
Anthem is a text heavy mobile application. Therefore, it was important to choose a clear and simple font that wouldn't overwhelm the user.
Inter started out in late 2016 as an experiment to build a perfectly pixel-fitting font at a specific small size (11px.) The idea was that by crafting a font in a particular way, with a particular coordinate system (Units Per EM), and for a particular target rasterization size (11), it would be possible to get the best of both sharpness and readability.
The project was rebooted with a different approach, sticking with the specific UPM, but crafting glyphs and kerning in a way that made for more variation in the rhythm and smoother vertical and horizontal stems. As Inter was being developed, it was tested on an internal version of Figma—where the author of Inter works as a designer—and slowly improved upon based on experience and feedback.
High Fidelity Prototype
Considering all of my feedback from my final user tests, I was ready to inject my visual brand identity into the app. This high-fidelity prototype walks through the aforementioned task flow of locating the user's voting district, upcoming elections, and providing a voter guide of candidate races.
A walk-through Anthem
Closing
The evolution of my design
Reflecting on my experience
Key learnings
Time Management
As this project often crossed over with other deliverables during the 10 weeks, time management was one of my biggest challenges. Often times, I found myself focused on one task far too long to make it perfect. I quickly learned to prioritize certain tasks and allot myself a specific amount of time to complete those tasks.
Accessibility
I gathered UI inspiration from mobile apps currently in the market to compare "aesthetics" with my designs. However, I noticed accessibility wasn't at the forefront of those designs like color accessibility and typography. Anthem is a unique project since I considered accessibility throughout the design process.