Speakeasy.api

Building a suite of products that enables companies to construct awesome API DevEx - in a matter of minutes, not months - is a challenge in itself. Gearing up for their public launch, Speakeasy needed an impactful marketing website.

Deliverables

Web Design

Development

Industries

Tech

Stack

Vercel

Nextra

TailwindCSS

Shadcn

Typescript

Who wouldn't want their developers to dedicate more time to building new products instead of handling integrations? Speakeasy aims to fix that. Like any startup, they focused on perfecting their product rather than creating a flashy website from day one. And we get that.

But the day has come, and this Google Ventures-backed company turned to us to launch a refreshed version of their docs, blog, and product pages. The tricky part? The new homepage had to be delivered (you guessed it) ASAP.

Webdesign

We were thrilled to work on such an interesting subject and immediately started generating ideas. Our primary goal was clear — to develop a dev-friendly website that would appeal to both VPs of Engineering and team-level dev leaders. To achieve this, we focused on a structured layout and cohesive design while allowing for future updates.

The website aimed to showcase Speakeasy as a central hub for API management. We developed a 3D version of Speakeasy's logo, along with flowing grinds and connecting light beams, highlighting the platform's connectivity features.

Web development:

Due to the tight two-week deadline for Speakeasy's showcase at an upcoming conference, we chose Next.js as the foundation of our tech stack. Next.js supports server-side rendering and static site generation, enabling us to create SEO-friendly and performant websites. By using the shadcn library, Radix UI, and Tailwind CSS, we could implement beautiful components fast. We selected Vercel as the hosting platform for its hassle-free deployments, which proved to be highly effective.

After the successful launch, we had to migrate existing pages to new designs and technology. We moved documentation and blog content from Docusaurus to Nextra, transitioning from React to Next.js with Typescript. This allowed us to transfer markdown pages with minimal changes while upgrading the underlying technology.

Web development:

Next, we optimized the website and addressed the issue of slow performance: certain elements were causing the website to slow down. Initially, we had leveraged Spline, Lottie, and Framer Motion to create the required animations. After investigating, we found that the excessive use of SVG elements and a heavy Spline asset were the main problems. The solution was a bit unconventional: we replaced animation assets with good old videos. Although it took some time to make transparent videos work across all browsers, we made it happen and improved the overall speed and Lighthouse performance score.

We kept up with the project's changes using Scrum. Daily standups and weekly demos helped us stay transparent and progress steadily. We also closely collaborated with Speakeasy developers, contributing to their monorepo for smooth teamwork and fast development.

The outcome? A visually captivating website that engages the target audience and effectively explains Speakeasy's solutions. Task completed.

Let's talk

tonik here — a design studio focused on early stage startups, helping founders define, design and build products.

Opinions are our own

Take a peek