Finding good engineers is hard, and Dev Shack stands out as one of the best. Matt and Mike both make sound decisions, collaborate and support other team members, and they move fast to deliver quality products.
Jeffrey Farber Founder and Technical Project Lead
Scope
We worked closely with Jeffrey Farber to build an end-to-end experience that allowed users to shop for energy prices online and to compare and manage their utility bill. In a nutshell, it is like Mint for energy. The project involved building custom charts with complex data display requirements and integrating them into an easy to use dashboard that tells the story of a user's energy usage and spending. The entire project consisted of a user dashboard for managing multiple meters, an auction and comparison page, and a checkout experience. Behind the scenes we worked with Jeff to synchronize energy usage data to the client and pull in data from multiple disparate sources.
Goals
Our primary focus was creating an experience that would educate users on the complex topic of energy pricing and utility bill management. As such, there were numerous iterations on the graphical and informational display components shown. The information needed to be displayed in a way that users could understand, which in turn would build trust in the UtilityAnswer brand.
Charts and Data
One of the challenging aspects of this project was creating highly interactive graphs. We wanted to control the charts with React's view abstraction layer while still having access to the power of D3.js. As a result we built a custom D3.js integration that all of the charts below are built on top of.
Above is an example of the auction landing page. The graph shows the energy usage and monthly cost estimate of energy given a user's utility profile and their energy prices. It is compared to the energy price provided by the utility company. You can see in the demonstration above that changing plan terms automatically adjusts the graph to show the relevant time period, as well as highlights the active period.
Our flagship Timeline Widget had various modes depending on what kind of data was presented. Below is the data smoothing view which also showed the potential savings of an offered contract.
This graph was also capable of smoothly animating to show just the monthly cost or savings. In the example above, the bars are all red, but in many cases it would be a combination of savings during some months and losses during another.
Bill Analysis Tool
The Bill Analysis component pulled actual line-items from region specific utility bills into a unified and easy to read format. It demonstrated to the user where the savings (or losses) would come from in a way they could compare to their paper utility bills.
We went through multiple iterations of the various charts, tools, and widgets, trying to make them have all of the relevant and useful data while still being easy and intuitive to use without being overwhelming. An earlier version of the Bill Analysis Tool is shown below.
Added Clarity
We created even more components to try to best explain how energy auction prices affected the users' bill. This component explains Supply vs Delivery, and the portions of each that make up the bill for any given month.
Account creation
The account creation flow required getting several pieces of important information from the user in order to generate an accurate price auction.
The above video demonstrates an early concept of the login flow. It evolved into the image below, which shows all of the steps to the user — making it easier to understand.
Auction Loading
Getting auction prices across energy distribution companies is a time consuming process. To convey that to the user we created an animated digital view into the auction, showing energy distributors competing to provide the user the lowest possible price. We were transparent about the number of bids collected across distributors and gave a preview of the savings (or losses).
We made several iterations to convey the process to the user in an easy to understand format, while the complicated queries and data processing happened behind the scenes.
Iteration 1: Proof of Concept
Iteration 2: Exploring a Podium paradigm
Iteration 3: Close to the final product
Conclusion
The UtilityAnswer project was a great experience that pushed our development skills forward. It challenged us to simplify complexity and focus on user experience in an industry that typically ignores it. We're proud to have worked alongside Jeff and are excited for what the future holds with UtilityAnswer.
- D3
- Flow
- React
- Meteor
Jeffrey Farber,
Founder and Technical Project Lead
Scaling a Music Education Platform
August 2022
Forte is an industry-leading platform connecting music students with ideal teachers through personalized matching. Students complete a detailed survey about their goals, while teachers create public profiles. Once matched, they schedule and attend lessons seamlessly on Forte’s platform, powered by Pure Audio—a proprietary technology delivering crystal-clear sound optimized for music instruction.
Enterprise Third-Party Risk Management
September 2018
Dev Shack provided Staff Augmentation for CyberGRX over 3 years, acting as the resident experts in Typescript, React, and GraphQL while helping develop their fulltime engineering team.