Go back
Go back
Interactive periodic table
Periodum is the first interactive periodic table in Turkish we built in collaboration with Evrim Agaci.The goal of the project was to address the need for an effective, entertaining and detailed chemistry tool to be used in high schools and universities in Turkey. It presents an incredibly comprehensive database in a very enjoyable and interactive way.
Evrim Agaci
3 months
Project Based
Senior Product Designer
The design and the navigation are structured with two things in mind, ease and delight. Considering it will mostly be used by students in classrooms, we prioritized usability of the product, so the children could learn and use it smoothly.
It’s an ongoing open source project, keeps growing. New features are planned to enhance the learning experience.
In this project I was responsible from creating a detailed competitor analysis fof both UI and UX, and then creating an easy to use . modern looking and engaging UI.
There was a myriad of information we wanted to give for each element, like their abundance levels, atomic radius, etc. And most of these information bits had to have their way of visualisation, but the overall UI still had to be easy to comprehend and use.
I tried to create categories for different kinds of data and design patterns for them. After I created a dozen visualisation patterns, the loaded information about the elements took shape and it became much easier to consume.
To be usable, an interface must be clear. “Clarity is job No. 1,” to put it in the words of prolific UX designer Joshua Porter.
We wanted the info about the elements at one’s disposal, easily switching between elements. So we designed a sidebar for element showing element’s detailed info. We wanted to use a familair UI pattern to make this table as intuitive as possible.
Users have an innate desire for things they're already familiar with. And the more we experience something, the more likely we are to like it. So, try to use common patterns when creating new experiences.
A sleek cool look was our goal for this project. We wanted the elements to have a chemical, radiative, neon shine in the dark. Simplicity and emphasis on the content was the concepts we aimed to achieve.
- The darker theme elevated the UI to a high standard.
- The neon effect and smooth gloss of the elements created a radioactive visual and it worked very well with dark colors.
-The simple and readable design made the data-heavy product easily comprehendible.
- The website encoraged interaction with smooth animations.
-Access to information was made easy with the help of a sidebar.
- Every little detail was reviewed to have better scannability and accessibility.
The sidebar showcases the most important info about the selected element. You can also see the isotopes of the element in an interactive way.
With the compound module, you can combine the elements to make compounds and see the compound characteristics.
You can also filter the elements according to their categories and see the search results interactively on the table.
The heat slider lets you see every element’s state of matter in selected heat, solid gas, liquid or undefined.
A product tour can introduce new users to your interface, draw attention to product launches, and nudge users closer to theirincreasing product activation, adoption, and retention rates
Used correctly, the right UI pattern can turn a heavy-handed product tour into one that not only helps your users achieve value, but fosters an immediate connection with your product.
The product was a huge success. Since it's an open-source project, it's still being improved by the community. You can see the live project and contribute to it.
See Periodum
Next Project
