Design Engineers—Filling the Frontend Gap

Heard the latest tech buzz word on the streets? Me too. Let’s define “design engineer” and what that means for you in the web dev world.

“Design engineering” is not a new term, but lately it’s all over the place. I believe it indicates the future of web development: As old, well-defined roles merge, the “full-stack” you-just-do-it-all phase is put to bed.

But let’s explore this seemingly new role in our industry, what it means to be a design engineer, what tools they use on the daily, and how to get started on that career path. We shall also discuss the warnings that should come with all buzz words in our industry.

Design Engineer: A Muddy Definition

A design engineer at PicCollage defines his role as (and I am heavily paraphrasing the translation from Mandarin):

A heavy Figma user and UI designer and design system architect who has a good understanding of code implementation and can even use tools to implement interactive prototypes that can utilize mock or prod data.

They defined their design engineer role as:

• Solidifying the interaction design
• Validating solutions
• Discovering edge cases that were previously missed
• Using design tools (like Figma or Zeplin) to assist the team in design delivery
• The ability to learn to observe problems, organize requirements and communicate with various departments
• Good programming skills (being able to design data structures and independently complete frontend and backend services, using APIs from other departments)

Up until this point in the article, I was nodding my head and agreeing, “Yes, a design engineer should be able to do this and that and yep, that too. Oh, and maybe that.” Then I kept reading… the longer I kept nodding, the more tired my neck became.

I found myself seriously questioning whether or not this level of programming skills, and everything else they listed, was a reasonable scope of responsibilities for a design engineer. It’s just one example that shows there are many listings that will use this title, but then the description will yet again call for a full-stack designer/developer. I wholeheartedly believe the old adage: “Jack of all trades, master of none.”

Be the glue between the design world and the dev world—sure. Help question the product team about the relevance or usefulness of new features—great. Be able to work with ease in all the design tools, implement the code on the front end, AND architect the data on the backend, AND create the API… sigh. No thank you. I rolled my eyes at “full-stack devs” then and I shall role them at your “design engineer” advert now, if this is how you describe them.

Not My Job, Is My Problem

There will always be, at any job, a time when you have a task that is not actually your job but it is your problem. That is what it means to be on a team. When push comes to shove, you have each other’s backs and can work hard and logic your way through any problem, together. My main hiccup is when a role’s job description and expectations of the role sound unmanageable.

However, to counteract my scoping role thoughts, let’s discuss this YouTube Short posted by dive.club answering the question: “Will the role of design engineer last?” In this quick video, they pose the belief that design engineering (as with design, and separately engineering) will all fade away as the difficulty to portray intent in creation becomes easier. They believe that one day we will just be “builders” and we will create what needs to be created with whatever process is required at the time.

I love this and think it is beautifully put. My vision for the role of “developer” has always been primarily creators and problem-solvers with varying degrees of design, architecture, frontend and backend skills.

Design Engineer—A Well-Scoped Definition

There are a lot of places, though, that define the role of design engineer within well-constructed and not too wide of bounds. The very popular post/advert by Vercel, for instance, is one of them.

They define a design engineer as:

“At Vercel, Design Engineers work across the company, contributing to branding, marketing, product development, and the internal design system.”

They go on to more specifically talk about the role and define the day-to-day of their design engineers:

“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.”

I.e., this is exactly what I was raised to believe developers are.

A design engineer has the ability to implement a design from start to code. They can sketch out a design, tweak and finalize the UI in code, and even plug in the API the product or backend team creates.

However, on large-scale projects, they sandwich nicely right between the traditional roles of designer and developer. They will take the rough drafts from the design team and work with them to polish off and finish the design implementation in code. And for some things that are difficult to mock out with design software (like animations), they can work with the designers to discuss the needs and simply implement those first in code.

At companies like Vercel, GitHub, Uber and InVision, they define their design engineer role as being responsible for:

• User interactions
• User flow
• Page speed
• Cross-browser support
• Motion
• Responsiveness
• Support for inclusive input modes (touch, pointers, etc.)
• Respecting user preferences
• Accessible to users of assistive technology
• Design systems
• Rapid experimentation

I believe this scope of responsibilities to be very realistic. Just be careful as you job hunt, as the list of responsibilities can often widely fluctuate and sometimes gets beyond manageable for one person.

Where Did the Term First Come from?

The earliest reference I’ve been able to dig up for “design engineer” is in this ebook from 2020:

Adekunle also talks about “UX engineers” (since the term “design engineer” is something different in other industries already) in the podcast I’ll get into below.

I personally see “UX,” “design” and “frontend engineer” used interchangeably on job listings and adverts. However, with the recent buzz-i-ness of the specific term “design engineer,” you can anticipate the marketers will saturate the job boards with this term. Warning: Anytime something becomes buzzy, it loses value. It was difficult enough finding a true “design engineer” job before. Now, you will really need to read the fine print to see if they mean it. Or if they are just trying to get clicks.

What Does a Design Engineer Do?

There is a beautiful podcast by Clearleft about Design Engineering, very well produced and filled with thoughtful interview snippets. I love how Tobias Ahlin describes design engineering as engineering less with logic and more the engineering of visuals.

“[Design engineering] is the engineering of visuals mostly. So you work less with logic and more with performance (like optimizing for the web vitals), also animation and just UX anything that could be about the perceived experience of an app or page.”
— Tobias Ahlin, design engineer, GitHub

Design engineers look different at each role, since each company/product/client-base has different needs. Some design engineers are primarily designers, but they know how to code UI. Some design engineers are developers. They have a passion for typography and accessibility, and the design side of frontend. But the one thing all design engineers have in common is filling this gap between design and development.

Chris, a design engineer at Clearleft, gives a really poignant examples of this:

I think as the front end has gotten more complex as we’ve taken business logic from the backend and brought it towards the browser to the client side through JavaScript Frameworks …the front end has gotten a lot more complex with tooling, testing and integration … I think that has attracted more back end focused system thinking developers to be working on the front end, which can leave quite a big gap between the design and then the realization of that in in engineering. And I think there can also be a gulf the other way where an engineer can feel the designer hasn’t provided enough states or direction in the design.

Design engineers catch problems in UI/UX before all of the heavy lift of code takes places. You might think it lavish to have the resources to dedicate to just this, but as Adekundle so elegantly put it: “The later you identify an edge case, the more expensive it gets.”

Not only are design engineers early problem-catchers, but they are capable of carrying an idea all the way through the funnel of creation, aiding whomever is working on it at the time, be it product engineers, designers, front/backend developers, QA or marketing. It is a design engineer’s job to see the whole picture and know the intricacies of the system (and its limitations) to be able to get the idea to the finish line.

“[They are an] interesting kind of person that sits right in the middle between design and engineering, who … really get the design process and they get the nuances that are inherent in the message of design but they’re also able to articulate that. That, to me, it’s like a magic. [They] can articulate those concepts and those ideas into something that’s tangible, usable and at your fingertips. I think that’s a genuine superpower.”
— Clearleft Design Director John Asel

Unlike full-stack developers, who are expected to know it all and do it all (therefore, realistically leaving large gaps between a beautiful design and a functional system in their apps), a design engineer has the cross-functional skills of a designer and a developer. Not to do it all, but rather fill the gap between the two so user experience doesn’t go forgotten.

“I think it’s good to kind of have these people that have these cross-functional skills because it allows for better collaboration. And better collaboration often leads to better products.”
— Clearleft, Design Engineering Episode

The role of design engineering is purposefully making space and appointing responsibility for this gap between design and engineering, so that as products grow more complex and feature-rich, the user experience does not fall through the cracks in the haste to get something made and shipped.

“Products are getting more complex and we need people to be able to see the idea from concept to completion.”
— Clearleft, Design Engineering Episode

This is the crux of it. Products, frontend, web dev in general has gotten layered and complex and muddy. Jobs like design engineers have risen out of pure necessity.

Tools of the Trade

So, what does a design engineer actual do? What tools do they use? Well, there are many many answers to this, and, as with all development, next month the list will look different. However, on the design side, these things are obvious for now:

• Figma
• Adobe XD
• Sketch

On the development side, these tools are obvious and needed for design engineers, now:

• HTML
• CSS
• JS (probably)
• Understanding of the restriction of other languages company/product uses

And there, of course, is the magical category that makes this job a unique ask:

• The ability to speak design and development fluently, collaborate, communicate cross-functionally, illustrate concepts with words
• The ability to write: to be able to put these needs/ideas into written word and either directly message people in the moment or create documentation for future needs
• A bigger picture understanding of how the company/system works

I Want to Become a Design Engineer!

Excellent! Welcome to web dev, my friend. The path is going to look different for each individual, so giving an exact formula to become a design engineer might be tricky. But some things will be true, no matter where you are on your journey. First, follow your passion. Are you more passionate about the design side or the development side? I have met design and UX engineers who have come to this position from either side of it. Usually, though, they lean more strongly in one direction or the other.

I, personally, chose the route of formal education. I got my BS from Full Sail University in Web Development and Design. It is a really special program that teaches both sides to every developer/designer that graduates. However, you can teach yourself or get a degree in either programming or design and fill in your own personal knowledge gaps as you go.

There is no one true right way to get started. I think picking a job you think would be fun and meeting the requirements to interview for it, though, is a great first step. It’s all about taking it, though. So if any of this feels too daunting, I encourage you to pick the next step in your journey that is doable but still challenges you. One day, you’ll look up and realize you climbed a mountian. (A very tall UX mountain, but you get the picture). 🐐

Here at Progress, we too have a design engineer team. Check out our hiring page, we often add to not only our DX team but our design and engineering teams too. 💞