MeterMonkey.
API analytics for Hasura.
Summary
The idea for MeterMonkey came around when the founder noticed a lack of out-the-box analytics in Hasura, a tool that allows you to quickly build, deploy, and manage GraphQL APIs for your applications. The lack of in-depth analytics frustrated the founder as with detailed analytics you’d be able to better understand how your API is being used, helping to improve how you manage and optimise it.
What they said about our delivery
We have over 10,000 success stories, this is just what one had to say.
“You guys did some amazing work on this MVP dashboard and I think MeterMonkey would vastly benefit from having Silky Studio extend the product.”
Dawson Mortenson
Founder, MeterMonkey
Branding
The name MeterMonkey was already chosen by the founder, so when it came to the branding it was important for us to incorporate the playfulness of a monkey, but combine that with the professionalism of data and analytics.
Logo
For the logo is was important to incorporate the Monkey, whilst ensuring it wasn’t overly playful and remained on theme with data. To combat this, we combined the silhouette of a monkey face with a data like hexagon shape.
Colour Palette
With the product being a B2B product it was important to keep the colour palette fairly neutral. However, with ties to both a monkey and analytics, an vibrant primary pop of colour ads the energy and urgency required for a brand in this space.
Typography
Again, with a B2B facing brand we kept the font neautral and legible, opting for a Sans-serif font. However, we added an element of character to the font as a way to a add unique look and feel to the experience.
Illustrations & Icons
When visualising our words we opted for modern data/analytics styled illustrations as a way to showcase both the product, but also the nature of the business.
Website
MeterMonkey is a classic example of traditional B2B SaaS, and as such is was important to demonstrate the product in full, but also have a dedicated page to store the advanced level of detail behind the pricing. This advanced detail is mainly due to the complicated nature of the product, and having a separate pricing page prevents the message on the homepage from being drowned out and lost.
Copywriting
There were three core benefits to using MeterMonkey, all of which were equally important. To ensure we showcased each benefit we used a typing animation on the main header where new words would come and go. The core benefits were the following: 1. Unlocking revenue 2. Strengthening security 3. Controlling Costs.
Homepage
We followed the textbook example of a B2B SaaS website to ensure visitors were comfortable navigating the content and maximise the chance of them consuming every important point. This layout prioritises the most important information first, and as the user gains more interest, the content become more granular. The layout consists of: Hero -> Dashboard -> 3 Benefits -> Features -> C2A.
Web Application
The MeterMonkey web application was fairly simple from a design perspective, as the main focus was on the dashboard page that showcases the most important data in an analytics format for the user. The advanced complexity came into visualising the data itself, in which we leveraged tremor.so, a React library for building stunning dashboards.
Login
With the target market being tech savvy we included the use of GitHub as a sign in option.
Create Project
Users may have multiple APIs, so it was important to allow them to create multiple project under one account, instead of the traditional one organisation per user approach.
Select Plan
Dashboard
With the dashboard being the focal point of the application it was important to implement stunning visualisations, whilst ensuring they were the most relevant visual for the type of data being represented. Thankfully, with our experience building Numerro, a design toolkit for Microsoft Power BI, we were able to build a fantastic dashboard for MeterMonkey.
Configuration
APIs are complex technology, and as such it was vital end users could connect, configure, and control their API as they see fit.
Project Settings
As mentioned above, users may have multiple APIs. To support this we used a per project usage and billing approach, as this was most suitable to users.
Account Settings
Components
Lastly, a few components used across the project to provide a seamless user experience.
Conclusion
With our passion for data analytics, as well as our past experience building an analytics design company, it made working on MeterMonkey an absolute joy. From the logo and vibrant pop of orange, to the stunning interactive visuals, we’re excited to see were the project goes.