Civic Pulse

Designing a way for users to learn about the bills in their Nation and State

The problem? Users had no easy way to access proposed and recently passed bills in their state and Nation. Other websites had the information but was hard to navigate and understand. I needed to make an app that not only makes the journey easy but also gives the users language options. Not only will english speaking and reading users will be using this app, but users that are new to the States, or users' who's parents are immigrants and may not know the language well.

Civic Pulse bill description screen

Getting Started

To start I began a competitive analysis to get a better understanding of how other apps and websites are putting their information together. What are they doing right? What do they need to work on? What should I implement in my designs for the user?

By conducting this analysis I not only got to see what competitors are creating for the users, I also got to have a better understanding of how the United States government works. It was a wonderful learning experience and sparked new ideas for me to add to Civic Pulse.

My competitive analysis of the competition, finding what to implement and what to leave out in the design

Drafting the Designs

Putting the wireframe together I decide where elements should be placed, and what scanning pattern I want to use for this project.

Low-fi wireframe of the Homepage and Bill Screen to get a general idea of the layout of the design

From Lo to Hi

I took the lo-fi wireframes and created a very simple lo-fi prototype for users to test. I wanted to see what users thought of the start of the design and what needed to be changed before creating the hi-fi mockups.

The very simple interactions for users to complete easy tasks and give feedback on the basic layout

With completing a lo-fi usability study I was able to get feedback on the design, think about what other screens need to be added, and fix icon locations

Completing the Hi-Fi mockups

With the data I collected after the testing, I was able to learn:

Color Palette

With deciding on the color palette I wanted to incorporate the original colors that signify the United States. Red, white, and blue.With that, I researched how other government apps used those specific colors in their designs. I noticed most don't use all three colors evenly. One is the main color and the rest are accent colors.

I decided I wanted to make the main color black and the main accent color dark blue. Blues are known to be a calming color, and for an app that can be potentially stressful for users, I wanted to make the experience as relaxed as I could make it.

The color palette for Civic Pulse

Typography

Making the decision for typography I went back to other sites that were similar to what I was creating. I noticed many used a serif font for the headers and logo, but went with a sans serif for content. I decided on Playfair Display for the logos and headers and Roboto for the content throughout the app.

List of the fonts, weight, and size for Civic Pulse

Logo

When creating the logo, I was inspired by The Guardian. I wanted a simple letter logo that's straight to the point and easily seen by users.

Civic Pulse Logo

Tools used:

Design Decisions

The detailed bills screen shows my design decisions

Homepage showing the design decisions I made and why I added more than just bills in the nation

Thank you so much for reading through my Civic Pulse case study.

Connect with me on Linkedin or email me at [email protected]