california app design company

Building a Web App for Data Visualization

July 09, 2015

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.  

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. 

is a Yeti Alum. He takes pictures of people on couches, paints unflattering portraits of his coworkers, and gets excited about the future of human computer interaction. Follow Geoff on Twitter.

blog comments powered by Disqus
Building a Web App for Data Visualization https://s3-us-west-1.amazonaws.com/yeti-site-media/blog/.thumbnails/encompass.jpg/encompass-360x0.jpg
Yeti (415) 766-4198 https://s3-us-west-1.amazonaws.com/yeti-site-static/img/yeti-head-blue.png