yeti logo icon
Close Icon
contact us
Yeti postage stamp
We'll reply within 24 hours.
Thank you! Your message has been received!
A yeti hand giving a thumb's up
Oops! Something went wrong while submitting the form.

Building a Web App for Data Visualization

By
-
July 9, 2015

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.  

Encompass Collaboration

Discovery

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.

Agile Sprints

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.

Interdiciplinary Teams

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.

Takeaways

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.

You Might also like...

Section 174Section 174 is Killing Innovation: A Taxing Tale for R&D

Amidst the labyrinth of tax legislation, a formidable obstacle looms large for American innovation: the notorious Section 174. Join us as we explore its impact on the R&D landscape, and the steps you can take to reverse this challenge to innovation.

hands holding sparklersA Year of Innovation: Highlights from 2023

This past year we've been lucky enough to work on an enormous range of projects - including setting a Guinness World Record! Join us as we take a look back on everything we've built in 2023.

QA testing materielsSquash Those Bugs: Why QA Testing is Crucial for Software Development

For an app to be successful, it needs to be flawless. QA testing can help you ensure that every interaction with your app is seamless.

Browse all Blog Articles

Ready for your new product adventure?

Let's Get Started