BACKGROUND

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.



Hard to guess but we're talking about electrons

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.

LEARNING QUANTUM PHYSICS

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:


Quantum
Text Books

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

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.


Explorable
Explanations

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.


Attending
Classes

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:

  1. I got a strong grasp of the concepts. This would in turn help make me design decisions for a product that could communicate these concepts to a large audience.
  2. I developed some empathy for the students. Learning from scratch helped me understand the intimidation and setbacks students face. I could also identified areas of opportunities to focus on.
  3. I was also able to get well-versed with existing solutions that are available to students. This helped verify the need for a tailor made solution for our students. It also gave inspiration for directions we could pursue.

STRUCTURE AND FORMAT

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.

  1. Easy to deliver in class: Professors of EC 3040 should be able to interact with the solution in a class and give their instruction to students simultaneously.
  2. Self Sufficient: Students should be able to derive meaning from the solution on their own, without instruction. In other words, students outside of the course should also be able to learn from the solution.

We evaluated existing formats on the basis of this rationale, and our considerations are documented below.


Animated
Instructional Videos

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.


Educational
Video Game

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.


Interactive
Scrollytelling

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.



Generating ideas on a whiteboard

We identified the two types of views we would need as follows:

  1. Abstract Space: these visualizations are concepts such as energy, effective mass, etc.
  2. Physical Space: these visualizations are physical concepts that may be observed, such as position, velocity, mass etc.

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.

STYLE GUIDE

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.

ITERATIVE DESIGN

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.



Sketching on my trusty iPad

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.



Creating and Arranging Visualizations in 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.



Concept to Product through iteration

MICROINTERACTIONS

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:

  1. Help Text on Scroll: If a new interaction becomes available on scroll, help text appears on the screen to guide the user.
  2. Label and Opacity on Hover: Hovering on certain elements, such as an electron, help you give more information about the element. The opacity also changes to indicate the interaction.
  3. Cursor change: The cursor icon depicts which visualizations require interaction, and which ones don't.
  4. Transition Animation: Motion has been linearly interpolated where ever necessary to maintain continuity.

LESSONS LEARNED

  1. Designers need not code, but it helps: The ability to move back and forth in this project from designer to developer was very helpful. I was able to do iterations very quickly.
  2. Need for testing: So far, we’ve received positive words from the students who have used the website. However, a formal usability study would help uncover potential next steps.

The Proof is in the Pudding!