How we built Encompass
EKM Metering, designs electricity, gas, and water meters which have the ability to push data into the cloud. With this technology EKM wanted to give their customers a way to see their utility data. Yeti collaborated with EKM to create Encompass, a web app with customizable widgets, that gave customers a versatile way of visualizing and managing their energy data. Here is a look at some of the methods we used to build Encompass.
When we started working on Encompass it was necessary to gain insight and understanding into EKM's users and their needs. That research and knowledge helped to shape the requirements for a successful first release of the product. This phase of a project is called “discovery” and it is integral to our process at Yeti. Discovery is a week long intensive session where we workshop and co-create with an organization to clearly understand the problem we're going to solve and the goals of the product we're going to build.
Once we had a clear and shared understanding of our goals we were able to work in two week sprints with weekly checkin calls to quickly tackle the biggest challenges. We focused our first sprints around understanding what energy data would be most vital to see and how to visualize it. With the content established we built the structure of the app around that data, making sure that the structure and flow would suit the needs of the end user.
The data visualizations we created used D3.js. and required our designers work directly alongside development. With the data visualizations we had a developer and designer collaborating to create the widgets for visualizing energy data. The two disciplines combined allowed us to design within technical limitations and interactive requirements in the most efficient way possible.
Prototyping in Code
The structure of the app was built in Angular.js which allowed us to prototype in code. We took whiteboard sketches and wireframes from design and turned them directly into functioning code that the client could click through. With real world feedback from the client and users we could quickly iterate on the interface and flow to make sure the overall product was doing it's job.
Iteration and rapid prototyping make quality products. Over the course of a project knowledge gaps will shrink and objectives will become clearer. A good design and development team needs to react quickly and thoughtfully throughout the entire project, trying a variety of ideas and allowing the product to evolve into the best solution. Using these methods will help to ensure that everyone is on the same page working towards a successful solution.