Dataflow is a Concord Consortium product that brings together computational thinking and real-world experiments. The interface I'm redesigning connects sensors, logic. In the classroom students use this interface to learn about what makes a plant grow, and some of the key sensors are light, soil moisture, and carbon dioxide. These are connected to a Raspberry Pi which in turn relays information to custom graphing software.
Sherry Hsi is the PI on the product and she brought me in to a team of user experience researchers and engineers. The piece I'm redesigning is below. Students use this interface to control actions and gather data. For example, if the carbon dioxide in their plant's tank goes below 20 mEq/L, they activate a servo to open a vent in the side of the chamber.
Students using this application have a set of specific goals, both self-motivated and set by their teachers. Above is a sample of the existing interface. The temperature sensor is connected to logic that triggers data recording. I designed a job story for the two primary use cases, designing a program and running an experiment.
My first design was an incremental improvement over the existing interface. Blocks on the canvas were reduced in size and aligned into readable sentences, allowing room for icon and logic drawers to be visible on the sides of the screen.
My palette of vibrant hues and bespoke icons evokes the ebullient branding of Concord while communicating important differences in the functions and roles of elements on the canvas.
Iterating based on feedback, I increased the size of the canvas to allow more room for the active blocks. Sensors and logic blocks are still visible and available for easy access.
Together our team designed the behavior of data recording, a key component of Dataflow's functionality.
The large icons seeemed to take up too much canvas space on the page, so in my next iteration I collapsed the sensors, logic, actuators, and data tools into a tabbed sidebar.
The tabs at the top felt logically separate from the right sidebar, so in my final iteration I collapsed the elements into an accordion sidebar that accomodated the two primary user activities: accessing saved files and creating new programs with action blocks.
This design did best in user testing because high school students in the classroom want to feel like they're using mature software, not childish picture blocks. It was a great opportunity for me to check my assumptions. The custom icon elements I enjoyed designing the most were the least pertinent to the user's real world needs.