What I learned in a month as a Design Lead in a Web Development Team

I had the honor of working with Humans Right’s First for a month. They are an independent advocacy and action organization that challenges America to live up to its ideals. They work hard to uphold human rights here in America.

I got to work on a team with some fifteen other web developers and three data scientists on Human Rights First Asylum (HRFA) for a month. We worked remotely on the web application as our last month’s project at Lambda School (a coding boot camp).

Lawyers and researchers who visit HRFA can upload asylum case data into the site’s database. Here they can look at the data visualized into dynamic graphs. In addition, the users can filter data by case outcomes and judicial rulings. This can help lawyers build compelling cases for their existing clients. The data this website collects could help shape policies and asylum laws in the future.

During the first few days, our Project Manager requested a developer to step up and volunteer as the Design lead to implement UI, and UX polishes to the product. I came into Lambda School with some background in design, having spent the last five years designing t-shirts and other merchandise. I was so excited to take on this challenge and learn some web UI/UX design fundamentals.

I jumped into the existing code base and documentation provided by the last development team. The project was in its last stage of development, and our team needed to polish it to meet our MVP (minimum viable product). At first glance, I could see that the UI/UX needed another coat of paint to get it ready for the stakeholders. So I worked with my two other Design Lead teammates, and we made a list of fixes to accomplish this sprint. We used the task manager application, Trello, to easily organize our tasks and keep our team updated in real-time.

I immediately latched onto the idea of completely redesigning the Login / Signup page. The one currently used was very minimalistic and plain. I felt very strongly that it needed to be jazzed up and given a more sleek and polished look. This is the first thing the user sees, and I wanted it to provide a professional feel that would leave the user drawn to enter the application.

My first step into implementing this redesign was to pick an application that would allow for a visual representation of the design so that others could see it. The obvious choice to me was to try to learn how to use Figma.

With the help of numerous YouTube videos and blog posts, I was able to master the basics of Figma. Firstly I took the current look of the login/signup page and redesigned it without using many colors. The old design used a picture of the Statue of Liberty as the main focus for the page. I liked this visual and decided to keep it. It seemed highly fitting to HRFA. I found a new image of the Statue of Liberty and used photoshop to remove the background. From here, I let my mind explode into creativity.

https://www.figma.com/file/qzT9NZarAJRBE694ICqS6t/Human-Rights-First?node-id=0%3A1

I ended up with nine designs in total. I made these designs in the second week of our four-week sprint. I was giving myself plenty of time to get feedback and implement the design change. After I felt confident about the set of designs, I presented them to my fellow Design leads and then to the team during an early morning stand-up meeting.

Here the first challenge started — feedback. I was scared at first; it’s hard to share things you put a lot of effort and heart into to be critiqued. I was pleasantly surprised when the feedback was positive and informative. It felt amazing!

I then took my designs to the Design lead meeting, where a professional UI/UX designer was able to look over all our work. It’s here I got some fantastic tips about not using too many colors and the psychology of using hard vs. soft lines — all things I hadn’t considered before.

I took the feedback and collaboration from the stand-up and the Design Lead meeting and worked to improve my designs, and then presented them to the stakeholders. They liked them and had a hard time choosing which one they preferred.

Later that second week, we had a product review meeting. It’s here that the Project Manager told me that perhaps my redesign wasn’t exactly a priority compared to other “hot item” UI / UX fixes. At first, I was taken aback because of the time and effort I had put into the redesign. I then took a step back and saw the Project Manager had a point. I re-prioritized my tasks with my teammates and worked on some fixes and polishes for the UI.

Mid-third week I returned to my redesign and posted the designs in our team’s Slack channel to be voted upon before I went in and implemented the new design. Design six was chosen from the Figma board. We deiced to use this one because the line looked sleek, and the plain image looked more professional and less artsy.

I then made my changes to the code base. I implemented my new design and changed the look of some of the login and signup forms to match more consistently. I also noticed that most of the units of measurement used the CSS (Cascading Style Sheets) were non-responsive.

I decided to switch everything over to REM units. REM is a relative sizing unit with excellent browser support. One REM unit is equal to the font size of the HTML element, which for most browsers is the default of 16px. This makes it easy to scale your website for different screen sizes; whether it’s mobile or desktop, it will scale. I figured that this would help future developers make the web application responsive.

The takeaways from this month…

The most important takeaway from this month was how to function in a team environment. Before my time at Lambda School, I worked completely solo. So the collaboration was new for me. It was such a great experience, and I can now see what I have missed having working solo for so long. Working on a team allows for improved efficiency and productivity. Having others to bounce ideas off of and to get critiques only improved my work and theirs.

Working on a team also allowed for great learning opportunities. I came into my development team with little to no knowledge of Node.js, having opted to learn Java during my time at Lambda School. But I am now leaving with a basic understanding of Node.js, thanks to my teammates. I may have imparted some of my design knowledge on them as well.

All in all, this was one of the best experiences of my career. I can now take this month and talk about it during interviews. This development experience as a Design lead has made me a better developer who can handle deadlines, hard feedback and knows how to communicate in a team environment, and most importantly, isn’t afraid to learn new things.