A flexible open source CMS focused on security and scalability, great for building complex websites, applications, and back-end portals.
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.
By starting with interactive wireframes, and then iterating on the visual design, we were able to work with stakeholders to produce a refined functioning application that seamlessly responds to provide an optimized experience across all devices.
Ygrene is a global company with teams working on many projects, in many different time zones. We worked with internal engineering teams in the US and abroad, while they were in the middle of a complete system overhaul, in order to adapt the existing API to work for the modern application we were designing. We dictated API changes, and worked alongside Ygrene engineers to minimize back-end changes and overcome obstacles to integrate the new Angular application with a back-end Ruby system not built for the complex experience that we envisioned.
We built a high-functioning project listing page that allows contractors and the internal Ygrene team to easily hone in on specific projects within a database of thousands.
The internal Ygrene loan process is complex but needed to be easy and straight-forward for contractors. We designed and developed the Project Detail pages to adaptively display only the pertinent project information for each step of the application process. This allowed us to drastically reduce the amount of information shown on the page, which allowed for a sleeker design and better user experience.
We combined the messaging and task sections of the old application into a single notification area in the new application so that contractors only had to look at one area to find all notifications and to-dos for their projects.
We integrated the news and resources section of the application with Drupal to allow for easy content management of contractor resources. The headless Drupal [link to blog article] 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.
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.
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.
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.