Re-Imagining a Contractor Portal for this San Francisco Green Energy Giant



  • A Javascript framework built by Google used for building scalable web, mobile, and desktop applications.

    Learn more about Angular
  • A flexible open source CMS focused on security and scalability, great for building complex websites, applications, and back-end portals.

    Learn more about Drupal
  • An event-driven, lightweight JavaScript runtime built on Chrome's V8 JavaScript engine.

    Learn more about NodeJS


Ygrene is a leading solar financing company based out of Santa Rosa, CA. They provide a financing framework to leverage state subsidized loans for green home improvements. Ygrene works with  third-party contractors to help homeowners apply for financing to make various approved upgrades to their homes. Ygrene came to Tragic with an outdated Ruby web application, a rudimentary AngularJS application, and a strong desire to elevate their brand and create a modern, sleek, and comprehensive application  which would empower their contractors to find and finance eligible homeowners with ease.


This project had a very tight timeline, and many stakeholders each with their own objectives and priorities. The Ygrene financing process is extremely complicated and we had to work closely with internal teams in order to optimize a process that we did not have time to fully understand. Additionally, we collaborated with multiple Ygrene engineering teams, one of them overseas in a different time zone, in order to integrate the new web application with their internal systems. After our initial meeting with the executive team we had to completely scrap our original outlined approach and develop a much more aggressive iterative approach to better align with the internal decision making process.We had to develop the UX, design, and development in parallel while working against internal delays, unforeseen obstacles, and constantly changing visions and priorities.


After over 7 months of constant iterations, the end result is an elegantly modern application that empowers Ygrene contractors to do their job more efficiently. We successfully integrated with a variety of complex internal and 3rd party APIs to develop a sophisticated and connected experience for the user. The success of our collaboration with the Ygrene teams, can be seen in the polished execution of the end-product. The application is beautifully intuitive, allowing contractors to pick it up and start working immediately.

Resource Section

Integrated With Drupal

We integrated the news and resources section of the application with Drupal to allow for easy content management of contractor resources. The headless Drupal site allows the Ygrene marketing team to add/update/delete white-papers, videos, news and press, and slideshows found within the application without the need for development updates.


Browser Notifications with Deepstream

We used Deepstream and Amazon SNS to push instant notifications from Ygrene’s backend to the user’s desktop. The browser notifications allow the application to alert the user of project updates even when they are not actively browsing the site.

Visual Identity System

The existing Ygrene sites were difficult to use, and not geared towards good visual design. In addition to designing intuitive responsive displays for the application, we also added some visual flare wherever possible- including useful icons and fun backgrounds to emphasize Ygrene’s goal of making a complex financing process quick and easy. 


Project and Product Management

We managed multiple teams in multiple time zones; amidst shifting timelines and priorities all while managing the expectations of 5+ executive stakeholders and keeping the project on time and budget. We also provided guidance around product and process changes, drawing from our years of expertise to help decision makers arrive at conclusions that were both tailored to Ygrene’s specific goals, and in line with good industry practices. 

Preventing tech tragedies since 2009