Analytics for Firebase
As the primary visual designer, I owed the front-end visual presentation across Firebase Analytics while holding a high-bar for consistency and accuracy of implementation. I worked closely with the designers and engineers providing a high-density responsive grid, an improved data visualization color palette, and performing the fit-and-finish polish directly in the CSS, submitting final production code.
24-Column Responsive Framework
The design challenge
Q1 2016 Analytics for Firebase allows developers to build mobile apps on a range of devices – from mobile to HD displays.
When I joined the team, the dashboard had been built containing a number of different card sizes that needed to be reorganized to respond various screen resolutions. However, it lacked an underlying grid system and breakpoint logic.
My first goal was to design a 6 to 24-column responsive grid to accommodate the existing cards.
A complete survey of a range of devices was completed to determine the best placement of the breakpoints.
Four breakpoints were determined resulting in 6, 12, 18, and 24-column resulting grids.