Khoi Nguyen Truong

Case Study: Hydrologic Cycle


March 2014




Faculty Partner
Web Designer
Educational Technologist


Project management, user research, usability testing, user acceptance testing

Active contributor

Sketching, content strategy, wireframes, interaction design

Want to collaborate?

Let's talk!

Hydrology site

The Water and Climate Education Program (WACEP) was developed to teach water management and climate change practitioners in the Caribbean about the effect of climate change on water. The goal is to help practitioners better mitigate risks and manage island water levels. The faculty taught this class via online streaming. Although the course material is private, the Hydrologic Cycle interactive is publicly available.

The interactive helps practitioners visualize how water circulates through land and air, and how changing variables can affect it. There are also options to view the data in a graph or table formate after clicking the "play" button.


How to visualize the relationship between climate, land and water variables with informative imagery and data?


Caribbean scene with adjustable variables and 3 ways to view the same data for various usage.


Research included comparing and contrasting existing static depictions of the hydrologic cycle as explained in textbooks and online. As simple as it seems, the water system is quite complex. It was important to understand how the cycle worked, but also how the students could use the interactive in their day-to-day work as reference.

Activities and outputs: competitive analysis, comparative analysis, information architecture, survey, interviews

Hydrology site


There was at least 7 versions of the imagery of the hydrologic cycle before it was signed off by the faculty partner. Then it was time to understand the math behind it all for an accurate depiction of the interrelationship of the various variables. The output was represented in 3 different ways (imagery, graph, table) to account for different learning needs.

Activities and outputs: collaborative sketching, task analysis, lo-fi wireframes, content strategy, interaction design, paper prototypes

Hydrology site


During my research, I found that Caribbean users mostly used PC's and IE as their main browsers. I made sure to test for that in addition to testing on Mac's and more modern browsers. After the interactive was in use, I collected feedback and iterated on the design to have explanatory text next to the graphical element as opposed to on a separate tab.

Activities and outputs: hi-fi wireframes, user acceptance testing, usability testing, clickable prototype

Hydrology site


Caribbean practitioners who were taking this course found the interactive very helpful and used it extensively in their homework assignments. They also appreciated that it was a public link so they could share it with their colleagues. Some even used it to teach a high level version of the hydrologic cycle to their children.

Live Site

Hydrology site

Want to collaborate?

Let's talk!