Creating interactive scrollytelling visualizations for the instruction of abstract Quantum Physics concepts. These visualizations were used as course material for EC 3040 Semiconductor Devices.
Duration: January 2020 - Present
Team: Shreya Shenai, Lu Meng, Qu Wong
Role: Contributed by getting well-versed with Quantum Physics, and Ideation. Took lead on the prototyping.
Context: Graduate Research Assistantship Project at Georgia Tech.
Quantum Physics is an interesting field of study, and crucial to the understanding of many modern devices and engineering concepts. In many ways, it is counter-intuitive, and relies on mathematical equations of energy to explain observed phenomena, as opposed to the more physical and visible nature of Newtonian Physics.
The concepts, as a result of this heavy reliance on complex mathematical formulae, are very abstract, and extremely hard to visualize. Visualisation is a powerful concept that facilitates learning significantly. Many students who are visual learners, as a result face difficulty in grasping these concepts.
This observation is echoed in the CIOS evaluations of students taking the course EC 3040 Semiconductor Devices at Georgia Tech. The course attempts to provide instruction for a lot of these concepts, but students often struggle to visualize them.
I have worked for a period of a year as a designer and developer to create visualizations that professors can use in this course as course material. I have intended for this project to be a useful tool for students and instructors alike. In this case study, I will share all I’ve learned about design as a result of these efforts.
You cannot design technology to educate others, without having a solid grasp of the content yourself. The initial phase of the project was all about learning the concepts that we wanted to instruct the students. While spending some time on educating ourselves initially helped us get started, learning the concepts as we went along has been one of the core activities of this project.
I was fortunate that I had a basis for these concepts due to my first year education at IITG including engineering subjects.
I was fortunate enough to have some very good resources at my disposal to learn these concepts. A few of the resources I've utilized continuously have been:
The textbooks were useful in not just communicating the concepts, but also in putting me in the shoes of the students. Employing a user centered approach, I was able to empathize with them on the difficulties of grasphing the subject.
3Blue1Brown videos were useful in develop an understanding. It is a channel that creates visualizations for the most fundamental concepts of quantum physics. However, I struggled to find their application in Semiconductor devices context.
I also strengthened my understanding in the form of interactive websites on certain topics. These were especially engaging, and successful at making the learning joyful. However, they required investment of a lot of time on very specific topics.
The best resource I had was the instruction of Prof. Azad Naeemi from GaTech's ECE department. He was not only helpful in terms of helping clear doubts and misconceptions, but I was also able to bounce off ideas and get feedback.
The activity of studying the content helped achieve three goals:
With a blank canvas, we set out to decide what would be the best mechanism for the delivery of this instruction. We had the following two goals to assess the suitability of different media.
We evaluated existing formats on the basis of this rationale, and our considerations are documented below.
It's difficult for Professors to speak over the sound of the video. Moreover, they often have to pause to certain frames to point and explain the concept.
Videos are a good and immersive medium for students to individually engage with and learn the concepts. Moreover, they can watch it at their pace.
The Professor can often get distracted due to the cognitive demands of a game. It is also more difficult for a student to remain engaged.
Games are very engaging and immersive. They can effectively convey a narrative. But it does not account for students needing to revist concepts non-linearly.
Similar to academic papers, so Professors are well versed with presentation to an audience. Cognitive load is avoided due to the simple interaction.
Allow the students to study at their pace, and are suitably immersive. The accompanying descriptions also avoid the need for additional resources.
On the basis of this analysis, we decided to proceed with the design of interactive scrollytelling visualizations. The team started to brainstorm ideas for a structure to the visualizations.
We identified the two types of views we would need as follows:
The structure of the website needed to incorporate both these views seamlessly. We went through multiple iterations and finally settled on the structure as shown below.
We decided that the abstract space would be situated inline with the descriptive text. Maximum real estate was given to the physical space.
The decision in structure was a big step towards consistency. This meant that even though different chapters would consist of different visualizations and a variety of topics, they would all look like they belong to the same set. Another piece to the puzzle of consistency was to establish the style guide.
In terms of the style, we decided on a minimal, clean, and modern look. In the same spirit we decided to forego blurring and shadow effects, instead focusing on solid colors.
The biggest concern in terms of the color palette was to ensure that the final solutions were accessible to all students. To cater to the modern and minimal look, we went for a dark themed website. Once we had decided on the hues for the major recurring elements across visualizations, we adhered to the WCAG 2.0 guidelines by tweaking the colors.
We decided on going for two geometrical sans-serif fonts, to give a modern, technical and clean look.
At this point, it was time to start sketching ideas for individual visualizations. We did a lot of sketching to get ideas across and have discussions on them. We would also get feedback from Prof. Azad, to ensure the designs were consistent with the scientific facts.
To help us realise how these concepts will look digitally, we would first create a mockup of the whole chapter using our Figma style guide.. This not only enabled us to get a higher-fidelity prototype for the visualizations, but it was also a helpful way of tying individual visualizations into a narrative.
Figma helped us achieve the look and feel, the narrative, as well as a limited amount of functionality. However, the nature of interaction we were proposing in our solutions could not be prototyped using Figma. At this stage, having determined the direction to pursue, we developed the interactive chapter using HTML/CSS and p5.js.
The prototype in code gave us the best understanding of the concept, and we would often understand what works and doesn’t after interacting with this version. We repeated this methodology for every chapter we created. A typical cycle of reiterations would look something like this.
The intuitiveness of our visualizations was a priority, as the project was also going to be used by students in isolation. To ensure we make all possible interactions crystal clear, we relied heavily on different types of micro-interactions. Some of the micro-interactions we utilized are: