Implementing A User Experience
For The Organization Human Rights First
Human Rights First is an independent advocacy and organization that challenges America to live up to its ideals. They advocate for human rights nationally and globally. When leadership fails to respect human rights, they step in to demand reform, accountability and justice. The organization accomplishes this by building bipartisan coalitions and have teamed up with frontline activists and lawyers to address global challenges that demand American leadership.
This past year there has been an alarming increase in situations where law enforcement and their behavior have intruded the rights of the people. Where the judicial system has failed the people and an administration sworn to protect the rights of the people, failed. Journalists, concerned Americans and lawyers need to be informed and aware of the injustices so the organizations committing them can be held accountable. We live in the technology age and it is advantageous because now more than ever people are uploading, posting, going live, retweeting and finding their voice. So how do we keep the people informed? How can journalists, lawyers or concerned Americans find a source of information? How can we certify that the information is valid? The idea of Blue Witness was born.
The purpose of Blue Witness is to be a hub of information specifically about the inapposite use of force taken by law enforcement. In order to achieve the success of this website the creation of a model that can scrape through tweets and store the tweets that are filtered by tags in a database, can be approved or disapproved by the admin and then displayed to the user who can search through the data filtering by state, dates and categories.
My main concern was imposter syndrome that I have been confronting at my time at Lambda. I made sure to combat that by taking on a Design Liaison role for the project. I have learned that I love UX/UI and I have a passion for design. I was also concerned about the user experience for this project , how it would be implemented and who would be the targeted audience.
Link To Human Rights First Website
Blue Witness Design Features
Thinking critically about the user experience I wanted to implement features that would enhance the functionality of the project. The first feature I contributed to the project was refactoring the styling of the incidents reports page. I started my refactoring with the search box, I aligned all inputs to the left. The inputs were components from Ant Design, a program I am not familiar with but decided to tackle. Inspecting the page and looking at the DOM really helped me to pinpoint the classes I wanted to call in my CSS file. It was a rush of excitement when I saw the inputs move for the first time. It was the motivation I needed to continue. A learning experience came from Joshua I used rems for the width and he suggested percentage instead and it fixed the issue of the inputs extending over the search box when moving through the breakpoints.
The second feature I contributed was in collaboration with two team members Anas and Joshua. The page at first displayed all tags in the search box that the user could click to filter through the reports. We loved the functionality this enabled the user but it looked cluttered on the page. Our idea was to implement the tags into an Ant Design component called AutoComplete. AutoComplete takes our state which is an open string i.e the user typing their selection into the input and displays the options in a drop down i.e our category data. When the user selects a category, the state value changes to the category that is active. A filter then slices through the array of data allowing for data relating to that specific category to be displayed. Tags display nested under the category input and toggle on and off when clicked.
The third feature I contributed was making the site functional for multiple devices. I researched the most commonly used devices by users and commonly used breakpoints to accommodate these devices. What I did not anticipate is how much the styling would need to be refactored after implementing the media queries. Margins and padding needed to be adjusted for all the pages, but I will touch on what I did for the incident reports page. The smallest breakpoints 280px, 320px, 360px and 375px needed the panel to display the title, rank, location, date and checkbox in a flex column direction. As the breakpoints increased it was more practical to have them remain in a flex row direction.
Documentation I used during the process
A technical challenge that really stands out happened after we merged the styling for the home page css and incident page css. This is where my modest knowledge of Ant Design comes into play. I was composing myself for the morning stand up. I opened up my command prompt and cd into my projects, opened them up in vs code and noticed that the search box on the incident reports page was displayed perfectly fine at all breakpoints. The issue was the reports not being displayed at the mobile breakpoints. The reports would only display at 768px and up. I took a look at the code as I had a hunch, the previous day I noticed that when I selected the Ant inputs without referring to the class they were nested in I was altering all the inputs on all the other pages as well. I needed a second set of eyes so I asked Joshua if he could help me look through the code so we could find what was causing the issue.
We knew that the collapse-item was being altered and it is an Ant component. So in VS code you can right click on a piece of code and find all locations in which that code is referenced. When we did that we noticed that the collapse was being styled in the home page css but the collapse was created in a different file called IncidentFocus.js which is part of the map on the home page. So now we called on Stephanie and Hairo who were working on the home page css. We all jumped into a voice channel and Hairo shared his screen. I guided Hairo through these steps. First we created and imported a CSS file for the IncidentFocus.js. Then we created the media queries for all the breakpoints. Next we selected the Ant collapse-item in the collapse-text class and deleted all references to the collapse-item in the home page css. When the changes were made the reports were displaying at all breakpoints in the incident reports page.
Wrapping up and the future of Blue Witness
I cannot believe how quickly the time has gone and that we are wrapping up this project already. Features like the mobile functionality will allow users to engage with the site from any device. Autocomplete inputs, that allows the users to search through reports with filters like category, state and dates. A table for the admin dashboard that can also respond back to a user on twitter to ask for more details. Notifications that pop on the screen to make a user aware of upcoming functionality for the future.
Thinking about the future of Blue Witness from a design perspective I hope to see the features we implemented enhanced to provide a better user experience. I see the project being fully functional across all devices, browsers and platforms. I see the twitterbot designed by data science being fully automated and giving Welton the stakeholder some help managing all the approvals of tweets. Technical challenges I foresee in the future is refactoring all the styling for different browsers. I noticed that when I opened the deployed site on safari on my phone the styling changed dramatically. I am hopeful that next cohort will be inspired to expand on what I implemented.
Working with a team has taught me so much, we all have different work styles and personalities. Some feedback I received that has been a reoccurring theme is not being able to ask for help. It is hard to hear because I have been trying to make a conscience effort to be more aware when I do this. Coming to the realization that I’m still struggling with not asking for help is tough but I did not let it deter me from my goals. I mentioned my technical challenge that was a conscience effort to be comfortable with being uncomfortable. I set my ego aside and I asked Joshua for help I was stuck and when I did ask for help we quickly got unstuck.
Working on this project gave me my purpose. Before the project I was jumping back and forth between frontend and backend, completely neglecting my love of design. Now I’m certain that a Frontend position with focus on design is the main goal. I am looking forward to jobs in the gaming industry and media industry specifically journalism. I am more confident knowing what my goals are and now I’m working on being more confident in my skills and adding another notch of experience to my belt. I want to make the web a more beautiful place to look at and eventually have people enjoy the games I have developed.