Design Case Study: Political Reference App for iOS + Android
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.
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:
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.
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:
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
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.
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.
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:
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.
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 to find the right solutions.
One of the key challenges of this project was keeping the two UI's distinctly different yet cohesive enough to be seen as the same product, which can be difficult to do in its own right, but especially when dealing with a product that's so information heavy. Utilizing consistent component, icon and color use united the navigational differences between iOS and Android, but allowed for distinct user experiences of each system. It was also important to maintain consistent information hierarchy and categorization. This was done by using the same site map for each operating system, but surfacing the navigational elements in different places on the screens of each respective OS.
Designing visuals that made the content engaging without being overwhelming, while also using key colors and visuals to diffuse the inherent biases people possess (especially in politics) was one of my favorite challenges during this project. 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 chat about it more, or want to work on something similar, drop me a line :)
In the meantime, enjoy these final screens!
Thanks for viewing!