May 27, 2021
My First Experience With a Legacy Project
This May, I was given the opportunity to improve my skills as a web developer by building and improving upon the Human Rights First: Blue Witness website. Human Rights First is an advocacy organization in the United States that challenges America to live up to its ideals, believing that activists around the world should be able to be inspired by us and count on our support. Blue Witness is a subsection of Human Rights First and strives to provide information on police use of force incidents to the public. It accomplishes this by collecting crowdsourced data and scraping twitter using a bot, that students from my school created, and displaying it on their website in an accurate and comprehensible way to the public.
This project was special to me because this was the first time I was contributing to a project so close to completion and with such a large team of developers. I worked on this website with a team of 7 web developers, including a UI/UX design lead, and 3 data scientists, which has been the largest team of developers I have worked with. At the time we were handed over this project it had been worked on for almost 6 months and had code written completely by developers whom I have never met. Having to work with such a large and completely unknown codebase was extremely terrifying, but also very exciting at the same time. I knew this was going to be a difficult task to complete in one month, but I was sure it would be rewarding and experience rich.
Beginning Work
The first week of working on this project involved a lot of planning and familiarizing ourselves with the codebase and libraries used. We also had an introductory meeting with our stakeholder from Blue Witness where we were brought up to speed with what changes and features were expected of us. Since this project was so close to completion, we were tasked with improving the user interface and overall user experience of the website. I led a meeting with my team of fellow web developers walking through the website with a user mindset trying to find any flaws and coming up with ideas to add features to improve user the experience. We added these issues and ideas to a notepad and later created cards in our Tello board, assigning them to members of our team with deadlines.
We decided that the website needed a style overhaul, so we started work on mocks for changes to the architecture of the site's pages and recommendations for color and style changes to the website.
We completed mocks for a completely reworked “about” page, footer, and navigation bar that we felt would be more presentable and improve the user experience. We also thought that the colors of the website could be improved by going with lighter colors, including a lighter blue which would fit the police theme. After presenting these changes and mocks to the stakeholder, he approved them and we were ready to begin work.
Home Page Contributions
The home page of the site included a map displaying all the data of police use of force reports with ways for the user to interact with the map and change the location and timeframe of the data displayed. It also had a dropdown in the map to display cards of all the individual incident reports in the current view for the user to look through.
We found some styling issues with the drop-down including what seemed like two divs not lining up correctly on the bottom left. Another problem we found was that the cursor hover style was always a “hand pointing” when interacting with the dropdown cards making it very confusing for the user to determine what was clickable and what wasn’t. This was creating instances where features included in the dropdown were not noticed and received no use from users. I was assigned these tasks with a few fellow developers and we familiarized ourselves with Ant Design, a library none of us had experience with, which was used to make this collapsable dropdown component.
The first issue we solved was the styling fix for the uncollapsed dropdown. This seemingly simple fix was discovered to be much more difficult when we found out our local environments did not have this strange error in the bottom left corner of the dropdown. This issue was only present after the branch was deployed on AWS. After many hours of trial and error for fixes with AWS caching, to no prevail, we found another solution. We found that this div issue could be solved by removing an unneeded div containing the div container for the Ant Design component. This outer div did have some styles applied to it so we had to work through the codebase and see if we needed to reapply these styles to the div containing the Ant Design component. After removing that container, and rehooking up the functionality it had to the other div, our problem was solved and looked much better.
After solving the previous issue, fixing the styling inside the incident report cards was a breeze. I had gained a decent amount of familiarity with Ant Design and removing the constant “hand pointing” cursor on the entire card components was an easy fix. I made sure the button to view sources and the location displayed on the cards were set up with the “hand pointing” cursor still so users knew they were clickable. To further ensure that clicking the location displayed for the card was interactable with the map I changed the color of the font and added a slight bold when hovered over.
About Page Refactor
When we were first given this project, not only did we feel like the “about” page needed to be refactored, but it was lacking a lot of information. The page as it stood had a lot of unused space and white space that wasn't very appealing. It also lacked information about Blue Witness and its parent organization Human Rights First, which we felt was an important feature to implement.
After the mocks we created were approved by the stakeholder I assigned myself to start working on the “about” page refactor. I approached this by starting fresh and commenting out the old component for reference later. Using flexbox I was able to create the desired structure for the page and started adding and improving upon the text content of the page. With feedback from some peers, I changed up the description of where and how Blue Witness gets their data. I then added an about section for Blue Witness and Human Rights First and asked for a review and some feedback from the stakeholder on the wording. I also worked with data science team members to add a section describing our Twitter bot, which collects data for the website, and a place to later link to it once that functionality is available.
I then refactored the Ant Design component used to display the Lambda School students who have worked on this project into a form that better fit our new structure for the page. The previous component was in a collapsable form and would extend the page undesirably long when multiple Labs groups sections were extended. I decided that a tab structure would be preferable and only one group would be presented at a time. After some styling changes making the component look more uniform I felt the page was completed and was very satisfied with it.
Footer Refactor
The footer was another component we felt needed love with updated styling and more content. We decided to solve this by adding more links for Human Rights First including a link to the Twitter bot. We also included a new section for Lambda School and its Labs GitHub repository links we would like to include in the future. The original footer had a “log out” button (not shown / unable to find screenshot before the issue was fixed) permanently present even when the administrator was not logged in. This would be quite confusing for our average user, who has no option to create an account, and undesirable for our administrative users.
I went about this by creating a new component, commenting out the original for reference, and using flexbox to create the desired structure based on the approved mock. After discussing ideas and gaining feedback from the team we came to a footer slightly different from the mock. The “made by Lambda” logo was made bigger and centered to the right, as well as being clickable to route to the Lambda School website. We also added our “hover-blue” color when the links are hovered over and are underlined. The “log out” option is in the footer based on the stakeholder's request. A fellow developer and I figured out how to make a functional ternary, after some problems with Okta, and the feature only shows when an administrator is logged in.
Reflection
When we began this project we believed we would be able to complete it to the point of official deployment but we slightly missed the mark. A great amount of progress was also made on the Twitter bot by our data scientist members, but it still needs another iteration of Lambda students to work on it next month. We solved most of the UI/UX issues brought up to us and ones we discovered on our own but in the end, there is still some work to be done and things to be implemented.
We left the next team to work on this project with a few known bugs and issues, as well as ideas for future features. Some future features for this project would be a refactored home page under the map. The timeline featuring recent incident reports still contains some outdated styles that we began thinking about but did not have time to address.
I gained and improved many skills from working on this project and feel very accomplished now that it has come to an end. I have learned how to work with a team more efficiently, as well as how to solve issues that inevitably come up when working with a team. I have also become more customed to giving and receiving feedback and working on improving myself and my techniques from it. Having gained this experience with an unknown and large codebase, I feel more comfortable and ready to move into the workforce and start work on even larger scale legacy projects.
