Creating a flexible, accessible app: Blue Witness by HRF

HRF

Over my final month here at Lambda School, I had been given an opportunity to help develop a product for an organization called Human Rights First. HRF is a group whose goal is not to make a point, but to make a difference. They strive to get concrete results that have a tangible impact on people’s lives. They are an action organization that challenges America to live up to it’s ideals. They have been working on a project that brings awareness and sheds light upon police wrongdoings and overuse of force. They have successfully constructed a web app that allows the public to actively keep an eye on what is truly happening in this country in regards to police brutality.

Blue Witness

Lambda School and HRF have been building the Blue Witness program for almost year now. The software was built, as per the HRF’s description, for the purpose of being able to report police uses of force throughout the United States, using social media to source and get all of its data (Source). It’d be capable to report every incident, as well as saying what level of force was used, and be able to display all of this in an interactive heatmap of the country.

The website receives all of its data through a Twitter scrapper that grabs any tweet that meets the requirements of potentially being an incident report. Even so, the Twitter scraper can only be so accurate. So, to help further verify the data that was coming in was accurate, we developed an Additional Information Form so that users could give more detail about a specific incident.

Additional Information Form

Our current, and former, data science teams have done an amazing job of crafting the twitter scraper bot. It’s accuracy ratings for pulling in accurate data and even labeling force rankings is extremely high, though there are still some cases that it can’t decipher. We noticed that the bot would return incomplete data in the cases of a missing date, missing location and/or lack of detail. So, to be able to help verify data, our team created a form that is sent to users we need more information from via our twitter bot sending them a DM. Once on the form the users can fill out whatever data was missing from the original post and submit to our admin to review. I, as UX lead, had the role of conjuring up the original drafting of the form to get the rest of the team in the right direction. After a few days of discussions with the team and working out a few technical we were able to put out a functioning form.

Though, as you can see, was a little tough on the eyes without any stylings. Which brings me to my favorite part of this project.

Implementing Stylings and Scaling for Mobile

After initially seeing the site I had inherited at the beginning of the month, I noticed so many little things that needed reimagined. The project is on the cusp of being deployed so I felt doing a complete redesign would be overkill for a months time, though there certainly enough fixes to keep me busy. Multiple forms needed styling, I created a new logo, established everything to better fit mobile, and rearranged a few color schemes. I feel as if before and after photos might describe it a little better.

As you can see, I definitely was not reinventing the wheel, though it was certainly something that needed some minor touching up. For a project that is about to go public, it is of the utmost importance that the initial wave of people visiting it finds it to be pleasant to look at.

Here is the newly styled form that I previewed earlier. It matches the stylings of the incident reports page to make the site feel synchronous. The goal for me with styling the form was to make it look as little complicated as possible. I feel as if I was able to make the page feel very empty while still giving space for the form to shine. Although, I definitely like the way it looks on mobile more.

Considering most of the people who would be accessing the form would be visiting from a mobile device, designing and scaling it for mobile was truly my main priority. Rescaling everything for mobile was actually my favorite part to styling this project, I honestly just enjoy the process of taking an already crafted design and reimaging it on a smaller or wider device.

The End Result

I am very pleased with how our rendition of the project came out. Everything we set our mind to one month ago and more has been accomplished. It truly was a pleasure and joy to work with such an enjoyable team.

Now, although my time with the Blue Witness project and with my cohort is coming to a close, I feel as if the work I and the rest of the UX team have done will surely set the future teams up for success. The entire process of it all was amazing to be apart of and I’m so glad I got to partake in it. It was great experience, a professional environment I learned so much from, and having such a pleasant team really made this past month so enjoyable. I am thankful for the opportunity I was given, feel as if I’ve learned so much from it, and am really just so excited for what the future holds.