Fifty Nifty

Branding & UX/UI design for a social/political challenge created by the Viral Communications Group of the MIT Media Lab. It was a one time competition where a user generates a "Call" to their political representatives & invites their social network to do the same. The user with the widest reach & most calls within their network wins.

Project Overview

Project Goals

  • Generate healthy competition
  • Get users to call their political representatives
  • Simple & patriotic
  • Easy access to representative info
  • Illustration of the user's network

Project Details

  • A bit of flexibility with brand & UI except for color
  • Mobile app only
  • Displaying the user's stats
  • Access to the leader board

The brief was direct about the functionality of the app but the branding was more flexible. With the goal of healthy competition and patriotism through positive action, I wanted something red, white, and blue that still felt upbeat.

The bulk of the app's content is representative information. Those are also the screens where users create a "Call" which is collected as data to determine their standing in the competition making them critical to the core goal.

The map was a creative choice to create a visual for the user's network. So much of the app is just data and I felt something illustrative would bring a bit of engagement to an otherwise plain display of information.

App Screens

Signup screenHome screen
Senate representatives screensHouse representatives screens
User profile screenNetwork map
Network listLeaderboard

Wireframes

Low fidelity wireframe of the signup screenLow fidelity wireframe of the home screen
Wireframe of the House screenWireframe of the Senate screen with an open dropdown
Wireframe of the home screen with an open hamburgerWireframe of the settings screen

First Iteration

The most obvious change was the removal of the background image. It was having a negative impact on the readability of the representatives' info.

I also changed buttons to white except for the highest priority calls to action. I also made everything that can be clicked look a bit more clickable with better styling.

The map was looking very busy because of all the linking lines between the highlighted states. They are not contributing any value. It reminded me of plane flight patterns which have nothing to do with what this map is meant to communicate.

First iteration of the home screenFirst iteration of an open hamburger
First iteration of the Senate screenFirst iteration of the network map screen