Molecular Devices planned a successor for it microplate reader and asked amplify to develop a deisgn language and a working prototype. The most characteristic feature on this new product is the 10-inch wide touchscreen. Based on a local web server the user should use a platform based on HTML5 technology for an easy access of any device which is connected to the same internal network like the microplate reader.
During our research we had to face various challenges. The guidelines were not designed for a web application, so we were forced to developed a new touch-friendly design language for the product. Furthermore we had to work within fixed boundaries, in which the application runs (e.g. Browser, Framework, Plugins, etc.).
To understand this extremly specific requirements, we looked into other software from the clients stock. From this research, we’re able to design a interaction concept, improve given patterns and optimized the structures for a touchscreen friendly layout.
First we gathered moods, which represent the application, but also the clients philosophy. After the first iterations, we designed a couple of color variants and layouts. After the visual look for this product was chosen, we created a icon library and designed the remaining key screens.
We collaborated with the backend team from Molecular Devices and defined a API for the frontend. The core of this web-application is the AngularJS Framework. We also used other techniques like SASS, Flexbox and SVG-Animations. For most of the challenging parts, for example the diagrams, we build our own Plugins, to ensure that the application didn’t gets bloated or too confusing understanding the code. After several months of development, we delivered a solid web-application, which had a positive response from the client, but also from the products testing unit and the target customer base.