Topological Materials Database is the leading resource for quantum physicists working in the field of topological chemistry. The database allows users to search for compounds to view their topological data.
Tasks
- User Experience
- User Interface
- Frontend Styling
Software
- Sketch
- Principle
- Atom
Technologies
- Git
- Vue.js
- Bootstrap
- SCSS
UX Design
Due to the high complexity of the requirements, the process began with wireframing user stories devised alongside the physicists working on the project. An interactive periodic table made up the crux of the UI from the beginning to provide a basic search, however advanced search options also needed to be considered.
A click dummy of the main flow was created to give an early feeling of how the user interface will perform and provide feedback to the user as the make searches and via data.
Wireframe fidelity was increased as more data became available and features were solidified within the UI.
User Interface Design
The goal of the User Interface Design was to keep data as simple and clear as possible while providing a pleasant experience for users spending a long time looking through datasets. Colour coding was added to the datasets in the periodic table to give users pre-search feedback on what to expect from their search query while in basic search mode and increase the utility of the periodic table.
Data was parsed into widgets to provide visualisations of the data and to enhance the user experience.
Due to the high concentration of data, Roboto Condensed was selected as the typeface for the user interface. Designed specifically for screen, Roboto renders excellently at varying sizes, while the Condensed width allowed for high volumes of data with small screen area. The full feature character set also provided the many Greek Symbols used in physics.
A Dark Mode switch was implemented in the main navigation to provide a different option for users working with the user interface in different contexts and on different devices.
