Madalyn Medrano
App Design
Brand Identity
Web Design
🇺🇸 Anthem
Intro
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.
Time
10 Weeks, 2022
Role
End-to-end sole designer
Tools
Figma, InVision, Canva, Procreate, Stark, Otter.Ai
The Problem
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.
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
💡 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.
Defining the problem
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.
Task flow
User oriented
After choosing an epic, I created 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.
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.
Usability testing
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.
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
Branding
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
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.
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.
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
High-fidelity prototype
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.