Majority of those I look up to are design engineers.
I call them “unicorns.” The hybrid designer/designer who can kern type and sort functions. The people who can turn their ideas to life.
But, calling them “unicorns” maybe comes from my lack of understanding of the field. I mean - What about the full-stack developers?
Thus, I did some research, and in this article, I want to share what I learned about design engineering.
To preface, this article is built on the works of more qualified people. Here are the works:
It all started with a seemingly simple question:
Should designers code?
Well, my answer is a classic
I believe it’s helpful to at least understand the basics of front-end development.
Cool. But what if I do want to learn how to code as a designer?
Well, that’s where design engineering comes in. Now, there are different titles, including
For simplicity, we’ll use “design engineer” in this article.
In short, design engineers specialize in the intersection of design and engineering.
Okay, my bad. Let’s delve a bit deeper.
The power of a design engineer is that they understand how design & engineering work. Or, in other terms, what both sides care about when building.
Then, with that knowledge, what can they do?
Here are the types of work of a design engineer:
I’m sure there’s more, but this is a general list to start with.
And I’ll like to elaborate a bit on the first three points:
Design engineers are skilled at both design & front-end development. Thus, they’re able to contribute wireframes as well as front-end code.
Now, prototyping is a huge part of being a design engineer, especially if you’re in a product team. I’ll go over that later.
Lichin Lin’s Mandarin article gives us a good peek into this.
To keep it short, here is a list of things he did when he joined:
All these efforts have a main goal: Improve collaboration between cross-functional team members
It is also common for a design engineer to work within a design system. This includes tasks such as
This is what my mentor Mike Mai does as a design technologist.
Now, we have a very basic understanding of design engineering. But, are there any important concepts that are good to know?
Yes! Let’s go over them!
As I mentioned briefly, prototyping is a huge part of a design engineer. Let’s delve deeper into this.
There are three main methods of prototyping.
If you’re a designer, you’ve done this before. This is the simplest way. All you need are a pen, paper, and tape.
Static prototypes are clickable, static mockups that show the experience of features or workflow. Some example tools to create this include Figma, Sketch, and InVision.
This is where design engineers and designers differ.
The interactive prototype simulates the end experience. These are built-in codes and incorporate mock or production data. The purpose is to solidify the interaction design, validate solutions, and discover edge cases that the previous methods might not catch.
Now, in terms of types of data to use, there are three kinds:
Cool, what are the different ways to build an interactive prototype then?
Now, we understand the different methods. But, you may ask:
How can I know which method to use?
Well, it depends on where in the process you are, what you want to prototype, and what you want to learn from it.
Another good metric is one’s confidence in the concept, as mentioned by Adekunle in the Design Engineering Handbook.
The more confidence you have in the concept, the more advanced method you use.
Now we understand the different types of prototyping.
But, there’s another important element of prototyping:
As a design engineer, it’s crucial to rapidly prototype, learn fast, and apply the findings to the solutions.
But how can you prototype quickly?
Well, that’s where tooling comes in.
Tooling is what it sounds like. It’s the intentional use of tools to prototype ideas fast and come up with innovative solutions.
For example, the mix of Gatsby, Semantic UI, Git, and Netlify can be one’s tooling set. Everybody may have different tooling. What matters is the speed and efficiency of prototyping.
Now, let’s delve into the skills required to be a design engineer. I’ll also attach resources/methods that may help you get these skills.
If you want to go even further, Google’s UX Engineer job description recommends learning scripting languages (Python or Ruby), Java, and C/C++. But, focus on mastering the elements listed in the previous paragraph.
This is a mix of design-related skills. There’s a lot to learn here. I’ll recommend:
Documentation is a huge part of design engineering. Storybook is a popular tool to help engineers build, test, and display UI components.
A design engineer needs to understand accessibility guidelines. A product should account for all users. I’ll write an article about this in the future. But here are some extremely helpful resources:
Design needs to be responsive. When designers only mock-up mobile, tablet, and desktop, it’s important to be able to solve the gaps between these screen sizes.
If you’re a designer, you’ve probably heard this term 847392138 times.
In short, be a real human being and genuinely care about who you’re designing for. Not just your users, but also your teammates as well.
Design engineers can speak with users, designers, developers, product owners, and stakeholders. Thus, it’s important to know what different members care about. To get started, I’ll recommend reading:
Since design engineers often work on documentation, being good at writing is also an underrated skill.
It can be helpful to understand the psychological aspect of UX. Here are some useful resources:
As you can tell, there’s a lot to learn about design engineering. But this is the brink of the iceberg.
At this moment, I want to become a design engineer. To be completely honest, I’m not attracted to the design system side. But, I’m very attracted to the thought that I can build any idea I have.
I want to become a builder.
I want to build products. I want to build things in the digital space.
It’s so damn cool 😭
Still, I need to level up my design skills as well. But I’ll be working on more front-end development projects.
Last week, I followed Figma’s tutorial to create my first-ever demo plugin. It was a super cool experience.
Here is a list of things I want to build in the future. The goal here is to build up gradually:
Also, as I’m building, I will be starting a new series called Devlog: [Name]. In it, I’ll share what I’m learning, my progress, and any project showcase.
Lastly, I want to share resources about design engineering that I haven’t mentioned. Here are a few:
Inclusive design engineer, author, speaker, and trainer. She has published a ton of useful articles about design engineering. They’re a bit advanced for me, but I’ll read them once I’m more fluent | Link
My mentor at Pegasystems + brought me into the world of design engineering | Link
There’s a lot to learn as a young designer.
And that’s exciting!!!
I will continue to use this blog to document my journey and learnings. Maybe things will change. Or not. Regardless, I want to stay intentional, curious, and introspective.
Thank you for being awesome and reading this far! :)