The Unglitch Hackathon (January 2018, NYC) brought together technologists, creatives, and makers to discuss and create solutions around net neutrality.
I worked as a UX/UI and front end designer with a fantastic team on a hacktavisim solution we dubbed the "Legislative Accountability App" - LAA - selected (appropriately) by popular vote to present at Pioneer Works in Spring/Summer 2018.
Goals
We identified a problem concerning legislative action and awareness. A good number of people who care about issues like net neutrality don't seek out legislative information and don't take action regarding their stance. Most people probably don't know who their senators and representatives are, let alone their voting agendas and records.
What if we could make this easier by bringing the information to the citizen? The Legislative Accountability App sends users text message updates when and how their legislators vote. It provides contact information to hold those legislators accountable.
Left Page: Working out goals & MVP from user needs.
Right Page: I learned about alternative networking at this event. I am fascinated with mesh networks and wondered if it could be possible to create a mesh network using radio. I opted to work on LAA at this event because it is a much bigger project than could be taken on in 12 hours. However, I am curious to learn more about radio, hardware, and mesh networking.
User Stories:
Create a way to let users know who their legislators are:
- As a user, I want to use my geolocation or enter my residential address so I can find out who my Senators and Representatives are. (MVP)
Allow users to receive notifications about their legislators' voting activity:
- As a user, I can sign up for text message updates so I can stay informed about my legislators' voting agendas. (MVP)
- As a user, I want to receive text message updates when and how my legislators vote so I can stay informed about voting results. (MVP)
- As a user, I want to receive text message updates so I can stay informed about my legislators' upcoming voting agendas.
Create a way to connect to legislators to take action:
- As a user, I want to receive my legislators' contact info so I can choose to let them know how I feel about their voting activity.
MVP:
Based on the API's we found and the 12 hour timeframe, we decided that for MVP a user should be able to input their residential information and receive text message updates about when and how their senators and reps have voted. We decided this does not need to be a native app at this time as it primarily uses text messages for communication.
Wireframing:
I worked on wireframes for MVP functionality (UX) and UI using Balsamiq and Sketch while my teammates researched APIs and technologies for the backend.
1. LAA Landing page: After tapping "Get in the LAA Loop!" users are brought to a sign up screen.
If the headline and process alone aren't enough for the user to tap the call to action button in order to sign up, they can scroll down and read about the importance of legislative accountability. I wondered about adding a menu, but at this stage it wasn't necessary for MVP functionality.
4. First Text Message: Upon confirmation, users receive a first text message telling them who their Senators and Reps are and where to find their contact info.
2. Sign up: Originally, we had just wanted to use geolocation. While wireframing this screen, It occurred to me that you could be outside your voting district while signing up. We gave options for geolocation OR entering residential address with radio buttons. I also added a question mark in case users are concerned about how their information will be used (i.e., why we want to know where you live).
5. Get Text Updates: Users receive text messages telling them how their legislators have voted along with a link to contact information so they can choose to contact through email, social media, etc.
3. Confirmation: After users have successfully entered their information, they get a confirmation screen with instructions to check their text messages. They also get a reminder of the LAA process for next steps.
Logo & Style Guide
I created a logo and style guide so my team would be on the same page with design before moving on to high fidelity wireframes in Sketch.
I opted for a clean design and patriotic colors - Red, White, and Blue. I chose Crimson Text, a serif font that gives the feeling of important legislative documents. The logo suggests a flag with stars, a flag silhouette, and the same serif font.
After taking a step back from our 12 hour sprint, I think the visual design might be a little too formal. The flag silhouette also may look a little too much like a scythe. Going forward, I think incorporating some sans-serif, different tones of blue, and thicker lines would give the UI a fresher, more current feel.
High Fidelity Prototyping
I used the Craft plugin to sync wireframes from Sketch to InVision for a high fidelity prototype.
Putting It All Together
While we would check in periodically over the 12 hour work timeframe giving each other feedback, following the high-fi prototype and style guides, I was able to work with the front end to incorporate my UX/UI into the actual application using React.js.
The back end used Twilio to send text messages, and by the end of 12 hours we were able to send a user text messages after they had entered their residential address and mobile number.
Conclusion
At the end of the event all teams presented some very impressive projects. LAA was selected by popular vote to present this Spring/Summer at several Pioneer Works events.
Very happy to have learned a lot, connected with such talented people, and to continue working on our app for this Spring!