The IT Tools Dashboard was designed using UI Kit and JavaScript as a pseudo-single page web application. It allows users to customize their experience by selecting their division of IT, selecting a background image, and enabling dark mode.
Design Problem
Originally the website, seen on the left, was designed to the needs of the IT Help Desk. However, as employees transferred to other divisions of the department, the user base expanded to include Tier 2. The original design used static HTML pages, so making multiple layouts would increase the difficulty of updating the website in the future.
In addition, there was an increasing request for customization features that would allow custom backgrounds and a dark mode. While custom backgrounds were possible, providing a dark mode in the Material Design Lite kit (MDL), was not feasible. MDL was not designed to accommodate dark mode and had officially been unsupported by Google in favor of an improved Material Design.
From the infrastructure side, the web server does not provide server-side database execution. Any written code had to be executed by the client. There is also no ability for the user to upload and store content to the website.
Design Solution
Dynamic Page Generation
Using JavaScript, the website is a single HTML file that has other smaller files added to it. For example, each web app card has its own HTML file that is imported as needed into the web page. This allows each division of IT to have a customized layout while making it easy to update the website. Below are examples of each dashboard layout.
Personalization
To allow users to enable dark mode or set custom backgrounds, the information is stored in the browser’s cookies. It can be exported as a JSON file and imported again if the browser’s cache is cleared. Background images are accepted as URLs to hosted image files and cards can have a transparency value added to allow more of the image to be visible.
Web Apps
Using the same single-page generation from the dashboard, the web apps were redeveloped or redesigned.
Logic by Stuart Miller
Logic by Stuart Miller