• Project length: 10-12 weeks (done as part of the Climatebase Fellowship, Fall 2023)
  
• Team: Kaylin Gilkey, Beth Kamp, Sunny Lad, Liqing Li, Adi Manjunath, Brian Sinclair
  
• My role: Lead Developer + Designer
• Link to final project: https://revampguide.com

The first week of the Climatebase Fellowship includes the opportunity for fellows to pitch a self-directed capstone project for other fellows to join and work on over the course of the fellowship.

As part of his pitch, Brian narrated his experience of navigating the complexities of convincing his HOA (Homeowner’s Association) to install electric vehicle (EV) chargers in his community. By the time it was approved, Brian spent 80+ hours working through the challenges with the HOA and knew that the entire experience could be simplified. Some complexities that arose included:

1. complex decision-making procedures within HOAs
2. infrastructure limits
3. navigating local, state/province, and national regulations
4. expertise gaps
5. the potential for community opposition
6. cost concerns

Tl;dr: installing EV chargers in multi-unit residential buildings (MURBs) is no walk in the park.

Problem statement

Our goal was straightforward: streamline EV charger adoption in MURBs, making it easier for residents to buy and use EVs, thereby increasing the adoption of EVs in cities. We wanted to simplify the HOA approval process, addressing the challenges faced by residents to get EV chargers installed.

Research

Our research entailed answering various questions relevant to our problem:

1. What was the market size of the identified problem?
2. What resources exist on rebates for EV charger installations and EV usage?
3. What third-party EV charger providers options exist, and what are the cost implications of choosing one of these providers?

Most crucially, we needed to figure out what MURB residents' biggest challenges were when it came to EVs and getting an EV charger installed.

User research

We conducted user research through interviews and surveys to gather information on EV ownership and the challenges users faced. Using scaled agreement questions, we assessed user needs in a number of areas, and our key findings highlighted users' most significant challenges:

1. understanding rebate qualifications,
2. determining building energy capacity, and
3. effectively communicating costs, processes, and value to gain community approval for EV charger installations.

The results to our survey on the challenges surrounding EV ownership

These insights guided our priorities for the subsequent solution.

Ideation and conceptualization

Given our tight 12-week timeline, our ideation phase focused on defining clear and SMART project goals. We hoped to have a minimum viable product by the end of the fellowship, but defining what this entailed was complicated given the constraints of our schedules – many of us were balancing the fellowship with other commitments (in some cases, full-time day jobs!)

We explored two paths to move forward:

1. Creating a public Notion-based website
2. Developing our own website

Both options had their pros and cons.

Notion is easy to use, and would simplify setup by in large part eliminating the need for developers or designers to build a website.

Our own website, on the other hand, would provide greater flexibility with:

1. our content's overall information architecture
2. the format of our content
3. SEO optimization to ensure our content is more visible
4. any potential upgrades to our information architecture and resource offerings

Given we had time and resources at our disposal, we decided to build our own website. This choice aligned with our goal to create a tangible solution within the given timeframe.

Design process

The UI/UX process unfolded in a series of deliberate steps.

Liqing and I immersed ourselves in competitor research, seeking visual themes and inspiration from startups and EV-related companies. During this process, we encountered a unique challenge that bode well for us; locating a direct competitor—a comprehensive source for the content we envisioned—proved elusive. Most relevant information we found was scattered across one-off articles on different websites. This meant that we had the opportunity to fill an unmet need by creating a one-stop shop for info on EV charger installations.

Our focus then shifted to crafting a clear UX flow and refining the information architecture of our website. This unearthed many insights, considerations, and questions, like: Should we extend our scope to single-family homes in the future? And to help decide this, should we build in an approach to measure interest via the website's UX flow?

I then led the process of setting up a color palette and type scale to define our look and feel based on the theme of our project, and working on high-fidelity wireframes. This gave us a concrete representation of our design concepts and provided a tangible sense of the website's aesthetics and UX.

Coding & web development

Before writing any code, we had one significant problem to figure out.

If we were building our own website of resources and content, how would we allow non-technical team members to contribute to our website if they didn't know how to code?

This was one of the benefits of using Notion — despite the potential trade-offs related to version control, contributing to a Notion site is trivial. Building your own website, on the other hand, gave us a number of potential options to work with –– which was not necessarily a positive. We could’ve spent hours evaluating the countless CMS solutions out there, but given our short turnaround time, finding the perfect solution that was free and didn't offer features that we needed as part of a paid plan may have been tricky. That said, it also wasn’t realistic to have everyone on the team learn how to write HTML to be able to contribute to our content.

After some digging around, we decided to opt for mdx as a versatile middle ground. Markdown is generally more user-friendly and quicker to set up than HTML. mdx's flexibility also allowed us to style HTML components and incorporate React components into our content. Here's an example of what you'd write in Markdown, and the html output.

Over time, we enhanced functionality by adding mdx plugins & components, like a table of contents automatically generated based on the page's heading structure, complete with clickable links using rehype-slug and remark-toc.

Optimizing for Discovery: Navigating SEO Challenges

Getting our SEO set up would play a key role in ensuring that we would achieve the goal we set out with Revamp Guide. Acknowledging the importance of getting our content as much visibility as possible, we focused on refining various elements to maximize our reach and engage users.

Key considerations and implementations included:

• GA4 setup
• Integrating Google Search Console
• SEO-friendly titles
• Setting up a comprehensive sitemap & robots.txt
• Alt tags on images
• Ensuring that content used ordered & unordered lists (we got this out of the box with mdx, thankfully)
• Implementing rel=canonical to prevent content scraping and ensure proper credit attribution

By addressing these elements, we aimed to make our content as discoverable as possible, aligning with our goal of providing valuable resources to users.

Final outcome & impact

We launched revampguide.com in early December — an outcome that not only met our initial goal, but also garnered positive feedback upon its introduction at the end of our fellowship. Our work did not go unnoticed, with our team making the Climatebase “Innovators” of Cohort 4 list. 

That said, our work is not done. We have two evergreen goals with Revamp Guide post our fellowship:

1. Continue adding relevant content to what we've set up, some of which will come from direct or indirect user feedback. The latter in particular led us to realize that Revamp Guide could extend its utility to businesses in addition to MURBs and single family homes. This insight not only broadens our project's scope, but also emphasizes the impact it could have on diverse user groups.

2. Find ways to allow for more contributors to Revamp Guide. This could entail open-sourcing our codebase, making the project more sustainable and adaptable, and could ensure our solution remains a valuable resource for those navigating the complexities of EV charger installations.