CITIZEN | Political Reference App for iOS + Android - UI Case Study

Design Case Study: Political Reference App for iOS + Android

image

Challenge: Create a native app for iOS + Android

Timeline: Sep 10 - 0ct 27 (1.5 months)

Role: UX to UI

Citizen was my third project with CareerFoundry, and the only open project I worked on during the course. The constraints from the course determined that it needed to be a native app for both iOS + Android, focusing on system appropriate differences between the two UIs.

Since it was an open project, I chose to design a tool that I wished I would have had this past year—a political reference app. While not the most outright thrilling concept, this project easily became my favorite one to date. It was an exciting challenge: to make a dense amount of information understandable, to design intuitive access to all the information, and to also try to bring a measure of cheer to an otherwise heavy subject matter.

So what is Citizen? Citizen is your how-to politics app. It features a customizable dashboard that follows issues and policies you care about, along with a timeline for important upcoming dates like elections and legislative sessions. It includes an events dashboard so you can see what events are happing in your area and get involved. And most importantly, Citizen features a robust non-partisan directory for everything politics: politicians, social issues, relevant historical events, terminology, and organizations, so you can be well informed.

Let's get to it! And I'll tell you about the three major design challenges along the way.

image

Design Challenge 1: Make lots of dense information digestible—and even fun!

Citizen is meant to function primarily as a reference app, which meant working with lots and lots of information. And since all of that information concerns politics, there's an easy danger for things to get cluttered, clunky and overwhelming.

In order to keep things clean and engaging, I prioritized two things:

image

Color ended up being one of the best tools in keeping the screens engaging but not overwhelming, without also stretching too far into the other direction of empty, minimalist screens.

In order to reduce clutter, I prioritized consistent use of components and repeating style patterns throughout the UI. I kept component and icon variation to a minimum, mainly by utilizing color variants. The design for this project was a constant tightrope walk, always working to strike the balance between clean, engaging visuals and robust information access.

→ I stayed away from the traditional red/blue color scheme associated with politics, and opted instead for green as my main color.

→ Green is a peaceful color and directly challenges the often intense and charged experience associated with this subject matter.

→ I pulled in blue and pink as a cheeky play on the traditional red and blue, and I went with bright, energizing colors to keep the experience from becoming a sterile and impersonal interface.

image

Design Challenge 2: Making things easy to reference, easy to look up, and easy to navigate

With several key features and lots of information to sift through, intuitive navigation and clear information hierarchy was essential to the design of this product.

There were several ways I went about this:

image

With so much information to navigate through, the navigation needed to feel truly intuitive, anticipating the user's next thought and providing access points to other screens and information at all times. I did this through:

→ reinforcing the user's current location in the user journey via icons + text

→ displaying an array of icons to decrease screen scanning time

→ providing easy access to go back a step or click into the next thing

image

Color blocking is a simple pattern that helped differentiate between information groups quickly and easily. I utilized this primarily on two of the main screens, distinguishing between events, bills, and reports. This pattern is also referenced in the city/state/national breakdown of offices.

image

Typography. I decided to break the rules on this one and utilize all caps, all lowercase, and sentence case as a way to help subtly differentiate between navigational text and content text. I used all lower case text for screen titles and menu labels. All caps indicated navigational subtitles and more menu labels. Sentence case was reserved for event cards, bill cards, persona profiles and definitions. This was further reinforced through the fonts I chose. Josefin Sans was used exclusively for the app's navigation since it was lighter and more minimal, and Roboto, with its slim letter width and thicker weight, was used only for content information as a reference to newspapers and printed information.

image

Design Challenge 3: Navigational differences for iOS + Android

This was the driving design requirement for this project in order to meet the requirements for my course. After determining my key features + user journeys, and after a thorough dive into Apple's Human Interface Guidelines + Google's Material Design, it was time to start designing the screens. There were two main aspects to this process:

image

In order to create two experiences of the same product and not have two separate products on my hands, it was essential that both designs were based on the same source material. To maintain consistency, the source material needed to reflect the needs of both system requirements.

I started with the basic information architecture and designed (and redesigned) a site map that kept both the iOS flows and the Android flows in the proper order of steps, even if the navigation had different locations on the screens.

image

image

Some other subtle differences include changing the colors for the menu drawer on Android to help reinforce different locations in the app, whereas the bottom navigation icons for iOS use the same primary green and the active icon features a highlight. The iOS design features a back arrow on every subpage, and the Android design relies on the system OS back arrow in the bottom nav bar.

The End | Mockups

From untangling nuanced information hierarchy to balancing the visual design of dense content, and finding and showcasing the differences in the OS's, Citizen challenged me to push past the first idea into the second, third and sometimes tenth idea. It's a project that I'm incredibly proud of, and it challenged me not only as a designer but also as a person. If you'd like to hear me chat about it more, or want to work on something similar, drop me a line :)

In the meantime, enjoy these final screens!

image

image

image

image

Thanks for viewing!

⟵ Previous Project

Next Project ⟶