A website for chemistry and biology education through augmented reality
Role: UI Designer Year: 2020
Role: UI Designer Year: 2020
MoleculARweb is a website for chemistry and structural biology education through commodity,
web-based augmented reality that you can use in your webcam-enabled computer, smartphone or
tablet, just on your web browser.
We saw a big challenge with all the requirements because the webapp needs to work in touch
screens and with mouse. So, first of all we found some limitations with the library that the
project had to use, due to the AR.js library got some techniques constrains with the
gestures, we had to found solution with UI controls to modify each 3D molecule in properties
like zoom, scale and rotation.
Start the UI development from scratch gave us the opportunity to structure a small design system that will contribute to all the people that will be involve in the team through the time. The main idea with this, is makes easier the life for the team and they can be able to consult and improve the design system.
The responsive design from this project was a big challenge because the app has a lot of controls to change the molecule properties, but we were careful that these controls were not invasive on the screen affecting the molecules. An important characteristic of our UI is that we decided make it little transparent to generate the feeling of presence.
At the first stage of the webapp we know that the students and teacher’s feedback is particularly important to us. So, we decided to ask to them in a kind way if they agreeing in answer a quick survey to us, leaving clear that we will respect their data treatment and we will just use this data to improve the app.
