DE
With GoReact, the Museum of Science and Industry in Chicago offers a virtual chemistry lab. The web app is an educational tool for pupils, students and teachers. Depending on their field of interest, users can learn about the periodic table, look up details about chemical elements or simulate chemical reactions via drag and drop. In addition, there are “Guided Reactions”, a learning program for virtual lab experiments, which accompanies the user with small hints. It mainly focuses on chemical processes that occur in nature, everyday life or industry.
For the redesign of GoReact, I didn’t want to limit myself to my findings from the analysis of the existing web app but also talked to teachers for stem subjects and high school students about their ideas for better chemistry classes. I don’t have a scientific background myself, so I asked a chemistry PhD student for help with scientific terms, contents and identifying the most relevant topics.
The first step was to clean up the content to establish a clear visual structure and write down user stories. Based on this, the redesign of the ui enables focused learning and studying while also optimising the readability and micro typography. To ensure that the user experience is still fun, I paid great attention to crafting the details: small animations, playfully designed empty states and an individual colour palette complete the ui design.
The classic from chemistry class, the periodic table, organises the chemical elements according to their properties and atomic numbers. In addition to the standard view, there are three more ways to display the chemical properties.
The interactive periodic table allows students to discover all 118 elements, switch between four different views and sort by main and subgroups. One or more categories can be highlighted with coloured markers.
Atomic numbers, atomic weights, ion charge, Lewis structure and, of course, the name of the individual elements are placed in a standardised grid. The consistent design creates a clear and memorable system.
Finding your way around the periodic table and developing a “map in your head” is an important learning goal in chemistry lessons. GoReact supports its users with navigation that leads directly to neighbouring elements. This structure and the miniature view in the upper left-hand corner make orientation easier, especially for beginners.
A short general introduction completes the detailed fact sheet with safety instructions. The animated atomic model (live demo) illustrates the internal structure of each element.
Each profile page applies a unique colour to ensure that 118 elements are still sufficiently distinguishable. How does that work? The dominant colour of the photo is detected and automatically applied to the interface in four gradations.
Each chemical element provides a high-resolution image of the material sample. The only exceptions are the transparent (noble) gases, where the colourful gas discharge is shown instead.
GoReact assists the user with so-called “Guided Reactions”: In the lab elements selected from the miniature periodic table are placed in the virtual chemistry lab by drag and drop. There, the molecules react with each other and create new chemical compounds. So, students can to perform experiments without safety hazards or many resources and understand chemical reactions. The students also learn where chemical compounds occur in nature, everyday life or industry. Due to their complexity, the “Guided Reactions” are still in beta stage.
