The iGEM Vita UI design is based on the AVL design system, which in turn is rooted in the Google Material design system. This general framework is helpful in order to create a unified appearance and experience throughout all AVL applications.
iGEM VITA is used to schedule work tasks for emission test beds and devices remotely. Through a central server hub, it is connected to all vehicle testbeds within the facility. Emission tests, charge tests and other tasks can then be scheduled and allocated to the respective beds from a central device. The mechanics in the field can then check their work orders on the local machines or their mobile devices.
iGEM Vita allows for easy task allocation and planning. Work Orders are scheduled via simple drag and drop and synced with the test devices live and for all to see. This way multiple users can work and schedule on the testbed at the same time, without conflict. Engineers can easily choose testbeds that have free capacities or have the necessary capabilities. Once scheduled, the tasks can be started and completed at the testbeds themselves. Their status is synchronised throughout the whole process.
Heat map
The heat map shows the device workload on any given day. This way engineers can, at a glance, choose the days and time slots with the most down times. By using filters and workspaces, they can further narrow down specific testbeds or testbeds in certain locations or with certain capabilities. This allows schedulers to easily find free time slots, so testbeds can be fully booked to have minimal downtime. The heat map updates live based on selected filters, workspaces and capabilities.
Workspaces
Workspaces group testbeds and devices based on characteristics, capabilities or location. Engineers can filter workspaces based on their roles, their location or other preferences. This way, the users will only be shown testbeds that are relevant to them and their work. On a dashboard, these workspaces and the number of work tasks scheduled, in work or already competed.
Empty States
Part of the iGEM VITA was also a redesign and definition of all empty states. Empty states are an important albeit often overlooked part of every design system. Showing an easily identifiable error, graphic and an actionable path forward can significantly decrease friction and improve the user experience of the product.
For these empty states over two dozen illustrations were drawn, each for a dedicated state. Special guidelines and specifications on how these states behave and what parts are mandatory were defined.
