The Rise of Design Engineering | Raphael Salaja | MIT Startup Week

alright hello everyone i'm rafael celaja i'm here to talk to you about the rise of design engineering so some background on who i am i'm a design engineer from ireland uh worked with some of the top teams in the industry family av labs lens daybreak just building the best software in the world and now i'm at warp helping them build

the best employee management system in the world as a kid i was always obsessed with the finer details in tins i was big into games media movies i was always looking for the behind the scenes stuff like trying to figure out how tins worked behind the scenes and just knowing how things worked in general i think that's what spurred me on to get a course in game development

and within that course was a module on web development and that was where i figured out wow i can do so much more on the web it's so much easier to build that scale reach a bunch of people 'cause my objective from the start was just to make people smile and i thought games could do that for me but i think building on the web does that for me

so taking a step back i want you to think of like traditional teams and most teams now or in the past were more so about people who like how things look and people just care how things work and in between there is a gap there's some stuff that one side knows that other stuff doesn't know there's different nuances

that both of them have to try and converse it between they don't speak the same language they don't see eye to eye and this gap in between is where quality goes to die it takes a lot of work for a designer to hand off to an engineer that doesn't understand typography systems design systems same way an engineer can't go to a designer talk to like hey

we want this patient nation system we need the design to be like this this this so this gap is what a design engineer feels there's no real single definition for what a design engineer really is but at its core it's someone who operates fluently with code and design and there's someone who really really refuses to treat them as separate concerns

so think of them as an interpreter between a front end designer and an engineer they can see a design in figma and they're able to um see the code how it looks like what's gonna be like um in whatever language they're using as well as that they can go to a backend guy who has a new um api or system or something and they're able to convert that that mish mash of code into something beautiful

so in a real working environment what do design engineers actually do i'm gonna use myself as an example in warp i'm someone that's more so concerned with like the last mile of um development so i'm working with another colleague his name is arnie he's also a design engineer i'll touch more on what he does does later but really i'm someone that's like you give me a design i'll fill in the gaps of like

where can i make this beautiful where can i make it that one step further i can go in add animations add transitions critique what's already been done and create something beautiful at the end of it colleague on the other side he's someone that's more interested in the weeds of things he's like goes into design systems creating component systems make

making sure that the cold base is as beautiful as the the product itself which is super needed in like scale and startups or even just big companies in general you have to have that consistent cold base that someone can come in and just basically build whatever they want so this is kind of like of the the yin and yang of design engineering there's a wide spectrum of us we're not all the same

we have our strengths and weaknesses but it's really that at the end of the day what we care about is how the interface feels making sure it's as high quality as possible leaving no gaps leaving no room for error we want everything to be a hundred and ten percent so you may be wondering now like how does a design engineer differ from like a front end engineer a back end engineer

a ui ux designer so it's a good question but it's really like say you're a front engineer a designer comes to you they say here's the design can you build this out for me they lack the taste which i'll talk on later they lack the taste that design engineer have to make decisions on themselves by themselves so maybe they have static design

which most figma designers do not many do like um actual spec out animations with them so they just see that they'll go in and be like hey we'll just make this make this make this make this they don't have that opinionated and push to make things as good as possible so they kind of like lack that trait that design engineers have

yes we both care about building the final product but we make sure that final product is as good as it be we don't have to rely on the design as a whole to be able to do that for full stack engineer their skills are more broadly spread out so they'll be in the back end making the design system they'll put that into code they'll take the designs as needed

so their skills are pretty spread out same way a design engineer skills are spread out but they also lack that same depth that we'd go into we get that second layer that most people don't see we make sure we got the those tiny interactions feeling right that's something like a full stack engineer would like gloss over because they're just trying to ship a product and for designers it's much more simpler

their work ends in figma once they make the design they can't really go and say this is it no one's gonna you can't browse the website in figma so someone like me someone like irony we can go in and design the whole website but we know how to turn that into code that's the the beauty of a design engineer we're able to use the tools we have at hand

to create something spec something out quickly in figma build a prototype build everything we skip that stage in between the handoff so that's the real distinction between us now you may be wondering why do we actually need design engineers so i think there's three main reasons i'm gonna outline them now first is slop we're in a world where

there's so much slop in the world at the moment ai is taking over people are going and cursor they're clicking make me a website no mistakes and it spits out something like this purple gradients just complete stop and the average person they know like hey this website it's trash it's they can feel the they can feel the lack of human elements within it design engineer here is

we make sure stuff like this never happens we want something that feels human and that at the end of the day is what's gonna differentiate between a good product and a special product something that people want to actually use versus something that people have to use so you have a question yeah rocco what are other than the purple ingredient

some other tells that something is purely slime okay there's a lot of tells one is scroll driven animations that's poorly done bad layouts bad typography and mishmash of colors bad copywriting people just feel this stuff like even for example here like just how the spacing between this and this

the center alignments the random colors there's no cohesiveness between the actual um design people can come in and see well not people can come in but they can feel something's off we'll talk more about what that something's off is later on so moving on the second part is taste so i'm talking all about taste and i'm gonna make sure to explain what taste is

but i have here a simple demo so we see two different interactions it's gonna be at play here and if anyone wants to differentiate between what's going on here i'd be open to any any ideas yep that's one there it is there it is that's that's pretty much it so you both have the right idea what's going on

the first one is the site within is transitioning of course you can see the transition of the text but the actual container itself isn't morphing with the shape of the content so this is something that can be seen in a lot of apps most apps would mitigate this by making the button full width so it doesn't have to manage the actual content other apps just don't do it at all they just like skip to transition

so stuff like this is where a design engineer would see a spec they'd see hey we you have three different states of like a button so you have a loading state uh in progress state a completed state how can you make this tiny interaction something that people can remember this is where someone like me would be able to spot that we'd go on and say hey this is the perfect time to add in this novelty

this cool feature that people will post about they'll remember the app for this sort of stuff and you can see this type of stuff in the best apps on the market the ones that you use every single day and that type of taste that type of knowing when to add is something that design engineers specialize in question what are some example products or even flows that come top of mind to you

that we could know right now that you think have taste that you can know right now i have taste i think top of the list cause most people here have probably used in the year that's probably like the standard of like taste and no one went to add enough of a animation and something that people can do ai stop usually does is add animation everywhere

adds random stuff everywhere it's people can see when novelty is being overused but apps like linear apps like audio stripe and those type of apps they know when to adding a touch of um sugar is what i like to call adding that little uh sweetener to the product so yeah that

that's pretty much it the next and third part is speed so as a design engineer as i was talking about before you have to be able to adapt to different situations and for example this is something that i worked on a couple of weeks ago basically it's a soundlab i created from um

using web sound api and i'm someone that has no experience in sound design i'm just a i'm just a developer but with the power of ai i was able to use claude to communicate with it and understand how to build something like this prior to this i'd have to go do two weeks of research figure out how to what the hell is a synthesizer

all this other stuff and that takes so much time but now i can do something like this in a matter of hours and just get it done but also this is the key part i'm able to inject my own taste into it so when it gave me this it didn't look like this at all it just gave me some ugly buttons ugly animations but you can see the stuff i've added to it

different pops of color the different um morphin objects it's that's little layer that's what makes it special you can do something in a couple of hours people can be tell but if you add that final touch that final push to make it feel like an experience that's what people remember so this is the big one what's taste

so taste is a controversial topic on online spaces it's kind of a word that people throw all around the place but i think it's actually very simple to understand so on the screen now is a picture of uh rick rubin i'm just gonna give a brief description of who he is he's one of the biggest names in creative spaces

he has been in the rooms of some of the biggest songs ever made jay z beasty boys red hot chili peppers this goes on and on but what people don't really know about him is like he's not he's not a musician but he can make music but he's not like a talented musician he's not on the drums doing everything he's the guy that people go to to say hey is this good or is this bad

people value his opinion on things and as a design engineer you kind of have to be that person at warp i can receive design and i have to be able to with my own input say hey let's take a step back let's rework this let's try something else let's experiment you have to have that opinionated taste within yourself to be able to be that person in the room

that turns something from something great into something special so people think that taste is inherited you can't learn it and i'm super against this topic so i'm gonna teach you some ways to be able to come tasteful in your own ways so the first way is to study when i was beginning like i said i was doing a game dev course

i had no experience in design development how to create beautiful interfaces so what i did was i went to x to arena all these different sources of information and i just started looking at them inspecting them understanding what made them good and what separated them from other stuff that was bad and and after this i just started implementing them

my own work trying to copy what they did like one for one then over time i built this sensitivity in a way to what's good and what's not i was able to see hey this typography is misaligned this layout could be just a disem space and looks wrong people can learn this it's something that it's not too hard to do you just have to expose yourself

to these different materials and you'll be able to spot things pretty much everywhere and i'm gonna throw up a quick example from actually linear themselves so one second let me pull this up so this is their brand new web page so i'm gonna run you through how i go about learning from others so first things first on load

we can see here they have this animation that fades in they have this little stagger in my head i'm going hey i can use this in the my own site how can i use stagger how can i display information what that stagger does it's bringing you slowly into that experience it's making you remember hey this is the big part that we wanna see let's look at the navigation now

cause i spot this when this website released so i'm gonna zoom into this tell me if it's visible for you guys yeah so perfect i'm gonna zoom closer into this uh you're gonna wanna see this one so i'm gonna show you guys a question look at this transition here to the product let me actually scroll to the left of it

so you can get the full width do you guys notice anything anyone make a guess of what's going on or what i could be seeing no so keeping the overall container in place like not shifting that like most websites do but they're just transitioning the inside content right uh huh it's close it's close

you wanna you wanna show something and then as you like it's following the movement of your nose mm hmm okay it moves yeah yeah it does it does it does okay that's actually good two observations but i'm gonna throw something out that is actually super super precise if i zoom in some more if i was to be on the team this transition here

if you guys keep your eyes on this left hand side that contents is overflowing outside of the container it's it's not actually we have two containers here we have the outside container and we have the inside container just keep your eyes on this it might be hard to see on the screen but if i transition from there you can see it's kind of bleeding outside okay i see it now

you see it now so stuff like this like but that's bad right that's bad we don't want that we don't want that what i do is i'd apply some sort of like content visibility on that inside container it's a problem i've like faced when building like stuff like this but that type of stuff is something that comes through years of studying building just getting interactive with different apps

different websites seeing what works what doesn't so honestly guys like most of the best sites they follow the same practices the same principles it's really just seeing where they're being applied and using them yourselves and then the next point is like i said before notes and so this is another interactive experience i'm gonna play this video i want you guys to try and figure out

what's going on here is there something off do you see something that's could be i'll i'll leave it going for a couple seconds this one's pretty hard so don't worry don't worry if you don't see it you i might be wrong in imagining things but um isn't the timing you see in me you got it you got it so so something that you use a lot yes yes that's you got

so this these two on the edges share the same timing the one in the middle then i go again slightly different so you should be able congratulations you got you could be a design engineer there you go you should be able to see this so imagine this this is a small scale example but if you have an app and it's like one side has different colors one side has different animations

there's no coherency between them people notice that and that's what when people say hey this feels off that's the thing that people don't know how to describe but you need to be able to figure out so when someone comes to you with like a website a component's design you need to be able to go to them and say hey this is actually what's off this is where you need to improve the animation

improve the typography improve the layouts whatever it might be so nice nice work to you and the third one is to build so like i said before i was big into copying there's a book called um steal like an artist that's kind of what you have to do if you want to build your skills copy the best so this is an example from family dot app

they have their own like crypto wallet app and on the desktop so i saw this like cool model i was like yo that's some like cool stuff that i could like mess around with so what i did is i took the the overall design also from the app and i created this like cool transition change the colors you can do whatever you want to edit the name and basically i'm taking inspiration

i'm trying to see what they're doing when you're like looking at these websites you wanna be like website on this side inspect them on this side you wanna see inside and try and really get become one of the web become one of the app whatever you're building try and understand what they're doing why they're doing it then you can relate it to whatever you're doing so i have like millions of these examples

where i'm just copying stuff learning from others and that builds that sensitivity i was talking about that mental archive of hey i know when to use a spring i know when to use an easing curve i know when to use a tighter uh letter spacing all this sort of stuff so hopefully those three steps if you apply those over time you'll start seeing um your taste improving of course

it's gonna be bad at the start like if i was to pull up my old gift for pastries from like a five years ago they look like an absolute mess but you have to be that like self critique you have to be able to see others critique them but critique yourself use those critiques to improve yourself so you may be wondering now how can you yourself become or transition into being a design engineer

and i think it's personally like something anyone can do it's not that hard in a way it's just you have to really apply yourself it's something that i feel like in a few years most teams are gonna consist of a big group of design engineers crafting building with ai the advancements of that it's gonna be something that teams transition into

so say you're someone that's more on the design side and one thing i always say like say in my work if i'm presenting a design how quick can we turn this over i'm always like eighty percent of the battle is the actual design twenty percent is the code because you can build like most of the code has been solved people know how to cash people know how to use states

all that sort of stuff but the design that's like creating something from scratch you need to be able to adapt to your situation so if you're a designer you actually have like a slight advantage you have that eye that other people don't have but you just need to learn how to put that into something that's real so if i was in your steps if i was in your shoes

i'd be really going into claude and building what i'm like what you're seeing so any like ai cursor try and get that design you created into something that's real it doesn't have to be a full fledged end to end app you can start small but over time you're gonna start learning how like when i build in figma i can visualize the code is gonna look like

you need to be able to have that same eye for like a design you need to be able to say this is gonna be the the header this is gonna what the the htm is gonna look like the react code whatever you're writing so that's what i'd be really going for you'd have to be building it's written improving that technical aspect because you have the hard part ready you have the design that's that's the hardest part

you just have to be able to create that and if you're an engineer you also have to hire part done engineering is not easy you can see from ai to ai soft websites i was showing you earlier whenever someone posts one a week later someone's like here the entire cold base the entire database is public you guys just like ruin a bunch of people's lives so engineering is also pretty hard

so you have another easy avenue you just have to train your eye like i said before study all the different resources you go to your favorite apps whatever you're using just try and see like hey why are they doing this and why don't i do it let me start using that that same like a font style that that same um button style whatever they're doing

try and see why and then whatever you build try and implement that at the end of the day you learn from doing and if you're not doing then you're not learning so that's pretty much it for that now we're gonna round up and i'm gonna talk to you about what i think personally the future of ai the future of design engineering with ai is gonna be so i think personally there's gonna be a big shift

like i described before in the necessity of quality care and love in the product we're in the in the stage where so many products like i said was being built from just ai like someone can go into curse right now say type new website da da da it's done but they don't have that same feeling that same care

we're going into what i feel is another renaissance like with the rapid growth of ai there's so much to create but people want something that's created by humans that has that human feel design engineers are kind of leading that way we're building experiences that people love they come back to they wanna feel they wanna enjoy that experience and with ai as well

those experience can get built really quick we can learn a lot we can like like i showed before that sound i know nothing about sound i was able to create something with sound over just a few hours of conversation so we're in a really special time at the moment we're at the time where you can do what you want you can create that app you always wanted but you can also now build that with style

build that with quality and build that with care so that's pretty much the top guys if you have any questions i'm open to the questions and yeah thank you for listening yep when was the time your taste was wrong oh haha that that's a good one uh yeah he asked when was the time my taste was wrong that's a very good loaded question

but it's something that i've actually been through in my early days as a developer and at my time at lens there were some times where i suggested something that was really off uh i was big into blurs when i was younger i really wanted to get a lot of like um i want stuff to feel like it was morphine and my manager at the time he said yo

this is not what we're looking for in this app we want something that's sharp that's snappy so that opened my eyes to understanding what the product is you have to learn what you're building if i'm building something that's um for example with war for building the the best employee management system people are using the system to get stuff done quick they want something that's gonna work fast

feel fast and operate fast so if i'm adding in like cool spinners it's cool but people are gonna get bored of it like it's it's like that unskippable cutscene in video game you just want you're just pressing x to get to get to the next part so yeah that that was one part so nice question anyone else yo yeah you you next time so um you kind of hinted that i'm curious

like how it's kind of tricky i guess but how you're thinking about tooling like how much time are you spending in figma versus like directly jumping to code hmm um and kind of your outlook on like the future of that yeah yeah that's a good question so that really comes down to two things the person and as well as the environment you're working in for my own personal stuff i like to be in figma

and know the intricacies of what i'm gonna build it depends what i'm building i'm working on apps to the side i wanna know like what that app is gonna look like i think like i'm building for a whole company i kind of slows me down a lot but it's how i like to build but when i'm at work if i'm trying to get stuff done most of the time you don't really need to be in figma

it's the figma i like to look at figma if i need something that it's kind of more technical it's kind of more like out there we want to build like a redesign a rebrand we need that figma board to really pull from and with it's using figma like figma dev you can take like the values the variables and all that and then i transition that into cold so like i said it depends on the person

it depends on the environment you're in as well a few more ever go here than i used to so you first i guess my question is about motivation like how do you stay away from like ai slot hmm in the sense that code code etcetera is like a shortcut mm hmm and you're saying that you have to develop your own taste and like keep developing it mm hmm as design trends come and go

so how do i stay motivated to build the best to make sure okay that's a good question yeah really it's personal desire i want my like even when i'm talking to my colleagues i'm always saying i take pride in whatever i do and that pride resonates through the work if you don't really care if you're like fifty percent like hey i just want this to work it's gonna look like crap

but if you actually put that hundred and ten percent into whatever you're building you look at whatever you build i want you to look at it as a representation of yourself and if you have to build a to do app make it as good as you can if you have to build a fully end to end app make it as good as you can because when people look at that they're looking at you so

you want that to resonate with how you feel and how you look like so that's that's that's how i do it uh yeah so i have a question i feel like one of the things you do really well is balancing form and function mm hmm and i think in my experience working with a lot of designers um over the years i think often designers can fall into too much

in love with just the form and sometimes ignore function and i think maybe one way to think about design engineering is you're bringing the function more uh huh to or these two kind of things more together uh huh into a synthesis i'm curious like if you think about that actively cause i think um when you talk about like for example the example you gave around if it's an app and you add this beautiful like spinner

it could be beautiful but if you have to see it over and over it's gonna get tiring how do you develop that in yourself how do you kind of like not fall into have you always been this way is it something you have to like practice yeah and develop i'm curious too yeah it's something that you kind of just learn through experiences and feedback feedback is something that you have to just it's gonna come eventually

but i'm always thinking like um sometimes like the best animation is no animation like people sometimes value speed over form and that speed is in a result the form um like i gave the example before i wanted to add that blur i thought it was beautiful but then you realize people can go through that experience a thousand times the first time it's cool

but that's one millionth time it's it's like bro come on so i'm always thinking especially now that i'm really into product i'm thinking how many times is someone gonna see this and what's that relative impact to their experience on a web page on a low on like a landing page go ahead do what you want even still on that page don't go too crazy there's there's this

there's a fine balance but you want to see like you want to direct people's attention it's almost like um arts it's pretty much an art at this point you wanna make sure people you get people to see what you want them to see feel that feel how you want them to feel so that loading that linear um stagger animation it's cool yeah it shows only when you reload the page

and it's really only showing on that section the rest of the page loads instantly but because of that first introduction you get a feel of elegance and that flows throughout the app if the rest of the site was like that firstly it's gonna slow down the experience secondly people are gonna get bored thirdly it's gonna get repetitive you wanna think of a novelty form on like

a graph so imagine form and function on a graph and i think of it as almost like exponential in a way that you wanna use it so if you keep using something eventually people are just gonna get fed up it's not gonna feel fun it's not gonna feel novel in games like mario the star it only shows up like in one place in a level but people are always chasing that star you wanna see oh

where's that star where can i find it so you wanna kind of think like that think of like making stuff feel necessary feel needed so that's kind of how i look at it for the future design engineer what level of degree of separation do you see between you and the end user to actually get the the the feedback from that end user in a in a organization did you expect that that video would go

come through the product manager or you have the ability to have that that direct connection with the customer the customer yeah uh so you're asking me like how is that feedback gonna come in like the future yeah i think it's or or now right in a in a healthy organization that that propels design engineers to

to do a better job because that that part the customer feel like it's critical to it's critical yeah to build something great and also to build something yeah i think it's for like the example of um the linear site you can see the post that they posted oh here's a new website people are already commenting like yo this is broken this is broken

i think that feedback loop is kind of gonna be vital like i said we're trying to build for humans so whatever a customer wants that's really what we should be building for we might see something that is like super cool we might be super opinionated of something but if the masses if like the end user doesn't feel that we need to adjust we need to start thinking like the end user and with design engineering

that's pretty much what we're like asked to do we have to think hey person a is gonna feel this person b is gonna feel this how do you make sure they both got the best experience as possible while also building the best products the most good looking the most quality products as possible so i hope that answers the question ok one more no i have a question

go ahead there's a lot of product designers or a lot of designers mm hmm because they have this sense of like taste and almost perfection perfectionism they can end up taking a long time to get something done but you've talked a lot about at least on the engineer side of your brain you need a lot of feedback you need to ship something you have to get that feedback

so how do you think about peace and when something is ready to go out versus maybe in your instincts you want to perfect it and it's not done right let's say that design page doesn't have that type of feeling but it needs to get out it needs to get out yeah how do you think about balancing that sense of like perfection and taste mm hmm with with needing to ship something gotcha

it's a difficult balance like i said you have to take pride in your work so what that entails as a developer as a design engineer you have to really think how can i make this say you have a two week deadline you can't start thinking of um let's animate the whole page just have everything work you have to really focus on key details while making sure everything works

uh i gave the example of this full stack engineer uh they get the whole stuff done but they forget like little parts you wanna make sure you get that little part in while still keeping to pace um most companies they'll probably like set one week deadlines if you don't get it done it's going out regardless so you don't really have the the um power as a designer near to stop that flow

because at the end of the day time is money and time wasted is money lost we wanna get products out in a quick pace and like i said with the ai we're able to speed up that development film so you really wanna go in and say hey these are the key parts that need to work if i was like designing a i don't know let's go for a form or something

first things first the form has to work i'm gonna always dedicate an extra bit of time maybe two days for refinement i'll spend one day deciding these are the key elements that need to work and this could be cool to add in that cool part let's make sure you got that in these are extras the extras are not critical the cool part is critical

the main form is critical so that type of thinking it comes through experience as well it's hard to understand like hey this is what i need to get done but you can feel when something is great and could be greater but you don't release nothing people can spend i know myself i've i'm working on a lot of stuff you can spend like a lot of time just thinking of something

and not getting out but if if you're it's in your head but if it's not there no one's gonna use it so really spend time on prioritization and then optimizing the prioritized and that's how you actually separate yourself from people that just ship so one more question um i really curious to get your perspective but like from portfolio perspective for a design engineer uh huh like

is it a focus on like these micro interactions for example that is really the key or is it more about like showing invention specific projects or like obviously a combination of both but like what do you like think about for yourself and what are you looking for hmm good question so for me i'm big into showing people that i love what i do

and that's really a good determinator from someone that just like copies if in a way because everyone can have a portfolio that's they have a bunch of micro interactions but they don't actually have that feeling of like hey i'm really doing this all the time i'm i'm someone that's always trying to get something else show something try and build something try something experiment so show all your experiments

even on my portfolio i still have stuff from like years ago but people can see that progression and i think that's what people resonate towards they want to see that care you put into yourself that dedication you took to get to where you are as well so and if i was in your case i just be posting whatever you do if it's a new um

components you made if you copied something reference show the reference show your final product if you go through my portfolio it's my name dot com you can see everything i do i'm also working on like my ui dot wiki it's i'm just sharing information trying to give back to the community and just teaching people whatever whatever people want to learn

i'm big into giving knowledge and spreading that out so people can build great stuff together so yeah if you want to build a portfolio now that stands out in my opinion just everything you're doing just put it there like people want to read that stuff they want to see it they don't want to see just random stuff random components just put yourself into the into your portfolio and that's gonna stand out

so final question one more question one more question i'll do a final question go ahead do you have any hot takes on design on design engineering on engineering uh let me think i i have a lot of takes i think that i don't even think this is a hot take but honestly i think that a lot of these okay how can i say this in a in a good way

i think a lot of these generated websites that people ship out they they they get found out of course i think that if i was to be in charge i would just like ban all of them i i'm not a big fan of all that stuff uh another hot take i suppose is like scroll hijacking i hate that stuff i hate taking the the control away from the user another hot take is i mean

i'll give two hot takes i think two is enough two is enough thank you so much guys i appreciate it