Analytics for Firebase

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

preimage.png

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.

Screen Shot 2017-12-20 at 5.07.56 PM.png

 

Device analysis

A complete survey of a range of devices was completed to determine the best placement of the breakpoints.

Screen Shot 2017-12-20 at 5.16.08 PM.png

Breakpoints

Four breakpoints were determined resulting in 6, 12, 18, and 24-column resulting grids.

Screen Shot 2017-12-20 at 5.25.05 PM.png

"The grid was super helpful to get our cards and mobile responsiveness correct. Claire even setup a workstation and helped out on CSS and other styling tweaks to get things looking amazing and was a huge help on extremely tight deadlines. This was extremely helpful and really helped build an incredible working relationship between UX and engineering."

— Andrew Baldwin, Staff Software Engineer

"Claire’s energy and desire to make the best product available means she is also the first to jump in with her sleeves rolled up to make things happen–building momentum, direction, and leadership for our team.

Maria Moon, Staff Interaction Designer


Data Visualization Color Palette

The results of early user research revealed that users were misinterpreting the signals coming for the standard Material charting palette, not only the reds and greens but the yellow as well. I took on the task of developing a new palette which would service analytics and data visualization more successfully. My goal was to develop a series of categorial and sequential spectrum of colors which could service the range from pie charts to heat maps. This palette has been so successful it has been included in the office Google Material data vis spec.

"Google Analytics has arguably some of the most complex data visualization needs, choosing the correct color palate to express the data properly is a huge challenge. Claire's contributions on color have been invaluable, she was able to generate a palate that allows for a large number of breakdowns, comparisons, and variables. She has a incredible knowledgeable on color theory,  and paid great attention to detail on each exploration. The final outcome it went beyond the immediate needs to solver a bigger, broader problem."

— Lorena Zalles, Sr. Interaction Designer


workingatdesk.png

"Claire's contributions on Firebase were significant, and allowed both designers and FE engineering to produce a high quality product with beautiful & compelling visual design and layout."

- Heather Cassano, Director UX

Google Illustration

Google Illustration

Google Lumos branding

Google Lumos branding