Skip to main content
👆 That nav doesn't fit!
What a slacker!

Netlify ROI Calculator

Web App / Landing Page
Project Type
Web App / Landing Page
Release Date
May 2022
Front End
Nuxt.js
Content Management
Nuxt Content
Integrations
Netlify Forms
Netlify Large Media
Hubspot Forms
Cloudinary
Drift Chat
Gravatar
Bitly
My Role
Lead Developer
Team
Nick Barry (Design Director)
Erin Campos (Project Manager)

Netlify offers a cutting-edge cloud computing platform — but businesses don’t always understand the return on investment they can gain by switching over.

Netlify partnered with Bukwild to help tell their story. Combining simple UI, attractive visuals, and some slick integrations, Nick and I delivered a smart and attractive calculator to help teams understand exactly how much time and money can be saved.


See it now

ROI Calculator

A key feature of this web app was users’ ability to share results with friends and colleagues, who could then review the filled-out form fields, tweak values, and fine-tune their own results.

To accomplish this, when the user reaches the results page, I save the form data to the URL as query parameters. I omit some fields (name, email) to protect PII. When the user opens the share modal, I generate a shortened link by sending an async request to the Bitly API via a Netlify function.

The design calls for showing a screenshot of the user’s website. To do this, I created a Netlify function that uses Cloudinary’s URL2PNG add-on. The function creates and uploads screenshots of websites on demand, and serves cached versions when possible. To get the user’s profile picture when they enter their email address I use the Gravatar API, falling back to the user’s initials if none is found.