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...

Has Technical Debt Stalled Your Software Project? Here's How to Fix It

Experiencing bugs, missed deadlines, and constant delays? Your software project could be stuck technical debt. Here's how to spot the warning signs, fix the root problems, and get development back on track!

What's an MVP? : Read THIS Before Building Your App

When you have a brilliant idea for an app, it can be incredibly tempting to dive straight into building the full-featured version right away. But if you want to give your idea the best possible shot at success, there’s a smarter, safer way to start: with a Minimum Viable Product, or MVP.

How to Hire the Right App Development Company in 2025: A Step By Step Guide

Hiring an app development company can feel overwhelming - but with the right approach, it doesn’t have to be. These seven steps will help you cut through the noise, make informed decisions, and find an app development team that's truly equipped to bring your vision to life. From budgeting and timelines to UX, collaboration, and long-term support, this guide will help you hire an app development team that can bring your vision to life.

Browse all Blog Articles

Ready for your new product adventure?

Let's Get Started