Empowering activists to get out the vote


Turnout Nation


Mobile App


Prototype, UX Design, UI Design

App design for Turnout Nation


The Turnout Nation partnered with my team at Studio Science to help them to build an app to equip voting activists with the information they need to encourage friends and family to vote. My role was to design and test the experience before we began development.

Adding friend design for the Turnout Nation app

Adding friends


The app is built on the idea that you, a Captain (or voting activist) can help encourage 10 people you know to vote. Collecting and adding these names is a really important piece of the app overall performance, so we start by making the adding of these contacts the first thing you do in the experience. From there, we can match those contacts to public voter information and surface information to the Captian that will help them register and motivate contacts to vote.

Turnout Nation app wireframes

Primary screens as wireframes

The experience of adding friends was difficult to nail down. A list felt too dense, and, on smaller devices, this would feel more overwhelming and offer a limited view of the list as a whole, putting us at risk of duplicate additions and creating frustration. We opted for a two-column approach that showed a user what needed to be done before progressing, as well as providing a more compact view for a higher-level view of everyone they have added.

Turnout Nation onboarding design - screen 1
Turnout Nation onboarding design - screen 2
Turnout Nation onboarding design - screen 3

Onboarding required a lot of work from a user, I opted to move more of the traditional onboarding experience to a carousel that users interact with before creating their account. This space helps set expectations before a user opts to start the sign-up process. In testing, this was received with positive comments as it wasn't a blank space with a button, but a space that introduced users to the mission of the app, as well as the opportunity to showcase the diverse inclusion of voters that Turnout Nation hopes to attract.

How I transitioned wireframes to HiFi deisgn

Wireframe to HiFi


When we talked with Turnout Nation about what they wanted the app to look like visually, what we heard was that they were interested in a clean, professional experience that felt very trustworthy. That feedback the team shared lead me to the cleaner design that relies heavily on typography and a card-based style for visual organization.

Icon style used in the Turnout Nation app
How active icons look in the bottom tab bar in the Turnout Nation app

One challenge we identified was the use of the brand color throughout the app. We were concerned that the single-color treatment could be communicating a political alignment that we wanted to avoid creating. One solution we developed was to create two-tone active icons in the bottom tab bar. The color active color balance offers us the chance to show red on the screen in a positive, but subtle way. The red we used in these balanced icons was accessible as graphic elements, but not as text. As a result, we could use a darker color for warning text as a way to provide additional separation between the color red and negative interactions.

Primary HiFi screens after design

Primary screens in HiFi

Both iOS and Android use the same typographic scale. This was intentional to help trim some time on development, create consistency between platforms, and reduce the difference in treatment for the same components on each OS. iOS users won't notice this as much, because the scale of type is similar to other apps. Android users will notice it more as many apps rely on the Material guidelines for type scale. I think this is a great solution for many, but for this design, we chose to break from that native feel treatment.

The foundation of the interface is built around a card approach. This design style emerged as a way to section blocks of content while allowing the use of consistent background color. This approach a secondary benefit, allowing us to start to consider how dark mode would work in the app. While we did cut that feature for the first release of the app, we had built with that future in mind. The card-based approach was built on the idea of elevation. The background color is considered Elevation 1. The primary surfaces that you interact with are placed on the second level, and in light mode that appears as the brightest part of the interface. To accommodate dark mode effectively, I think designers need to consider the surface color and the proceeding layers of interactive layers that overlay each piece of the UI.

This is a view of how I designed the app to accomidate dark mode in the future

Light and dark mode color details

With our goal of helping the Turnout Nation team build essentially an MVP, I worked hard to create a design framework that allows developers to easily expand on top of the initial public release. While it's important to build whole components that can be built, I think it's also equally important to establish patterns in the interface that can be repeatable and expandable. Everything has a consistent pattern, down to the space between elements, type sizes, color treatment, and even overall page styles.

Design details like typography, spacing, color and more.

Design details

This app was such a privilege to work on. It feels like we are helping make a difference by building a tool to help get more people out to vote. I could not be happier with supporting that effort, and how the overall product turned out once it shipped. The app has continued to evolve and grow since my work on it, but it's great to see that the emphasis I placed on building a complete design framework has allowed developers and other team members to continue to build out new functions quickly as new needs are discovered.

See it Live launch