Librato is real-time cloud monitoring SaaS company devoted to helping users monitor data and gain valuable insight at any layer of their infrastructure.
I was a contract designer for Librato for many years before joining the team full time in 2017. In the beginning I was tasked with creating marketing assets and helping develop the blog into a more substantial marketing arm of the business but over time I grew to assist in a larger UX capacity.
I ended my contract before joining full time by designing out the desktop and mobile sections of the site for Librato's vast Plugin database of offerings.
The goal of the project was to design a templated framework that could be carried across the marketing site into the product to represent all the facets of Librato's available plugin offerings while still being future proof enough to be added to without additional design work.
Librato had an existing brand, site and style when I was tasked with this project so much of the challenge was designing a large section of an existing site to match that aesthetic while also representing what could potetially become hundreds of very distinct brands they partner with while not having them all look the same or alternatively overpower the Librato brand.
Additionally, we wanted to introduce this feature as a section on the homepage therefore the visual treatment need to be carried from the homepage through the marketing site to the product while fitting in with the existing aesthetic.
One of the very first notes we took during discovery is that every brand we partner with seemed to have one distinct color associated with them that didn't typically overlap (Docker was blue, Nginx was green, Apache was Red, etc…). By distilling the brands down to a single color in our portfolio it allowed us to visually represent them across our products very cleanly and without overpowering the Librato brand in the process.
Another difficult ask was the ability to carry some of the aesthetic from the marketing site to the product. By taking such a core visual representation of our plugins it allowed us to alter the shape and treatment of the brands across the platforms without having it appear completely separate or visually disjointed from the marketing visuals.
The End Result
We opted to use square elements and accent bars on the left for the marketing site and rectangles with accent bars on the top in the product. These changes came down to a matter of grid execution and the amount of information we needed to show in each individual instance. Squares also translated much better to mobile for the marketing site whereas the SaaS product was never translated to a mobile app.
We were able to institute a major homepage rework and communicate what would become 40+ plugin features with indepedent pages showcasing a large spreadsheet of marketing material for sales and customer research.