Blocpower Mobile App Development

Improving Productivity for Engineering Audits
Expertise

, ,

Client

Blocpower

Timeline

12 weeks

Challenge

Blocpower is an organization based in New York, New York that employs solar and energy efficiency technology to help churches, nonprofits, and small businesses slash their energy costs.

As part of Blocpower’s program, engineers must perform an on on-site energy audit that does an extensive assessment of a building’s energy usage. But this was at a cost.

Engineers could spend an entire day doing audits. And with up to three engineers auditing buildings at a time, this was a huge amount of spent resources.

They needed a tool that could speed up their work and streamline data collection.

How might we improve efficiency and speed for building audits?

Scope

There were two distinct phases in this project. First, we made a proof of concept prototype. Then, we were asked to flesh out the tool into a more complex app that their team would be able to maintain.

Constraints

Phase one of this project was only four weeks. The second part of this project was constrained to eight weeks with a budget of $25,000.

Implementation

During our process, dedicated two developers and a designer to each phase of the project.

Our Goal

The goal was for Standard Beagle to build an initial technology prototype that would set up the app architecture, navigation framework, data infrastructure and barebones UI so that Blocpower’s engineers could build out the app to further specifications.

Our Solution

Standard Beagle worked with Blocpower to develop an offline-first mobile app prototype that would address pain points with the auditing process.

Results

Standard Beagle handed off the app as intended to Blocpower and continued to provide guidance and support for two months as the company’s engineers took over updates and maintenance.

The app continues to be worked on and maintained by Blocpower. Company leaders said the app has reduced the time in field by BlocPower engineers, increasing productivity.

Our Process

Understand

We started with understanding how Blocpower engineers do their work. We organized meetings with the IT team and engineers to understand all aspects of the work they did.

Stakeholder Interviews

Blocpower had used several off-the-shelf form builder apps to collect data from the audit; however, the apps had drawbacks.

Constant connectivity
The apps required the engineers to have constant internet or phone connection. This posed a problem because many buildings in the city had poor cell phone connections and no Wi-Fi for the apps to work with.

Poor UX
The form builders were difficult to work with because the information architecture Blocpower needed was more advanced than what the form builders could handle. For example, buildings needed to be divided into multiple levels of child entities, such as windows, rooms, hallways, etc., but the form builders were not advanced enough to manage this complexity.

Inability to integrate with future enhancements
Blocpower planned to take advantage of sensors to assist engineers in gathering data. The existing apps were unable to expand in order to allow these enhancements.

Limited functionality to capture photos
The form builder apps were not able to add galleries of photos or assign them to child entities.

Blocpower initially decided to use Android devices in order to reduce the cost of deploying devices for each of its auditing engineers. The company had an internal development team, but the engineers did not have the skills to set up and start an Android application project.

Explore

Proof of Concept

We explored several options for a solution on this project.

Blocpower initially decided to use Android devices in order to reduce the cost of deploying devices for each of its auditing engineers. The company had an internal development team, but the engineers did not have the skills to set up and start an Android application project.

The goal was for Standard Beagle to build a initial technology prototype that would set up the app architecture, navigation framework, data infrastructure and barebones UI so that Blocpower’s engineers could build out the app to further specifications.

We prototyped the Android app as a proof of concept. We used Material Design as the foundational library for this app.

Design

After our prototype proved successful, Blocpower reengaged with us for a more extensive project to expand the app.
While the Blocpower team initially had thought they would use Android tablets for the app, they decided to go with iOS instead. They were able to purchase multiple iPad Minis at a lower cost than Android tablets. We made plans to adapt the app from Android to iOS.

We also had several other requirements to solve for.

Offline First
Standard Beagle decided to use Couchbase Mobile which allows the app to function in areas of the client’s territory when no Wi-Fi or mobile signal is available.

Data Extensible
The Blocpower team already had experience using React Web. So, building on React Native allowed Blocpower’s team to customize the UI more easily and add new data objects using technologies they were already familiar with, such as javascript and React components.

Image gallery and future enhancements
Couchbase Mobile supports and replicates binary attachments natively. This made it relatively easy to add a photo gallery to every data object.

Create

Our team built out the required flows, authentication, data synchronization as we created the app.

Front-end screens
We built the screens using the iOS design system and JSON schema. For video and image upload, we use Amazon S3.

Validate

User Testing

We wanted to ensure that the flow of the app was easy and intuitive. We conducted remote, moderated user testing with four Blocpower engineers.

We conducted the test using Lookback, which allowed us to see where the engineer tapped areas of the iPad. We collected the feedback.

Key Takeaways

  • The biggest problem we discovered is in the UI menus. Using the iOS hidden menus caused confusion as to where to add a building, a system and components.
  • We should make some tweaks to the UI — replace 3-dot menu with “Add” button to explicitly state where to add systems and components.
  • Should tweak the keyboard so it doesn’t interfere with the form fields.
  • Should provide visual feedback of a save — “Saved” message appears and fades away — to provide reassurance that the data is saved.
  • At some point in the future, the app should autosave as each field is edited. This will allow the save button to be removed and the work to be completed seamlessly.

Standard Beagle handed off the app to Blocpower as we had planned and continued to provide guidance and support for two months as the company’s engineers took over updates and maintenance.

Our Solutions

We help you understand your customers through a combination of qualitative and quantitative research, from user interviews through usability testing.

We design the experience that best suits the customers' needs and motivations through wireframing, visual, and interaction design.

Lower the risk of innovation through our design sprint process. Our certified facilitation experts will help you pinpoint an idea, then prototype and test to give you solid answers.

Our experienced, full-stack team is well-versed in building features and enhancements on a continuous basis. We work with you to decide the platform and develop custom solutions.