Project Background
Residential heating accounts for over 15% of greenhouse gas emissions in Massachusetts. Transitioning from fossil-fuel heating systems to heat pumps is a key step in the state’s overall decarbonization strategy, but appropriately sizing heat pumps is critical to realizing their full decarbonization benefit.
Open Source
Duration
Team
Designers, PM, Subject matter expert, Javascript engineers, ,Rules engine engineers, Data persistence engineers
My Role
I led the UX design, collaborated closely with the product manager and engineers across front-end development, run-time engine, and data persistence. My responsibilities included conducting research, reimaging the workflows and product rooadmap, adopting a robust design system and validating design solutions
Objective
This project involves moving a calculator tool from an Excel spreadsheet into a web application to improve the workflow of volunteer Heat Pump Coaches and later make the tool accessible to the public.
Outcomes
Simple inputs
Inituitive data management
Informative reports
Challenge #1
Understand the context
The evaluation serves as a pivotal step in facilitating homeowners' transition to heat pumps. At Heat Smart Alliance, coaches are volunteers dedicated to serving local community members. The initial challenge involves comprehending the evaluation's broader context within the transition process of each home. More importantly, it entails zooming in to understand the intricacies of how the evaluation is conducted.
My Approach
Upon joining the project, I observed the team focusing on developing a survey to differentiate users based on their experience levels. Given the diverse and volunteer-based nature of our current user group, I advocate for ensuring that the tool offers equal training opportunities and access to instructions for users of all experience levels. This approach will promote inclusivity and empower all users to effectively utilize the tool regardless of their proficiency level.
why not survey?
Small user group, diverse and volunteer-based, usability-first
The tool places a strong emphasis on usability, recognizing that traditional surveys may not yield the necessary insights into its daily use. Instead of relying solely on surveys, we prioritize methods that offer deeper understanding and engagement with users' experiences in real-world scenarios.
Research Goal
1
Study the work flows
The HLA tool currently serves as an MVP for our product. However, significant workflow changes are expected. Conducting research will provide insights into current user behaviors and interactions with the tool.
2
Identify pain points
Identify and analyze the pain points and barriers encountered using the existing tool for both the users and the organization
3
Define metrics
This research will provide insights in the areas we will be measuring the success of the design
Interviewing the coaches
With help from the Heat smart alliance, we spoke to the coaches regarding experience using the existing tools, their core work flows and their needs and painpoints.
User pain points
1
Steep Learning Curve
To use the worksheet properly, users need to be familiar with excel tool, learning the applied logics takes a long time
2
Complex workflows
The workflow is complicated by taggling between tabs to find instruction and manually iterate on inputs to identify optimized results
Orgnization pain points
1
High training requirements
The steep learning curve of the Excel-based tool demands a high level of efficiency for new to intermediate-level users to comprehend and utilize effectively
2
Limited service area
Currently, weather data are saved in the Excel itself for only 6 weather stations to avoid data source connection complexities in Excel
3
High maintain cost
Manual updates to the excel file is required every few months to incorperate new weather and home data
Challenge #2
Design a new work flow
By integrating web technologies and nationwide weather APIs, the new tool aims to enhance functionality, deliver more accurate data, and broaden service areas.
Recognizing the existing workflow's flaws and the coaches' improvisation methods, the implementation of the new platform will necessitate a significant overhaul of the workflow. The challenge lies in designing a streamlined process that seamlessly integrates the new tool while addressing the specific needs of the coaches.
A few new things to consider
1
Existing patterns
Maintaining consistency with current user behaviors in the HLA tool is crucial. By inheriting these behavioral patterns, the new design ensures familiarity and ease of use for users.
2
Weather API and web tech
Weather station selection is not required. Instead, weather data will be obtained from an on-line source based on the street address
3
New functionalities
Automate instructions and warnings; Generate report and related resources; Expand service areas; Allow return modifications ; Automate evaluations based on home style, age, heating fuel
Take a look at the intake form
In the old workflow, a coach typically hands out an intake form to homeowners, with the expectation that homeowners will fill out all the necessary information. The coach then manually transfers this information to an Excel sheet. With the integration of new web technologies and weather APIs, we have reimagined the required information for the intake process. This ideation process aims to streamline data collection and enhance accuracy by leveraging real-time data from the web and weather sources.
Wireframing
The team proceeded to actualize the vision by creating wireframes and incorporating detailed information
Mid-fi design
Building upon the foundation of the user flow diagram and wireframes, I have developed the first iteration of the mid-fidelity prototype. This prototype serves as a tangible representation of the envisioned user experience, facilitating further refinement and validation through user testing and feedback loops.
Challenge #3
Dance with constraints
With limited time and a volunteer-based team, the project faced the challenge of efficiently developing a testable release for gathering user feedback. Strategic planning was essential to optimize resources and ensure progress within the constraints.
The Beta 1
The primary goal of this version is to provide valuable insights to inform the next phase of design and development. To achieve this, the team prioritized functionality over ancillary features. We focused our engineering efforts on the core functionality, identifying natural gas— the most used energy source and source of most usability issues—as the main focus. Additionally, we deferred user registration and case management (dashboard) features to subsequent phases, as they are peripheral to the core workflow. This strategic approach ensures that the MVP delivers essential functionality efficiently, setting the stage for iterative improvement based on user feedback.
Beta 1 scope document
Advantages vs. HLA Beta 7 Excel template
Uploading a .csv file with gas usage will be much faster and less error prone than manually transferring data from the .csv file to the Excel template.
This version will work for any location in Massachusetts vs. just locations in eastern MA that are well represented by one of the 6 weather stations embedded in the Excel template. This release may also work in adjacent states served by National Grid or Eversource.
Weather data will always be up to date to at least 10 days before the current date. The 10-day exception is deemed acceptable and is due to a limitation in the Open-Meteo historic weather data source.
Automatically finding the balance point [and excluding outlier billing periods] will save user time, reduce an opportunity for “pilot error” and substantially reduce the training/learning required to use this tool.
Disadvantages vs. HLA Beta 7
Users will not be able to save a “case” and thus will have to repeat all data entry if they have a reason to repeat the analysis for the same home, such as obtaining additional usage data or new information about the thermostat settings or existing heating system efficiency.
Only handles natural gas; fuel oil and propane not addressed.
Beta 1 work flow
With a clear understanding of the phase scope, I have refined the workflow to ensure alignment with project goals and priorities. This streamlined workflow optimizes efficiency and focuses on delivering essential functionality to meet user needs.
Introducing the design system
Following thorough reviews with the engineering team, we chose a design system that's elegant, simple, and aligns with our tech stack. Initially leveraging out-of-the-box components for Beta1, we later customized them as complexity grew, documenting modifications in Storybook for future reference.
Design as a team
Collaborating with developers, we integrate their input throughout the process as we adopt and customize the design systems to fit our project needs. This entails delving into the code base and implementing corresponding changes as the design and development evolve.
Hi-fi Prototype
Based on the refined Beta 1 workflow, I have created a high-fidelity design featuring three simple steps and a final analysis page. This design iteration prioritizes user simplicity and clarity while providing comprehensive insights for informed decision-making.
Beyond Beta 1
Beta 2 release, the Minimum Viable Product (MVP)
Goal: An refined prototype that incorporates feedback on Beta 1 and allows users to sign in and view, edit, and/or re-run cases they’ve previously run. Existing HLA users will prefer to use this tool vs. the HLA Beta 7 for homes that heat with natural gas.
Supported User Cases: same as Beta 1
Additional features:
A user can sign in and view, edit, re-run or delete cases they’ve previously run. All inputs for each case will persist via an on-line database.
A user can add notes to the case to recall special considerations.
A user can export each graph in a standard image format such as .png (preferred) and/or .jpg.
A user can export key graphs (heat load and UA comparison) to a PDF file.
Advantages vs. HLA Beta 7 Excel template
Same as Beta 1
Disadvantages vs. HLA Beta 7 Excel template
Only handles natural gas; fuel oil and propane are not addressed.
Beta 3 release, last before 1.0 release
Goal: Replicates all functionality of HLA Beta 7 including allowing analysis of fuel oil and propane usage. Existing and new users can provide feedback that could be incorporated in the 1.0 release
Supported User Cases: same as Beta 1
Additional features:
A user can choose natural gas, fuel oil or propane as the heating fuel
If the user chooses fuel oil or propane, a UI is provided to allow manual entry of the delivery data in (date, gallons) pairs. Delivery data can be entered in any order and will be automatically sorted by the tool into ascending date order.
Fuel-oil or propane deliveries will be automatically included/excluded from the analysis via the same logic as HLA Beta 7. Outliers will be automatically excluded using similar or the same logic as for natural gas.
If not included in previous releases, the tool will provide a graphical display of UA values by billing or delivery period. See Beta 1 for details.
Allows users to enter text snippets that will be used to generate a full report on an analysis.
Exports a report on an analysis in .pdf format.
Advantages vs. HLA Beta 7 Excel template
Same as Beta 2, MVP
A user can generate a full report on the analysis much faster, by entering text snippets in report template fields.
Disadvantages vs. HLA Beta 7 Excel template
None.
Challenge #4
Simplify the complexity
Despite the potential for a sophisticated workflow, our focus has always remained on simplicity. Through iterative design processes, we have explored various solutions, ensuring that our designs prioritize user-friendly experiences. These refined solutions have been successfully delivered to the engineering team.
How might we use the simplest visual language to effectively convey multi-layered complex information?
The data table is when user upload their enegergy use history (3 years) as a csv file. By analyzing the usage data during winter, summer, and shoulder months, the tool calculates a set of data for review and assists in generating graphs.
I choose this data table as an excample to showcase our interative design process.
Excel worksheet
Web app designs
Design with the end users
Following internal critiques, we narrowed down to two favored versions. Subsequently, we conducted A/B testing with users to observe their interactions with the data table. By measuring metrics such as time spent on task, completion rate, and user reactions, we finalized the design.
Beta 1 Design
Metrics for Beta 1
1
Time on task ↓ 50%
With the input of 5 coaches, our research revealed an average 50% reduction in time on task.
2
Task completion rate ↑ 25%
All coaches were able to successfully complete the tasks assigned to them. This success rate was notably lower with the HLA tool, particularly among newer coaches.
3
Training time ↓ 45 mins
We asked relatively new coaches to complete the task and it turned out with minimium instructions, they complete the task
Reflect
A Collaborative design process
We worked closely with coaches of varying experience levels to identify and address their pain points. This approach ensured the tool seamlessly integrates into their workflows, resulting in a more user-centric and effective solution
Agile takes different forms
We hold stand-up meetings before and retrospective after each work session, operate in short cycles, and deliver value after each cycle. Throughout this process, we integrate user and SME inputs, adapting our approach as needed. Although timelines may vary, we maintain an agile mentality throughout our workflow.
Communication in Design
In our volunteer-based team, communication is just as vital as the design process itself. With the constant onboarding of new members as we design and develop, every design decision requires thorough explanation and alignment with the team. Effectively communicating design intent becomes essential, necessitating clear storytelling and inclusive discussions to ensure that everyone understands the vision and can actively contribute to the effort.
Design for social good
With a team comprising individuals from diverse backgrounds, each committed to contributing to a better society through civic tech innovation, our collaboration at Code for Boston (formerly the Code for America Boston chapter) has been both enjoyable and meaningful. It is within this collaborative space that we have found purpose in leveraging our skills and experiences to drive positive change and create impactful solutions for our communities.
Next steps
Dashboard, other ful type
Allows users to sign in and view, edit, and/or re-run cases they’ve previously run. Replicates all functionality of HLA Beta 7 including allowing analysis of fuel oil and propane usage
Beta 2, 3 and official releases
Replicates all functionality of HLA Beta 7 including allowing analysis of fuel oil and propane usage and incorporates some user feedback from Beta 3.
Support rapid growth of the data set of cases analyzed for use in the UA comparison graph, and filtering of data included in the comparison based on home style, age, heating fuel
