Vercel

3d illustration of the Vercel triangle logo against a wall of terrazzo. the logo surrounded by the Vercel toolbar and pins from preview comments. a floating comment reads, "can we make the logo bigger?"
2022

Vercel provides SaaS solutions for teams to build, collaborate, deploy, and iterate on the web. They are also the maintainers of the React framework Next.js.

Every week is different as a Design Engineer at Vercel. Working primarily on the Vercel and Next.js websites, I help maintain the logged-out and in-product user interfaces. Collaborating with the Marketing team, I design interfaces and illustrations for Vercel's marketing pages, engineer landing pages and UI components, and introduce full-stack features within Vercel's internal APIs.

Originally a Software Engineer on the Growth team, my work involved introducing experiments and features to optimize the sales funnel and the product onboarding process. This included building Vercel's Resource Center, improving the Contact Sales flow, engineering a full-stack internal solution for surveys, and redesigning the in-product project transfer flow for an improved user experience.

I've since moved to the Design team, where my work centers around polishing our web surfaces and shipping new interfaces, with a hyperfocus on craft and accessibility. This includes engineering the Next.js Conf 2023 registration site and improving the existing Conf platform, building the Geist Font page, and crafting flexible CMS-integrated marketing pages, such as Managed Infrastructure. I've helped make the Next.js docs more accessible, maintained the Geist Font GitHub repo, polished the v0 site, and even designed a game for the 404 page.

At Vercel, I've had the opportunity to work on a wide range of products, filling many roles along the way: engineer, designer, 2D illustrator, and 3D artist.

Next.js Conf

Next.js Conf is an annual web development conference hosted by Vercel in San Francisco. The event is streamed live on nextjs.org, and users can register online for the in-person or online event in the weeks leading up to it.

I worked with two other engineers at Vercel to build the 2023 Next.js Conf registration site and improve the existing platform.

My role primarily involved building the registration site interface as well as the ticket customization and sharing features. I then migrated the existing Conf platform from the Next.js Pages Router to App Router, implemented a new design, and improved its accessibility for screen reader and keyboard users.

view the Next.js Conf registration site

Geist

Geist is an open-source typeface family developed by Vercel and Basement.

I built the landing page for its launch, which allows users to test out and download the Sans and Mono typefaces. The page features a glyph inspector and an interactive playground for testing the fonts with custom text.

I also help maintain the Geist GitHub repo.

view the Geist landing page

Marketing Sites page

I designed and engineered the Marketing Sites solutions page, with the goal of conveying how enterprise marketers can improve their collaboration workflow and site performance by adopting Vercel as part of their toolset.

Crafted with a mix of existing design system components and new elements, I designed a custom animated hero, a book callout component, and responsive illustrations. I collaborated with Alina Weinstein to plan the page content and get feedback on the design through the eyes of a marketer herself.

To iterate quickly, I began engineering the page while the design was still a work in progress—this allowed us to test the look and feel early on, while ensuring a quick turnaround.

Visit the Marketing Sites page
A comment from Meg floats over a browser window depicting a Preview Deployment of vercel.com. Meg's comment reads, 'Can we force dark theme?'
A browser window displays a 404 page. An arrow points from this 404 to another window with a visible user interface, showing how instant rollbacks can be used to quickly revert breaking changes.

Infrastructure marketing page

I engineered Vercel's Infrastructure marketing page.

My work involved introducing new Contentful-integrated section components, which can be reused within other modular marketing pages. Most notably, this included a flexible code block component, which allows content authors to publish multiple code snippets in one component, grouped by tabs. I also introduced reusable responsive illustrations made from HTML elements.

view the Infrastructure page

Contact Sales flow

I've been heavily involved with vercel.com's Contact Sales flow since joining the company.

My work has included shipping various A/B experiments for the Contact pages as well as implementing new designs, with the goal of optimizing the Contact Sales funnel.

I designed and built a dynamic version of the sales form, which updates to reveal additional fields as needed, given the user's email. I also worked with the Marketing team to flag known spam patterns and handle form submissions accordingly.

view the Contact page
screenshot of the mobile dark theme Contact page.
screenshot of the light theme Contact page on desktop.
The redesigned Contact page. I migrated the page to Next.js's App Router and implemented the new layout to match Vercel's updated visual language.
Hover interaction detail.
The dynamic Contact Sales form.

Surveys at Vercel

I engineered a solution for creating and submitting surveys on vercel.com.

This included developing a full-stack API for submitting survey responses, as well as building the flexible survey component UI which can be used inline or via a built-in modal.

view the Survey component docs

Vercelestial

For the 2022 internal hackathon at Vercel, I worked with my friend Baruch to build a game for the 404 page on vercel.com. Upon hitting a 404 route and pressing Space, the game begins.

While Baruch worked on the gameplay, I designed and built the game UI and social sharing feature. When the game ends, the user can share their score: a custom shareable URL is generated, with their score visible on a dynamic OpenGraph image, built using @vercel/og.

Of course, we didn't want users to share links to random 404 routes on the site—so we added a page for the game to live on, to use for the share link.

Resource Center

Vercel's Resource Center provides a home for enterprise-focused content, with articles, videos, and downloadable guides related to web solutions and Vercel products. This project also served as an internal proof of concept for the Next.js App Router, around the time of Next.js 13's public release.

Entirely integrated with Contentful, authors can organize related content into collections, and publish curations tailored to the needs of specific customers.

I worked with another engineer to build the Resource Center: my role included engineering the front end interface as well designing the download page and interactions.

view the Resource Center
the home page of the Resource Center. the page heading reads "Build and deliver better web experiences, faster." beneath it are eight buttons linking to different topics. at the bottom of the screen, four resource cards, which link to articles, are partially visible.
screenshot of the "Frontend cloud" resource collection page. the heading reads "Harness the power of your frontend". a picture of Guillermo Rauch is visible at the bottom. his head floats ominously.
screenshot of the download page. the heading reads, "Improve build speed and developer velocity with Turborepo + Vercel". beneath the text, an email input sits beside a "Download" button. at the bottom, two slightly overlapping pages show previews of the PDF contents.
screenshot of an article page. the heading reads "How to prepare your site for Black Friday traffic". to the left of the article, a sidebar contains a table of contents and a share button.