The Building Performance Database (BPD) web portal (https://bpd.lbl.gov/) provides “the nation’s largest dataset of information about the energy-related characteristics of commercial and residential buildings”[1] to the public to allow them to explore and visualize building energy performance in a multitude of ways. The BPD website had originally been implemented in Java and hosted as a web application using a Java Applet. However, Java Applet support was coming to an end, so the application needed to be re-written using a supportable web technology. The U.S. Department of Energy and Lawrence Berkeley National Laboratory engaged Earth Advantage, a non-profit organization focused on fostering the adoption of green building standards, to oversee this work, and Earth Advantage, in turn, engaged dymaptic, along with RAINTech, another provider of software development services, as partners in the development effort.
Our Approach
At dymaptic, our many years of software engineering have fostered an acute awareness that the technologies underpinning applications themselves have a lifecycle, so it is imperative for any ground-up custom application development project to employ technologies that are both well-established and have a bright long-term outlook. We also know well that a broad application re-implementation project represents a unique opportunity to present users novel and immersive experiences leveraging best-of-breed technologies. So, along with our project partners, we first sought to engage with our client and to thoroughly explore the project’s parameters and gain a deep understanding of what from the existing application the client wanted to recreate, what they wanted to improve upon, and what they wanted to reinvent. We then used that information to determine what technologies would be best-suited both for building the application now and maintaining its viability into the future.
Our Solution
Working with our project partners and drawing from our broad knowledge of modern web development, we surveyed available technologies and together concluded that Angular would be best for building a modern and highly interactive user interface, Google Charts would be ideally suited for the application’s charting capabilities, and Python would be perfect for implementing the robust data handling the application required. We engaged with our client to determine the capabilities and experience to be implemented and collaboratively assembled a product development roadmap and comprehensive design mock-ups to ensure the project stayed on track and the end result would be pixel perfect.
With the technological underpinnings and project outline settled, we proceeded with the application implementation in two-week sprints. During development, we kept in constant communication with our client and project partners to gather feedback and ask clarifying questions – employing industry-standard agile development methodologies to regularly refine requirements and allow our client to see their expectations being realized every step of the way. As we worked, we pulled apart and rebuilt every component and feature of the existing application – from the interactive histograms, scatterplots, and tables to the extensive options for filtering the large datasets of the Building Performance Database, from user registration and authorization to user storage and retrieval of their own derived datasets. In doing so, we reimagined and modernized each piece to provide a faster and more responsive experience. We also applied that same attention to detail to new additions to the application, such as the walkthrough tutorial, new graphs, and novel data filters. Throughout the project, we ensured adherence to modern web accessibility standards by enabling capabilities such as keyboard and screen reader interaction and testing color contrast for color-blind users.
The Bottom Line
The dymaptic team, together with our project partners at RAINTech, leveraged the breadth and depth of our custom web application development experience to envision and efficiently deliver the wholesale migration of a high-visibility, federal, public-facing website from a dying technology stack to best-in-class modern web technologies. The final product is the robust, clean-looking, and accessible Building Performance Database web portal that exists today, which provides an experience that is faithful to its predecessor while also offering greatly improved responsiveness, modernization, and additional capabilities. As a result of our work, users can utilize the Building Performance Database with greater depth and ease than ever before – and can continue doing so for years to come.
[1] Source: https://bpd.lbl.gov/
Featured image credit Tablet Screen Stock photos by Vecteezy
PROJECT DETAILS
CLIENT
Earth Advantage
DATE
February 2020
TECHNOLOGIES
Angular, Python, D3