Timescale cloud 2.0
Timescale Cloud is a database as a service (DBaaS) that allows users to access their relational database without the need to set up or oversee the foundational infrastructure.
The challenge: updating the look & feel of our outdated beta product with a modern interface and component library to create an extendable design system that can scale.
Design direction
Shane Ermitano
Product design lead
Camila Hirthe Memelsdorff
Julia Nasser
Product design
Davor Tomic
The before: remnants of our beta product, “Timescale Forge,” and also pre-Product Design team. The colors were dated, layout lacked structure and hierarchy, and the fonts similarly were not optimized for legibility.
Timescale Forge becomes Timescale Cloud. As part of renaming the product, this was an opportune time to make some “quick” fixes to make the experience more consistent across our other web properties and product. A new logo, color update, and minor font & layout adjustments made the interface more inviting.
Back to basics. We built Timescale 2.0 from the ground up with new building blocks of the design system and UI library in Figma.
Creating components based on the atomic design methodology allowed flexibility and ensured scalability.
We started using Storybook to build, manage, and organize our components. This allowed us a platform to ensure that components were not only consistent on Figma for designers but also for developers.
Even Timescale’s mascot, Eon, got a makeover for product illustrations for two reasons: 1) The mascot used for Marketing purposes was bulky and drew a fair amount of attention to it. This flat line style integrated seamlessly into the application. 2) Quicker turnaround. This flatter line drawing was something that could be recreated by all designers.
The After: a modern, clean interface that allows developers to get quick insights into their databases and not have to put on their DBA hat.
The individual database overview page. This is a more detailed look into the health of a specific database, the current specs assigned, and price. From this screen, we’ve made it easy for users to make modifications to the database.
