Metadata
Sector
- Developer Tooling
Scope
- Branding
- UI/UX Design
- Development
Checkly
Checkly, which makes monitoring and testing tools for developers, partnered with Monogram to refresh its brand and rebuild its marketing website. Monogram handled branding, UI/UX design, and development. The work produced a new identity system, a light and dark component set, and a Next.js and React front end styled with Tailwind CSS, deployed on Vercel with Prismic as the CMS. The site, completed in 2023, left Checkly's non-technical team publishing content directly, without a developer in the loop.
Checkly's identity no longer communicated what the company had become, and its marketing site could not carry the message to the audiences it wanted. Content changes required a developer, which put a queue in front of every routine update. Load times were the third problem, and all three were on the table when Checkly brought the work to Monogram.
Raccoon, Reimagined
Monogram began with an analysis of Checkly's existing brand and its position in the market, then worked with Checkly's team on an identity built for where the company was heading rather than where it started. The work covered a new logo, a color palette, and typography guidelines, applied consistently across the marketing website, social profiles, and marketing collateral. Monogram crafted animations that carried the brand's humor, including a 404 page.
Radar: One Design Language, Light and Dark
Monogram designed the site with dynamic light and dark treatments across its slices, a system the team named Radar internally. Working with Checkly's marketing and executive teams, Monogram settled a component set rather than a set of one-off page designs, so the site could grow by composition. That component library is what makes the site composable years after launch: new pages are assembled from parts that already carry the brand.
Content Updates Without a Developer
Monogram implemented Prismic so Checkly's team could create, edit, and publish on its own. Monogram worked with Checkly to define the content structure and build the templates and fields behind it, which removed the developer dependency on routine updates and shortened time to market for new content.
Performance From the Framework Choice Up
Monogram built the marketing site on Next.js and Tailwind CSS. Next.js handles server-side rendering, code splitting, and caching, and Tailwind ships its styles once on first load and caches them for every page after. The result is faster loading, better accessibility, and stronger search engine optimization, all of it coming from the framework decisions made at the start of the build.
RSS for Content Syndication
Monogram integrated an RSS feed so readers can subscribe to Checkly's blog in their own reader. The same feed carries Checkly's articles into other platforms, which extends the reach of every post beyond the site itself.
Meet the New Checkly
Monogram and Checkly produced a launch video that put the new identity and the rebuilt site in front of the audience together. The video carries Checkly's brand personality and product with the same humor the identity was built around.
Monogram's deep understanding of Checkly led to an elevated, scalable design capturing our mission to transform the development workflow with a code-based monitoring process. Not only is it aesthetically pleasing, but robust, boosting website speed, performance, and user experience. The positive feedback received affirms Monogram's ability to deliver transformative, enduring brand experiences.
Cinthia PortugalCMO at Checkly
