top of page
Background
Thermodynamic Cycle Visualization
Creating a tool to help students visualize and interact with thermodynamics concepts.
prompt
design a tool to help students learn thermodynamics
timeframe
ten weeks
team
three designers
two programmers
one project manager
skills
UX Research
UI Design
User Testing
purpose
to develop UI/UX skills by working on a unique product
deliverables
fully designed and prototyped Figma wireframes
We created an interactive tool that makes it easier for students to learn thermodynamics by including both visualizations and calculations.
Background
We were tasked by three professors from three different universities to create a beginner-friendly visualization and simulation tool for students who are new to thermodynamics. Although each of these professors were teaching thermodynamics, they were approaching the subject from a variety of different fields, including chemical engineering and mechanical engineering. We were not given much direction outside of simply creating a thermodynamics simulation, so a large part of our task was narrowing down a specific problem to focus on.
Problem
Thermodynamics is largely abstract and mathematical, which can make learning difficult for students who benefit from visual representations.
Our primary goal was to provide students with a convenient and helpful visualization tool to supplement their largely theoretical thermodynamics education with.
Opportunity
How might we create a tool that allows students to visualize complex thermodynamics processes in an intuitive and interactive way?
Solution
Solution
A web-based tool that includes numerical inputs that calculate essential values, graphs that reflect the changes throughout the cycle, animated visualizations for multiple cycles, and descriptions for each stage of the cycles.
Feature Overview
Number Input Fields and Value Calculator
Users are able to edit a variety of available fields within the tool, including the chemical used, the heat capacity ratio, the temperatures of the hot and cold reservoirs, and the pressures of the boiler and condenser. These values can be edited by typing in inputs or moving the slider and are used to calculate the Carnot efficiency displayed in the bottom right.
P-V and T-S Graphs
The values entered in the input fields also affect the shapes and sizes of the P-V and T-S graphs shown on the bottom left of the screen. These diagrams gradually fill out as the visualization progresses through the different stages.
Carnot and Rankine Cycles
Our tool includes two of the most fundamental thermodynamics cycles: the Carnot cycle and the Rankine cycle. Users can switch between the two by clicking on the dropdown menu at the top middle of the screen and selecting their desired cycle.
Open and Closed System Visualizations
The Carnot cycle includes visualizations for both open and closed systems. Users can switch between the two by selecting their desired option from the top of the visualization window. The open system is a representation of an engine, while the closed system is a piston.
Stage Controller and Description
Under the visualization is an interface for controlling the stages of the cycle. This interface displays the name and number of the current stage as well as for the stages that are directly before and after. Users can click on the arrows to navigate between the stages. Below this controller is a description of each stage, broken up into easy-to-read bullet points.
The Process
Process
empathize
industry research
user interviews
define
persona
POV statement
ideate
how might we's
brainstorming
prototype
test
sketches
lo-fi grayscales
user testing
empathize
Industry Research
We looked at a wide range of existing software in the realms of visualization, simulation, and calculation. These included products such as Wolfram, Desmos, LearnChemE, PHET, Algodoo, and The Powder Toy. Although not all of these were related to thermodynamics, they all contained valuable insights about different methods of visualizing complex interactions. Our deep dives into these tools helped us narrow down some of the features that we would be interested in implementing in our own tool.
A broad overview of just some of the things we looked at!
empathize
User Interviews
We conducted extensive user interviews with our stakeholders, including current thermodynamics students, previous students, teaching assistants, and professors. We focused our questions around common strategies for studying thermodynamics and the most challenging aspects of the subject in order to better understand how and what students tended to study. Additionally, we asked about their experiences with existing simulation solutions that are currently available and inquired about which elements of each were most useful. We created empathy maps to organize our findings and derive hidden insights. From these user interviews, we were able to narrow down which thermodynamics concepts in particular we should focus on: the Carnot and Rankine cycles.
Andrew
define
POV Statement
From the data we gleaned from our user interviews and research, we crafted a POV statement that reflected our target user group. This helped us focus our efforts and narrow in on the specific needs of our users without getting distracted by unnecessary features.
A student who is a complete beginner to thermodynamics needs to have an interactive visualization tool in order to understand the abstract concepts of the subject.
define
Persona
We also created a persona around which we could base our design decisions. Having a well-defined example of a user made it much easier for us to figure out optimal design choices, as we could readily imagine how this user would react to our tool.
ideate
How Might We Questions
To begin the ideation phase of our design process, we worked on writing a few strong and distinct HMW questions. These questions gave us starting points to work from and helped us better understand what specific user needs we should focus on addressing.
How might we create a tool that allows students to visualize complex thermodynamic processes in an intuitive way?
ideate
Brainstorming
Once we had our HMW question, we decided to engage in a variety of team brainstorming exercises to come up with ideas. We participated in activities such as thinking caps, shout outs, and crazy-8s. This quantity-over-quality and “no bad ideas” approach allowed us to contribute any and all ideas that came to mind, resulting in many unique and effective directions to explore, including an interactive input field and graphs that correspond to the visualization. This brainstorming laid the groundwork for our sketches and eventual hi-fi mockups.
prototype
Sketches
After our brainstorming session, we worked to transfer our ideas onto a visual medium by sketching out layout ideas on paper. This flexible format allowed us to experiment with different ways of displaying our desired features on the screen and gave us a rough idea of which layouts would work better than others.
prototype
Lo-Fi Grayscales
Once we had an idea of what general layouts to pursue from our sketches, we moved to Figma to start designing wireframes. This allowed us to have an even better sense of what was successful and what was not, as well as giving us the capability to prototype our designs and have users test them out.
test
User Testing
We had a number of different grayscaled layouts and had to choose one to finalize. We decided that the best way to do this would be through user testing with both students and professors. We utilized A/B testing as well as more general testing methods to understand which of our layouts was the most clear, intuitive, and easy to use. The conversations that we had with these users guided us to our most successful iterations, which we finalized and added color to in order to create the hi-fi wireframes.
Next Steps
Given more time, there are several additions that I would like to make to this tool. First, I would refine the input fields that are included and make sure to include values that are necessary for the calculation of a variety of different thermodynamic outputs. During user testing, some students indicated that there were other combinations of inputs that would yield the very same Carnot efficiency, so adding in those inputs would make the tool much more flexible and allow students to use it in more creative ways.
I would also like to add more cycles to this tool. It was a good idea to start with the Carnot and Rankine cycles, as they are the most fundamental cycles in thermodynamics, but now that they are largely completed, it could be useful to explore other common cycles, such as the Otto or Diesel cycles. Including these would allow students to play around with an even wider range of tools to aid in their thermodynamics education.
Finally, I would like to add in functionality for the history, limitations, and applications sections of the tool. These buttons are located at the top right of the screen, but currently do not navigate to anything. Having these buttons lead to additional supplementary information could prove very useful for students who benefit from educational content taking on a myriad of different forms.
Takeaways
Takeaways
This project was unlike anything that I have worked on before, and I learned a lot from my experience with it. First, I realized just how important it is to be familiar with what you are designing. Especially for an educational tool like this one, it is difficult to know how best to convey information if you do not know the information yourself. This is why I made sure to familiarize myself with the Carnot and Rankine cycles as much as possible over the course of this project, and I think that this effort really paid off.
Another related takeaway is that user testing can reveal a lot about what you are doing right and what you are doing wrong. Even though I made sure to learn as much as possible about the two cycles as I could in the time I had, there were still things that I missed that users pointed out during our testing sessions, especially with regards to the inputs. The risk of underestimating user testing is especially high for projects that the designers are more familiar with, as it is easier to become convinced that you know everything already. I will make sure to always champion user testing for all of my projects, even if it may seem that I covered all my bases.
Finally, this project really hammered in the fact that having a specific focus is essential to good design. As I mentioned earlier, we started this project with almost no direction -- all we knew was that we had to make some kind of visualization for thermodynamics. Only by taking the initiative of learning the basics of the subject and truly understanding where we could make the most impact was how we were able to make as much progress as we did, and I intend to continue this behavior in future projects.
bottom of page