Intranet 3 (codename triodine)

Live Demo

This is my design for version 3 of the TJ Intranet. This was the third (and, in my opinion, best) of my designs.

This design keeps all the features Intranet2 (iodine) users are familiar with, but makes them available in an interface that feels more cohesive—still modular under the hood, but without the thick borders that visually boxed out the different sections in iodine.

My design is also meant to scale to any interface size without maintaining multiple codebases and without losing functionality on smaller screens. CSS media queries allow the browser to alter the layout, showing multiple panes on larger screens, a more condensed two-pane layout on tablet-size devices, and one pane at a time on phone-size screens. CSS transitions smoothly animate the changing elements.

The focus on breaking down workflows into multiple panes not only makes it easier to separate screens on mobile devices, but also improves the user experience on larger screens because it adds order information and actions where I2 dumped multiple layers of information in one pane. The selective use of shadows in the UI creates a visual hierarchy and separates panes less obtrusively than I2's heavy borders.

Parts of this design have since been made available in I2 through the “i3” themes and a partially redesigned login page. Those updates improved the I2 user experience on mobile devices a fair amount, though they did not add I3's multi-pane layouts.

Note the linked demo is not connected to a live backend. The login page will accept anything, and screens are populated with dummy data.