Voicebox home screen UI

Voicebox

An app that keeps American citizens engaged by connecting their voice to their representative. Users are able to easily voice their opinions on current bills, follow their surrounding news, and check how their opinions align with their rep’s.

Services
Animation
Illustration
UX design + prototyping
Video editing
Visual system design
Time period
6 weeks
Student project team
Jacob Elias
Camille Vance
Background
The prompt was to create a revamp and mobile translation of the existing site IssueVoter. It allows users to vote, check their rep’s ‘scorecard’, and sends email summaries when new bills are released. Voicebox was created over the course of six weeks at the University of Washington as a student project alongside Camille Vance and Jacob Elias
Flows
FlowsThe three flows also represent the three main screens accessible in the navigation bar. ‘Home’ welcomes users to any new bills floated at the top to encourage them to voice. It also acts as an archive for all bills past and present. ‘Overview’ emphasizes the concept of sustained engagement by showing a feed of updates on bills. Essential to this is the idea that users only ‘follow’ bills that they care about, so as to present them only with information of interest. ‘My rep’ allows users to gain a sense of their representative (who they are and what they agree on), as well as get in touch with them. 
Voicebox mental model map UI
Mental model
Understanding our mental model is essential to everything from the ‘physics’ of our microinteractions, to the design of certain assets, to judging whether our goals were being met. 
Voicebox visual system and UI
Visual system
The look and feel plays an essential role in our app. Color use is intentional. Since voicing opposition or support is a theme throughout the app, purple is associated with oppose and orange with support.  Bias towards positive/negative and democrat/republican was considered in our choice. Typography was used to create hierarchy, preventing information from feeling overwhelming. Icons were used to identify categories of bills and replace the use of words in many cases. Illustration breathes character into the app and lightens the subject matter in a way that can be used across bills of all topics. 
Voicebox illustration, animated
Next project
The Defibrillator Lifecycle