OVERVIEW
Summary
The Boston Heat Pump Accelerator (BHPA) is an initiative sponsored by the Urban League of Eastern Massachusetts (ULEM) to support increased access to heat pumps and related resources for traditionally underserved communities of the city of Boston. BHPA supports this overall access to heat pumps via education and awareness efforts by informing community members of the incentives and resources to convert their HVAC systems to environmentally friendly air-source heat pumps.
Code for Boston volunteers, including designers, data scientists, and software engineers have stepped up to build a responsive web application for the ULEM and its outreach team. I joined the design team as a UX Designer for the citizen-facing website to help create the information architecture and visual direction of this website, and got a taste for what it means to be on a design team.
Role
I was one of three UX Designers on this project. As a team, we worked in a shared Figma file to create wireframes for full webpages and UI Assets such as navigation bars, buttons, form fields, etc. We worked closely with frontend developers, and project managers, and the key stakeholder, Chris Scranton.
Duration
I joined the design team in March 2023 and worked on this project through the end of July 2023. The website went live shortly after.
Methodology/Process
This project was run with a Scrum/Agile methodology. Every week, everyone involved with the project met and participated in stand-ups, progressively getting more specific and granular as we split into more specific groups. The stakeholder was in constant collaboration with the entire team to make sure the needs for the website design were being met.
KanBan approach managed by the marketing project manager
Gaining independence through collaboration
All three designers involved with this Code for Boston project were in similar stages of our careers. We are all coming from different industries trying to gain our footing in the design world. We all have our own independent workflows, but also all want to follow a real world design process through to completion.
By the time I discovered and joined Code for Boston, this Boston Heat Pump Accelerator project had already been underway for a couple months. The screenshot above shows a fraction of the Figma file the other designers had been working in. Frames seemed randomly named, had no real sense of organization/order, and on top of this there were dozens of comment threads that had long been resolved, but were still floating around the file. Needless to say, at our weekly meetings there was a lot of wasted time simply finding the frames being discussed. My first action item quickly became to clean this up.
The information architecture had largely been finalized before I got started, which helped with this organization. I came up with a naming convention that the other designers agreed with, and ordered every page in a way that was consistent with the IA of the site. With this more logical organization, our design team was able to maintain a cleaner Figma file, and resulted in more focused and productive team meetings.
What is the brand tone of the BHPA?
The stakeholder helped the marketing and design teams craft the language being used, and the tone we were trying to portray to the public. These aspects of the site are rooted in the overall goal and agenda of the initiative itself, so there is not a lot of room for creativity there. As a team though, we have made great strides in crafting the colors, fonts, icons, logos, and layouts of each page. Below is an example of the type of brand elevation that I had a hand in for this project.
"We need a new logo!"
Chris Scranton, the stakeholder for this project, decided to hold a "design competition" for a new logo. The original (shown above) was quickly created by a frontend developer and had persisted through a majority of the life of the project. We weren't really sure what we wanted the new logo to look like. Many of us liked the logo how it was, but figured it could use a facelift, and others thought a total rebrand could be nice too. For my first submission, I decided to recreate the current logo to match the color scheme we had settled on, and give it some recognizable Boston flair.
The other designers each submitted something completely different, but one decided to include red and blue lines in her design to signify how heat pumps can be used for heating and cooling. Chris liked that idea so much, he reopened the competition for everyone again, with the stipulation it needed to include red and blue in the design.
It was with great honor, that my second submission was chosen to be the logo for the project that is included on the live website! I think it was important to have Boston's skyline present, and the lines next to Accelerator help signify the overall goal of the project.
Will the developers be able to implement our designs?
Every meeting, one of the developers always made sure to come to our Zoom "Breakout Room" and give us an update on what he had accomplished. He went over the wireframes we have designed, and informed us on how they would or wouldn't be able to get coded in an easy fashion.
Since I don't have much experience working in direct contact with developers this was a great exercise in learning the limitation of designs I create in Figma. Being equipped with this knowledge, I can go forward knowing how to "speak the language" and understand why my designs will work or not from a practical coding standpoint.
An important aspect of design is being able to adapt or assert design choices when developers push back. Through this project, I have gotten a glimpse into this balancing act.
Conclusion
This project has been a great learning experience. I've felt a great sense of accomplishment through presenting my design ideas and collaborating with others to reach solutions that not only fit the desired tone and goals of the project, but also look clean and up to a professional standard expected from websites today.
Even though I have experience on teams with varying skillsets, this was my first time on one with UX Designers and marketing professionals. I've gained experience on collaborative Figma files, as well as got some footing working in GitHub. This was also my first time working with developers and getting a glimpse into the interfaces they work with to create a website. My confidence working cross-functionally on a more technically skilled team has increased, and I can't wait to continue working on meaningful projects like this one.
I never doubted my engineering background would come in handy in the world of UX Design, but this has been a wonderful proving ground. My ability to communicate with a team of people of different experiential backgrounds, explain my reasoning behind my logic, as well as looking at the project from a big-picture point of view and narrowing in on the finer details that matter most have all helped move this project quickly toward launch.
