What is Design Engineering?
Learning the intersection of design & engineering
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:
What is a UX Engineer? User Experience Engineer Role Explained
010 - UX Engineering, Prototyping, and Tooling with Adekunle Oduye of Plaid (shameless plug)
What is design engineering?
It all started with a seemingly simple question:
Should designers code?
Well, my answer is a classic
No. BUT…
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
Design Engineer
Design Technologist
UX Engineer
UI Engineer
For simplicity, we’ll use “design engineer” in this article.
In short, design engineers specialize in the intersection of design and engineering.
Duh?
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?
What does a design engineer do?
Here are the types of work of a design engineer:
Contribute prototypes, wireframes, and design mockups
Set up individual workflows & organizational structure
Set up a design system, document patterns, build UI components, and write usage documentation
Establish and maintain a local dev environment
Set up testing
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:
Contribute prototypes, wireframes, and design mockups
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.
Set up individual workflows & organizational structure
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:
Propose a transition plan to switch from Sketch to Figma.
Proposed a new product development process for PicCollage
Created a Figma plugin to imitate app features
All these efforts have a main goal: Improve collaboration between cross-functional team members
Set up a design system
It is also common for a design engineer to work within a design system. This includes tasks such as
Maintaining a design system
Perform workflow audits & updates
Build UI components
Write usage documentation
This is what my mentor Mike Mai does as a design technologist.
Key concepts
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!
Prototyping
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.
Low-fidelity paper prototype
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 prototype
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.
Interactive prototype
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.
A good example is how the founder of Cron Calendar - Raphael Schaad - prototypes right after sketching. He explains it at 7:24 in this video.
Now, in terms of types of data to use, there are three kinds:
A mix of code & static assets (images)
Mock data - static mock data/data from an API
Prototype with real data (this is especially helpful if you’re building visualization)
Cool, what are the different ways to build an interactive prototype then?
Great question! Adekunle in the Design Engineering Handbook provided a clear structure:
Incorporate a pattern library - Semantic UI, Chakra UI, etc
Import data - static, mock, or real
Start prototype - Can use Git to help branch one idea to another
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.
Tooling
Now we understand the different types of prototyping.
But, there’s another important element of prototyping:
Speed
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.
Required skills for a design engineer
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.
Technical skills
Front end development
This includes understanding HTML, CSS, and JavaScript. It’s also helpful to learn JavaScript frameworks such as React (the most popular), Svelte, or Vue.
Then, you can learn front-end frameworks such as Gatsby, data importation, Git, and site deployment (Netlify, Vercel, etc)
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.
CSS specialization
Being a design engineer requires in-depth knowledge of CSS. This would mean understanding CSS pre-processing frameworks (Sass or Less).
UX/UI Design
This is a mix of design-related skills. There’s a lot to learn here. I’ll recommend:
Documentation
Documentation is a huge part of design engineering. Storybook is a popular tool to help engineers build, test, and display UI components.
Accessibility
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:
Responsive Design
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.
Soft skills
Empathy
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.
Communication & collaboration
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.
UX Principles
It can be helpful to understand the psychological aspect of UX. Here are some useful resources:
My plan
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:
Simple blog article about Cyberpunk Edgerunner
Re-create Google.com
Create a Figma plugin
Re-create my portfolio (HTML, CSS, JS, Sass)
A side project
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.
This is a salute to one of my favorite YouTube genres: game dev logs. Shout out to ThinMatrix, Flow Studio, Pixel Architect, DevDuck, and all the indie game developers out there.
Helpful resources
Lastly, I want to share resources about design engineering that I haven’t mentioned. Here are a few:
Code & Pixels
Design engineering podcast hosted by Adekunle Oduye (Design Engineer - Tech Lead @Plaid) & Kelly Harrop (Sr. Software Engineer @Intuit) | Link
Sara Soueidan
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
Mike Mai
My mentor at Pegasystems + brought me into the world of design engineering | Link
Conclusion
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.
And that’s a wrap!
Thank you for being awesome and reading this far! :)
If you have any questions, feel free to reach out on LinkedIn, Twitter, or by email. Will love to set up a casual call and chat!