A Javascript framework built by Google used for building scalable web, mobile, and desktop applications.
Ygrene
Re-Imagining a Contractor Portal for this San Francisco Green Energy Giant
2017
Technologies
- Learn more about Angular
- Learn more about Drupal
A flexible open source CMS focused on security and scalability, great for building complex websites, applications, and back-end portals.
- Learn more about NodeJS
An event-driven, lightweight JavaScript runtime built on Chrome's V8 JavaScript engine.
Background
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.
Challenge
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.
Result
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.
Modern Responsive Application Design
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.
Integration with In-House Back-End
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.
Filterable / Searchable Projects
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.
Adaptive Project Detail Displays
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.
Global Notifications
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.
1 / 5
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.
AWS
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.
Comprehensive
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.
