Design Engineering at Vercel

This post will go behind the scenes for Design Engineering at Vercel, our work, skills, and how we contribute to shipping with a high degree of polish and performance.

Copy link to headingWhat is a Design Engineer?

Design Engineers at Vercel blend aesthetic sensibility with technical skills. This allows us to deeply understand a problem, then design, build, and ship a solution autonomously.

The team is made up of people with a wide array of skills and a lot of curiosity. We constantly experiment with new tools and mediums. This multidisciplinary approach allows the team to push what’s possible on the web.

Copy link to headingWhat do Design Engineers care about?

Design Engineers care about delivering exceptional user experiences that resonate with the viewer. For the web, this means:

• Delightful user interactions and affordances

• Building reusable components/primitives

• Page speed

• Cross-browser support

• Support for inclusive input modes (touch, pointers, etc.)

• Respecting user preferences

• Accessible to users of assistive technology

There is a lot of work behind the pretty pixels. Design Engineers must go beyond visual appeal and ensure the other pieces that make an exceptional user experience are taken care of.

Copy link to headingWhat do Design Engineers do?

At Vercel, Design Engineers work across the company, contributing to branding, marketing, product development, and the internal design system. This collaboration falls under these workflows:

Copy link to headingDesign collaboration

Design Engineers work closely with designers to implement designs, skipping the traditional handoff process. Instead of handing off a completed design, a Designer sketches the start and iterates with a Design Engineer in Figma or code to produce the final design. Lots of technical exploration is done to push the designs.

This close collaboration between Designer and Design Engineer starts from idea to production. Design Engineers consult Designers on aspects like:

• Considering implementation cost versus the impact on experience—for example, some animations are unnecessary because they are not the main focus.

• Deciding if a component is one-off or built for reusability.

• Providing guidance based on web practices or experience.

• Prototyping design explorations that are easier to do outside of Figma—for example, animations, keyboard controls, and touch are better implemented in code to save the time and effort of reimplementing them from a different medium to the web.

Collaboration happens through Slack messages, screenshots, videos, preview links, and Zoom calls.

Copy link to headingProduct team integration

Design Engineers are embedded in a product team to help launch features that usually take more than a month. A Designer may or may not assist. When a Designer does help, the Design Engineer implements the UI while the product team implements the API and infrastructure.

When a Designer isn’t helping, it doesn’t mean the Design Engineer works alone on the design and implementation. The Design Engineer creates the initial sketch and gets feedback from both Designers and Engineers.

Copy link to headingIndependent ownership

This happens for features that are related to a user pain point and takes a few days to weeks to launch. The Design Engineer will sketch in Figma or code a solution, socialize the change, incorporate feedback, then ship it.

The team also works on design-led projects. Being part of the Design team gives Design Engineers the autonomy and ability to work on things that would often get deprioritized in an Engineering backlog.

The team puts resources towards polished interactions, no dropped frames, no cross-browser inconsistencies, and accessibility. Examples of design-led projects are:

1. Vercel’s Geist font: A Sans and Mono font. An interactive playground to see every glyph and try the font.

2. Vercel’s design system documentation: An interactive docs playground used by engineers across the company to ship Vercel.

3. Vercel’s Design Team homepage: An exploratory page for testing new web techniques and providing design resources.

4. Delighters in the Vercel Dashboard: Features in the Vercel Dashboard that bring it to life and delight the user.

No matter the workflow, we are given space to prioritize quality over quantity. We recognize that what we ship is never in a perfect state. Iterate to Greatness is one of Vercel’s principles, allowing us to balance business goals with craft by shipping continuous improvements and avoiding the perfection trap.

Copy link to headingThe Design Engineering toolbox

There’s no fixed toolset for a Design Engineer. There’s no best background. Everyone has different origins and has accumulated good taste. This diversity is essential because everyone’s skills complement the team.

While no individual is expected to have all the skills, the team collectively is able to execute on ambitious designs because we can:

• Design in Figma

• Design in code

• Write production code

• Debug browser performance

• Write GLSL shaders

• Write copy

• Create 3D experiences with Three.js

• Create 3D models/scenes in Blender

• Edit videos using CGI and practical camera effects

We collaborate on everything because of each person’s unique background and skills. While each person can execute independently, we’ve found that our best work is done through collaboration. None of us is process/tools-driven. We care about the outcome, not the process/tool.

Copy link to headingExamples of Design Engineering

You can see our team’s work across Vercel:

• Creating and maintaining components for the internal design system used on everything from Vercel.com to the Vercel Toolbar and the Next.js documentation.

• Websites like the Next.js Conf website and Vercel’s product pages.

• Product work and docs for Vercel and Next.js.

• Building proof of concepts for branding and marketing.

• Improving the accessibility of all Vercel web properties.

Copy link to headingJoin Vercel

Design Engineering at Vercel means more than being a designer and an engineer. It’s about shifting from owning a specific part of the product development process to owning results.

Interested? We’re hiring Design Engineers. Apply even if you’ve never had the Design Engineer title. As you’ve read, there’s no correct background or skills for a Design Engineer. Check out the job posting.