Tommy Smith - How side projects can land you a dream job

We've been talking a lot about the newfound importance of side projects, but what's an example that actually got someone hired?

>> We're in a in a an era where these these side projects can tell you so much more about a designer than work that they were contracted to do and sort of, you know, boxed into.

>> How do you position yourself as a new design engineer in today's market?

>> If you can build these interactions and you know what makes them good and you know what makes interacting with a product feel good, then you absolutely can be a design engineer. There's

nothing to stop you.

>> Welcome to Dive Club. My name is Red and this is where designers never stop learning. Today's episode is with Tommy

learning. Today's episode is with Tommy Smith who recently landed a job as a part [music] of the Dive Club talent network and a really big part of it was because of the quality of his portfolio.

So, we're going to do a deep dive into his strategy, his side project Krono, and all of the little details that make his website so special. So, let's start

off by hearing why he decided to change his portfolio in the first place.

>> I think I really wanted to strip back how I approached a portfolio. I think

this is a problem for a lot of designers really is is like overg engineer it, overd design it, spend so much time like back and forth in inside tools like

framer and and trying to get like so much visual design in there that I really sort of neglected the content and what I was actually showing about myself. So with this, I really wanted to

myself. So with this, I really wanted to take a sort of less is more approach. I

I didn't want to sacrifice any of the cool sort of detail parts. Um, but I really wanted to make sure this was digestible, easy to scan, easy to read.

>> How did the homepage compare your last portfolio and what you have now? Like

it's obviously very trimmed down, but where were you kind of coming from roughly?

>> It was almost designed like a product. I

quickly sort of learned that, you know, lots of drop shadows and highlighting and was just not the approach and it just looked incredibly busy. I quickly

learned as well that that just doesn't work for a portfolio layout particularly well. It's just not doesn't lend itself

well. It's just not doesn't lend itself well to to what people are used to seeing. I think in a weird way some of

seeing. I think in a weird way some of that essence has lived on here like you know we we kind of have a sidebar here.

It's it's like probably uh less traditional than like a top navigation you know you'd see on most sort of websites. So I think that was like a

websites. So I think that was like a little piece that I took over. I just

stripped it back. I took all the sort of unnecessary details off it and worked it into like a much more sort of simple refined layout that I think works quite nicely in this context and still has

that sort of uniqueness and a tiny insight into like what I love building is is you know software and products. So

it felt like a natural sort of progression from you know this really overdesigned heavy sidebar to this sort of like really stripped back but still has the the nuance and detail that I wanted it to convey as well. It's

stripped back, but it also has that little, you know, floating avatar at the top. So, that juxtiposition of like

top. So, that juxtiposition of like hyper playfulness and then the really clean restrained design cuz I I've seen similar portfolios that have kind of the

the work outlined like that and, you know, simple paragraph above, but they don't have this little guy here at the top. So, talk to me a little bit about

top. So, talk to me a little bit about why you made that, what you were trying to accomplish, and also how you made it.

As you'll probably find out, like a lot of my work is just sort of the result of an experiment and and going so like so far with it that, you know, it was

resulted in in this. And this was me exploring Rive and just like falling in love with it. I'm someone that's always wanted to be able to like build stuff in After Effects and you know that like the

really like fine-tuned detail and easing and stuff and I can't believe RIVE isn't bigger than it is already. And I know it's a big product, but like it should be everywhere on the internet. Like it's

like it's like Flash 2.0, right? It's,

you know, the stuff you can do with it is actually mindboggling. And

>> as soon as I saw the eyes follow the cursor, I was like, "Ah, it's got to be right."

right." >> Right. Yeah. And and like it's it's so

>> Right. Yeah. And and like it's it's so lightweight. It's so easy to integrate

lightweight. It's so easy to integrate with iOS, Android, you know, web, whatever you're using it for. Like it's

it's awesome. And yeah, this is just like a little illustration that I'd done when I was really bored and I was like, it'd be cool to have like a little, you know, mascot or something that, you know, that represents me. I felt like a

robot was good, like big tech nerd. Like

I love everything technology, gaming, everything to do with with technology.

So, I felt like it was quite nice and representative of me. And then RI just allowed me to sort of animate it and make it playful, a little bit squishy, like the the cursor following and stuff.

And it I I guess it just sort of elevates the platform here and it elevates like my work to to another level as well. And I think, you know, I I'll talk a little bit more about like

being a generalist and stuff, but like this was a little glimpse into that as well. You know, that I like to dip my

well. You know, that I like to dip my toes in in many ponds and this is definitely something that I'm quite proud of because I'm not a motion designer and like it's not my my main

discipline. But I just had so much fun

discipline. But I just had so much fun building it and I think it turned out so well that I thought it would be criminal not to include it and I think you know it becomes very boring without it as well. Like it's can just easily be

well. Like it's can just easily be missed as like a another portfolio in my opinion but >> I mean it would have been clean and minimalist but yes it would have felt

like a lot of other portfolios that immediately separates it. Real quick

message and then we can jump back into it. Big news, animations just launched

it. Big news, animations just launched in Mobin. So you can see how world-class

in Mobin. So you can see how world-class apps use motion to guide, [music] delight, and create seamless experiences. It's just another reason

experiences. It's just another reason why Mobin is an absolute [music] cheat code for your entire design team. We use

it all the time, and I can't wait to start sending animation ideas to the rest of the team. So head to dive.comclub/mobin

dive.comclub/mobin to check it out today. That's m ob i n.

You probably already know about paper shaders. It feels like every time I open

shaders. It feels like every time I open up Twitter, I see somebody creating some new beautiful halftone effect, [music] but did you know paper uses real CSS as

you design? That means your layouts are

you design? That means your layouts are already code. So you can just one-click

already code. So you can just one-click copy [music] as React and paste into your coding agent of choice. Paper is

shipping more of their core editor every single week. And it's becoming so clear

single week. And it's becoming so clear to me that this is what the future of design tools should look like. So, if

you haven't tried it yet, head to dive.club/paper [music]

dive.club/paper [music] and start designing today. Okay, now on to the episode. The other thing that did stand out to me when I was originally looking at this portfolio is it's clear

from how you're even designing [music] the content that you want me to click through to Chrono, which is just a side project. It's not actually like your

project. It's not actually like your professional portfolio piece. I thought

that was really interesting. So talk to me a little bit about how you thought about the hierarchy of content and why you made that decision.

>> Yeah, and I think this this is a really like interesting topic for me because it came so naturally to want to push Chrono because a lot of the work that I was doing before and the industry that I was

in just like it was just almost impossible to showcase what I actually could do and what I wanted to be doing in the future as well. and I was really

conscious of of sort of uh sort of gating myself into an industry or a culture that I just didn't want to be a part of anymore. So, you know, the natural progression was like, right, I

don't have much work, you know, to show people in a professional setting that I'm truly like proud of and that I truly distinguishes me as a as a designer. So,

like let's build stuff. Let's let's show the side projects. let's let's put them like front and center so that everyone can see what I want to build and what I have been building. It was just something I was super proud of and I

think I'd urge anyone in a similar position, you know, where they haven't had at this point in my career, I hadn't had like tons of clients. I hadn't had, you know, and in the last 6 months that's obviously changed quite a bit for

me as a result of this portfolio and stuff. So, anyone in the position that I

stuff. So, anyone in the position that I was in, if you have side projects to show, like put them front and center. If

you're proud of stuff, put it up and and showcase it, you know, don't don't bury it. Don't sort of let it just be a side

it. Don't sort of let it just be a side project because um we're in a in a an era where these these side projects can tell you so much more about a designer than work that they were contracted to

do and sort of you know boxed into. But

yeah, so that that's kind of why I I ended up showing Chrono as like a sidebar item here and then in the in the biography and then as like the second body [clears throat] of work as well in the list of work.

>> You should take us on a little tour.

It's cool because even just for context like your website came through the dive talent network. I was kind of looking at

talent network. I was kind of looking at your stuff. You got me to click on

your stuff. You got me to click on Chrono. I wasn't familiar with Bal. So I

Chrono. I wasn't familiar with Bal. So I

it wasn't like you had this pedigree that would immediately make someone be like, "Yes, they're in." But then I clicked on the side project. I played

with it for like 20 seconds and I was like, "Oh yeah, Tommy's amazing." Like,

"Of course he should be in." So show us a little bit. It's really worth it.

>> Yeah. Chrono is a creation that was born from a lot of like frustration with modern calendar apps and sort of task

applications and uh and heavily inspired as well. I think it's worth saying by by

as well. I think it's worth saying by by Amy as well um that product and I know they've gone a different route with with what they've done now uh with meeting notes and stuff, but I just loved their

attention to craft and and detail and and the way they'd integrated tasks and stuff was was super inspiring to me. So

I felt like I had to build it. I felt

like I had to build something similar. I

had some front-end experience like my interest and curiosity had sort of led me into to learning react and you know tailwind and all the natural things uh

to do with sort of basic front end but where I really lacked was like logic and deep logic and complex front ends and it's like so what's the most complex

front end you can build right it's it's like a calendar dealing with time zones it's it's like there's there's so many facets to it that I felt like as a side project, it would be such a good

learning tool to just progress my knowledge of understanding how different complexities are handled in the front end. And I think that just made me

end. And I think that just made me better as a designer like understanding the nuance of you know implementing like this drag to create an event or just all the small things. It really surfaced

them to me and I think that made me a better designer undoubtedly. The basic

premise is um it's like a traditional calendar app really and it's got a lot of sort of my love and care into a lot of the details and transitions and things. So, like I just showed the sort

things. So, like I just showed the sort of drag to create >> the transition was what the first thing that caught my mind. Like you're doing some kind of like a scale tilt thing there and like even like how you thought about the origin point. Like everything

about how that thing came in >> was such a good initial experience where it immediately just checked my box of like, okay, yeah, Tommy cares.

>> Yeah. And I think that's the thing with side projects as well, right? Like if I told you how much time I spent getting that right, like you'd probably laugh.

And >> you can tell though, you can feel it, you know?

>> Exactly. And and I think that's that's so important and integral to who I am as a designer and who I want to be as a design engineer going forward is I I

want everyone to know that they've interacted with something I've built.

Like it has to feel natural. It has to be timed right. The easings have to be correct. And and these things are like

correct. And and these things are like why it's so important to do this in these kind of sandboxed environments is like you can learn these things. And now

going forward, I know what made this feel good. You know, I'm not with a

feel good. You know, I'm not with a client sat down with the time constraints, with the the PRD, and I have the freedom to experiment with things and and just go crazy with it.

And I landed on this. And little things like that are what makes an experience truly different from just another generic app or product. And I think that's my job as a design engineer is to get those things right and to make it

feel like you really have had an experience when interacting with these products. You hit on something

products. You hit on something interesting that I've been thinking about a lot, which is Claude Code is so good at extrapolating an interaction or a visual style. And if you can nail it

one time, then you can point at that and be like, "Hey, use that interaction as inspiration for how this should move and feel and make it all cohesive." And it's

shockingly good. And so if you sweat the

shockingly good. And so if you sweat the details and really obsess over one piece, it significantly decreases the marginal cost of those types of interactions in other parts of the product. Yeah, you've hit the nail on

product. Yeah, you've hit the nail on the head there really. Like once you've done it once, this can be reused in loads of different interactions, you know, and it might be slightly different per one, but like it's like the

foundational work. And I think that's

foundational work. And I think that's what AI does so well. It's like the foundations allow you to just go and be creative. And I think a lot of people

creative. And I think a lot of people are scared of AI, you know, taking creativity and and stripping people of creativity. But to me, it's it's enabled

creativity. But to me, it's it's enabled the opposite. Like it does the things

the opposite. Like it does the things that I don't want to have to think about so that I can spend time being creative, opening my mind and and trying things out. And I guess it kind of comes back

out. And I guess it kind of comes back to like this whole new paradigm with the skills and stuff. And I know there's been loads of sort of like front-end motion skills floating around from

courses and stuff. I think it's Emil that has like an unbelievable one um an unbelievable course as well. And those

foundational elements are really truly what like unlock us to to just take our creativity to the next level. And I can understand why people are scared of of AI and the the sort of stripping of

creativity. But I'd urge people to like

creativity. But I'd urge people to like frame it in a different way and you know use it as you know the blocks and then spend more time on the the human interaction and the things that that matter about these products and these

interfaces.

>> I don't know if this example that I'm going to share is a good example of something that really matters. But I do think that what AI has unlocked for me is it's created different types of

playgrounds and opportunities for me to be creative. One example is actually

be creative. One example is actually similar to your portfolio. If you go back to that tab, you have this pageen nav here on the left. And it really

stood out to me how you're doing the hover states. Like you have a little bit

hover states. Like you have a little bit of an X slide right on the label and then you are using this like subtle probably what like a three four pixel

blur with the opacity to fade it in like that. And this is a technique that

that. And this is a technique that frankly just is irrelevant when you're designing in vector, right? Like I would have never thought about that level of detail. Maybe I'd have the slide, but I

detail. Maybe I'd have the slide, but I definitely wouldn't have been able to accomplish that type of blur effect. But

now once I've kind of figured that out and actually Emil was one of the main people that kind of made me realize like, oh wow, he sent me a pre-launch page for his course and I'm like

watching all of the content fade in. I'm

like, what is he doing? Why does it feel so much better? and he was doing this kind of clever blur technique. It goes a really long way and now I understand, oh cool, that can be part of my practice and I can very easily incorporate it

where when I was just designing pictures of the product, I didn't even have the opportunity to think about that level of detail.

>> Yeah, absolutely. And I think, you know, it blurs awesome. Like I I really just like I have to refrain from using it everywhere because it looks so good. And

you're right, like you you don't you lose the ability to think in that that paradigm when you're in just static Figma files. Like you can't feel it. And

Figma files. Like you can't feel it. And

I think that's the biggest thing about my transition to being a design engineer is like it's so important to feel these things. I've designed things that I

things. I've designed things that I think are the best thing ever and then I've built it and it's terrible. Like

you quite often don't know until you feel it. And I think that's where, you

feel it. And I think that's where, you know, designers will be taken to the next level as well because with next to no coding experience, you can kind of like start to feel these things and and

quickly prototype and and and like feel how how [clears throat] you can interact with things on the page. And that's like so underrated as a skill for a designer to actually be able to feel it, learn

from it as well and know that when you come to design things statically in the future, like I'm going to do it this way because when I built that prototype that time, I know that it felt horrible to to build it that way. So I'm not going to do that. I'm going to stare away from

do that. I'm going to stare away from that direction. Um, and yeah, I think

that direction. Um, and yeah, I think it's just all a learning tool. Like it's

all elevation to the next level of of what being a designer is. And

specifically, I guess a design engineer.

You talked about this transition to becoming a design engineer. Maybe we

could just touch on your career strategy a little bit because you're only like five years into your career. Like you're

not that far removed from having junior in your title, which seems silly now looking at what the quality of what you're able to make, but you have been a

traditional designer at least on paper in previous roles. You've mentioned this transition a few times. How are you thinking about your career from this point on? It's it's such a an

point on? It's it's such a an interesting space now because I'd always considered myself a product designer, someone that designed static assets that

was then handed off to a development team. And now I think with the advent of

team. And now I think with the advent of AI, I just realized like I can take the plunge like I have enough front-end knowledge to be able to, you know, understand majority how these things are

working and how they're being built. And

the AI pipeline just allows me to build quickly and allows me to sort of like take these static mockups, make them into something interactive and and be able to know what is important for the

developers that they need to be able to complete the handoff as well. Do you

know to to be able to point out specific things or um build it in a certain way that fits with an existing system? A lot

of the like design engineer role for me is is about not only enabling myself to to be able to build in in front-end code

and and and interactive prototypes, but like my team around me as well, like I'm working on a project at the moment um with a client and I'm basically responsible for their pipeline from

their designers being able to copy a Figma link into cursor and we use like a a a JSON schema that reads like basically all of the tokens in the front

end uh and then connects with the front-end system and they can make updates and and push PRs from just a Figma link and just making a system

that's bulletproof. These AIs aren't

that's bulletproof. These AIs aren't perfect and the the models aren't perfect and the tools aren't perfect, but they're good enough now that we can build systems around, you know, taking a

static design and making those updates and and pushing a PR in the front end.

And I think that's as important as being able to do something yourself and working in a team and and enabling those other people that maybe don't have the experience or the the front-end

capabilities to, you know, actually go and build that stuff themselves. Like

removing that sort of barrier for anyone with no technical experience is, I think, going to be an important part of a design engineer's role as well as sort of just building and prototyping

yourself. Do you plan on changing the

yourself. Do you plan on changing the I'm a product designer line to I'm a design engineer? Like is that the extent

design engineer? Like is that the extent to which you want to identify with this or when you're even talking in interviews with companies is it like I you know I'm a designer but I can own a bunch of the front end like it's such a

granular silly question but also I know a lot of the industry right now is kind of wrestling with this and trying to figure out where is the line between designer who dabbles versus design

engineer. is such a blurred line. And

engineer. is such a blurred line. And

you know, I' I'd be comfortable saying that I'm a design engineer because I now have the experience and the knowledge to to build the interactions like you see

on my portfolio and to build them ready to be used in a front end. And I think that is the sort of bar for me is like would I be happy to hand this off to a

developer this portfolio site? And the

answer was yes. So like why shouldn't I be able to do that in you know in a job context handing off components and different things like absolutely and I think it depends on the company as well right I think

>> totally >> in an early stage startup like someone more like me with a probably a thicker design background and a less engineering background is going to do better because

can just iterate quickly and just prototype quickly in a more structured environment where you know the code bases are mature and you know everything's done a certain way maybe

less so maybe it's more suited to a more experienced developer and someone with more engineering background but I think the answer is like who knows like it really depends like it depends on so many different variables that who is to

say really that you know this person is a design engineer or this person isn't and my point to anyone like looking to apply for these roles or that has a bit of like I've had imposter syndrome with

this sort of thing for a long time like I I've wanted to do this I've wanted to transition position. I don't think my

transition position. I don't think my knowledge was good enough. But it's like to me, if you can build these interactions and you know what makes them good and you know what makes interacting with a product feel [music]

good, then you absolutely can be a design engineer. There's nothing to stop

design engineer. There's nothing to stop you. Hey, really quickly, let me tell

you. Hey, really quickly, let me tell you about the allnew dive talent network. I've hand assembled over a

network. I've hand assembled over a hundred of the most talented designers and builders that I know so I can recommend them to my favorite companies.

So, if you're listening to this and you're open to new opportunities, the talent network is anonymous and super low pressure. It's [music] just an easy

low pressure. It's [music] just an easy way to see what's out there without having to post on social media. So, if

you're interested in joining or maybe you're looking for your next hire, head to dive.comclub/talent. [music]

to dive.comclub/talent. [music]

Are there any other interactions on this site that we haven't talked about that you feel like you've sweated the details on? Yeah, probably another thing that

on? Yeah, probably another thing that I'd like to show is like the theme switcher. Um,

switcher. Um, >> I love that.

>> That's another little subtle thing.

>> How do you pull that off?

>> I I actually don't think it works in every browser, but it's like a it's basically like a new API for um transitions between views and that's how I was able to do it. Um, so yeah, I

don't I'm not sure it works in like Firefox. It's always Firefox, but yeah,

Firefox. It's always Firefox, but yeah, it's something I wanted to include. Um,

>> it's cool. Yeah. And then I think one of my favorite bits actually is actually like in the meat of the case studies and I I doubt anyone's really seen it potentially and it's this sort of little

bar down here. So it's like a little progress bar. You can see as you go into

progress bar. You can see as you go into new sections the new one flips in. Um

and then we can also expand it.

>> Oh, it's so good.

>> The the staggered animations as well.

And uh we can just like navigate to different parts of the the uh the case study. Um, and I don't I I doubt

study. Um, and I don't I I doubt anyone's ever clicked on it or even probably noticed it, but I had so much fun building it. And again, I think it's one of those things like it just it

shows like an extra level of craft. And

>> Mhm.

>> I think there's a fine line between just like throwing it all in there. Everyone

knows you can overdo motion on anything and and it can feel overengineered, but I think trying to put these things in subtly is so much better than like trying to make them, you know, stand out

on the page or force them into someone's face because they just feel natural to the interface and they just feel like they're part of the interface. Um, so

yeah that's >> it's unexpectedly good, too. You know,

when you don't know that it's coming, that's when you create that reaction.

You're like, "Oh, wow. That was that was really good." you know,

really good." you know, >> and it has no need to be that over the top or it it doesn't even really have I don't think serves probably that much purpose in like quite a short case

study. But yeah, and especially the

study. But yeah, and especially the stuff like the progress bar and the the sort of sliding in and out of the sections is uh >> I mean again I was like what is the goal of the case study? The case study is to

win over that hiring manager who you were able to get them to go a little bit deeper. And if it does nothing but just

deeper. And if it does nothing but just speak directly to that person that's looking for people who can handle the craft, that really truly care about the practice of design, like you nailed it.

You know, like this would have been a massive green flag for me. And honestly,

it leaves me wondering how the heck did you build it? you know, it's it's there's so many little details about how it moves that frankly are better than what I've been able to get out of the box with AI. You've obviously figured

out something there, you know, and that's a great signal as well.

>> Yeah. And I think I think to loop back to to what I talked a little bit about earlier, it's like the foundational stuff, you know, I'm not expecting the AI to to be able to build something like

that out of the box. And I think that's an important sort of prerequisite. I'm

going into these conversations with the the model thinking as well. You know, I I don't expect it to be able to do that.

I just want it to build the foundations.

And I think my knowledge lets me fill in the gaps. Like I know, you know, quite a

the gaps. Like I know, you know, quite a lot about like the easing curves and and staggering animations and how to make that feel good. So, I don't want the AI to try and do that. That's where my

creativity can take over and I can, you know, experiment and and get dirty with it. That to me is like why my workflow

it. That to me is like why my workflow has just leveled up tenfold with the sort of advent of cursor and wind surf and all of those tools is I don't have to worry about the foundational work. I

can just spend my time crafting those little details tweaking those values.

you know that that's what takes most of my time and making sure that like the nuance of of every interaction is correct and right and I don't have to worry about whether I'm using a shaden

sidebar or whether I'm you know I I can just sort of allow it to you know build the foundations and then just focus on on being creative. You know, for somebody who has only been doing this

about 5 years, you've learned a lot and listening to you talk, it's clear that you're able to grow quickly when you point at something that you want to

invest in. So even just stepping back

invest in. So even just stepping back for a second because a lot of people maybe feel like they're slightly earlier on the journey in dabbling in code,

starting to build more, starting to work in tools like cursor and cloud code and maybe they don't have the foundational knowledge that you were able to gather.

I'm kind of curious if you have any general advice for learning, either specific resources that played a big role in your journey or even just

general mindsets for how you approach different materials or trying new tools or frameworks for the first time.

Anything that you think somebody who's a few rungs below you on the ladder could benefit from. My biggest asset in that

benefit from. My biggest asset in that period it was staying curious and staying you know interested in everything design. I think early on in

everything design. I think early on in my career I used that as a selling point and it was difficult to convey you know that I am I love this stuff like I live for it like I absolutely love everything

about software and building it and designing it. I have done since I was

designing it. I have done since I was like 14 or 15 way before I even thought I could do this as a career. And I would just urge anyone to to stay curious and

keep pushing the sort of edges of of what you know already, you know, and and keep keep building, like keep seeing stuff, keep interacting with products, like try things, you know, I've got

probably thousands of apps on my Mac from interacting with one of them or interacting with a specific part of one of them. I've been able to like go,

of them. I've been able to like go, that's [clears throat] really cool. like

how could I use that in something I'm building or can I recreate that? And I

think when you start doing that, you start to build up like a bank of of knowledge of these things that you know you like and the things that you know that work well in certain scenarios. And

I think that's what's really led my whole learning journey is like I love to learn these things and I love to be curious about how things were built.

And, you know, interacting with different products is is like pivotal to making sure that you're sort of like at the the precipice of what is is considered great. And I think, you know,

considered great. And I think, you know, we're in the software era now. You know,

there's there's new tools coming out every day. There's new products coming

every day. There's new products coming out every day. So, get like hands-on with them, see how they approach certain problems, evaluate them. You might not agree with how they approach something.

And that's also like something to learn too. You know, you you can be your own

too. You know, you you can be your own person in that regard. and you can have your own opinions and be strong in them as well. So yeah, that that would be my

as well. So yeah, that that would be my key advice is always stay curious and stay interested in what the the sort of industry leaders are doing. And every

piece of design really is is lent from somewhere else. And I [snorts] think

somewhere else. And I [snorts] think part of my struggle into where I am now was the imposter syndrome of feeling like I'm not this person, I'm not that

person. Like you see something on on X

person. Like you see something on on X or on on back in the day on Dribble and you think like, wow, how did they, you know, ever come up with that? But what

you don't realize, I think, in those moments, is that when you're viewing those things, you're digesting it.

you're you're learning from it, you know, and that stuff starts to creep up later in in your career.

>> One of the things that I think feels really nice in your website is how you created these little video previews in the case study. I think that goes a long way and it ties back to something that you said earlier where you wanted to

position yourself for the type of work that you wanted to get. You wanted to be able to sweat the details in interaction design and so you did that. I think it worked out really well. I'm kind of

curious, can we step back from there even and and maybe you could talk a bit about how did you think at a high level about the way that you wanted to present these different case studies down to the

content layout? Anything that you think

content layout? Anything that you think was intentional, I'd love to hear about it. I've read a lot of case studies and

it. I've read a lot of case studies and when I was doing my portfolio I really struggled to articulate especially in some of the other projects that were

like sort of companyled at a company and that weren't the side projects. It was

more like okay what's actually interesting about this? What can I extrapolate from this that shows that it was successful that shows that it was like welldesigned? I think interestingly

like welldesigned? I think interestingly from a lot of, you know, the the people that you've interviewed and just like general design influencers and things like that, seeing those portfolios and

what stood out to me really was like they don't need to be long. Like they

don't need to be long-winded. They don't

need a lot of text. No one's going to read all of it. Like that's just, you know, the the harsh reality that no one is going to read all of this content.

So, how can we make it stand out? In the

case of Krono, it was like these videos.

So, it was, you know, actually showing the interface working. If someone wasn't able to click on the link or didn't want to click on the link, they can still see the interface, they can still see how it works. It also gave me a chance to build

works. It also gave me a chance to build this like cool video player. Um

>> Oh, cool. I didn't even notice that.

>> Yeah. So, like little like custom things like that. And then in the case of Baddy

like that. And then in the case of Baddy Live where it was all static, making sure they can click on it and interact with them and like swipe through.

>> That little interaction there is so great. It's shocking how few portfolios

great. It's shocking how few portfolios allow you to just one click zoom in on the work. And then the fact that you

the work. And then the fact that you went one level deeper and allowed you like almost treat like a carousel.

That's really smart.

>> That was me again going back to what I was saying about no one's reading all the text. So like let's just give to

the text. So like let's just give to just go through the design. And in my experience, a lot of the times I've been hired, people were just looking for the visual design. Like they don't really

visual design. Like they don't really care. Specifically for my role, this is

care. Specifically for my role, this is probably differs for like serious like system roles and and those sort of things, but specifically in my role, they could see that I had an eye for design and that was what was important

to them.

>> Having an easy way for them to view all the the images and, you know, be able to interact with them was like, I think pretty important because like I said, I I don't know, obviously you can't predict how someone's going to interact

with them, but giving them the the chance to do that is like to me was a no-brainer. So,

no-brainer. So, >> another really small detail that I think others can benefit from, again, as someone who's looked through a lot of portfolios is you're really leaning into

the extreme end of the typography hierarchy with like the super subdued gray and then even above where you kind of had the list items and then you had

these white labels. It's really skimable and I I appreciate that because I am someone that is not going to read all the text, but I kind of do want to read a little bit just because it gives the gist and kind of sets the frame for what

I'm looking at visually. And you've made it very easy for me to just quickly scroll the page and get those oneliners.

Even the one the section below this is where it really stood out to me where you wrote those out as sentences there where it's like I can one two three get the business goals. I do not care about

that subtext, but I might read those business goals and it's only because you made it easy for me to do so. Typography

is like 90% of design. All of all of what we're doing is like rectangles and text. So, if you're going to get one

text. So, if you're going to get one thing right, like get the typography right. And I think again to anyone like

right. And I think again to anyone like starting out, learning, getting into the industry, that's such a good place to start. It's like learn how to make text

start. It's like learn how to make text look good on a page. And it's not as difficult as people think. I don't think I think it often gets over complicated and it's like use consistent font sizes.

Don't use too many font sizes. Um yeah,

use easily scannable colors and and add like hierarchy with with weights and things like that. It's such an easy place to start for anyone that really has limited knowledge or is just sort of

like wanting to get into it and that will just like elevate any interface so much by just like following like some basic rules about typography. I have a quick process question for you. How much

if any of this was made in Figma or did you jump straight into code?

>> This was actually quite heavily Figma at the start. A lot

of the in iterations were designed in Figma and I and I still love Figma. I

still love Figma as a product. I'm not

really one of the design engineers or designers saying that Figma is not going to exist because to me it's like it's still so much faster to just iterate in

Figma like to move things around to you know change layouts. I can't see a world where that really changes that fast and certainly doesn't become easier than it

is in just like a drag and drop tool.

Right? So for me, Figma's always heavily involved in my process and specifically this site went through many, many iterations of lots of different layouts.

I don't see a tool better than Figma even now with the sort of AI advent that would replace Figma in my workflow. It's

really essential in what I do and how I iterate quickly. A nice nuanced take

iterate quickly. A nice nuanced take there from a design engineer because I think the perspectives that are often elevated right now from people like you are canvas is dead. But I couldn't agree more. I love exploring especially when

more. I love exploring especially when I'm early in the process. Like it's

there's nothing easier than command D and making a mess and then doing it again and again and 15 more times.

>> Yeah. And I think to me that's like the inherent difference between the designer and the engineer. You know, from a design background and a creative background, a tool like Figma is

incredible. If your brain works like

incredible. If your brain works like just want to get ideas out, I want to get stuff down on the page. I don't care about structure particularly. I just

want a canvas that I can navigate.

That's such like a designer coded like frame of mind. And then I think the opposite end of the spectrum is like the the engineer the like structured approach. And I think I almost go back

approach. And I think I almost go back to school and it's like the people that were good at maths or the people that were like good at creative writing and art and all those kind of things. Like

to me they're like completely different frames of mind and therefore you know they need different tools to be able to basically get the best out of themselves. And I think from a designer

themselves. And I think from a designer background like I definitely put myself in like that camp like the sort of like I love to just get ideas down like I'm a creative really like I love making

music. I love writing. I love you know

music. I love writing. I love you know all those kind of things. So for me, Figma is just the tool that itches my brain, right? That I can just get

brain, right? That I can just get everything that I've got going on up here, like out onto a page and just iterate quickly, quickly, quickly. And

in my experience, a lot of the engineers just don't get it. They just don't get [laughter] they just don't understand why it's needed or why it's good. You

know, part of my job now really as a design engineer is sort of crossing those boundaries and frames of mind of of the two ends of the spectrum. How can

we make it so that, you know, they can have parity on these different things?

How can we make it so that these Figma designs make sense to an engineer? And

how can we make it so that this code makes sense to a designer? And I see that as like a super interesting problem that still hasn't like quite been solved.

>> We've covered a lot of ground. I want to make sure that we're not missing anything. Are there any other

anything. Are there any other intentional decisions that you made with this portfolio that you want to shine a light on before we head out here? I'm

super proud of this and like my iconography experience in general. And I

think this touches on what I was saying a little bit earlier about like I like to think of myself as a generalist like with the the motion stuff in Rive and iconography was another avenue that I

went down and this has actually been probably more important to my progress as a designer than any other project I've done because >> really >> I use this in absolutely everything I

design. like it's a full suite now of

design. like it's a full suite now of icons that I design with and it makes my designs me and unique. I loved having ownership of that. Like I loved having

you know like the this is my icon set like I made this only I use this and like you can see it in Chrono. It's used

in everything in Chrono and all my other side projects they all use literally just my icon set. And uh I had so much fun learning about the nuance of

iconography and some frustrations learning the iconography. Um [snorts]

but it's like it's at a place now where like I'm really like proud of it and like it really is uniquely me as well.

And I think that's something that not probably not a lot of designers have as well is like their own icons to use and stuff. And it was super worthwhile and I

stuff. And it was super worthwhile and I don't regret spending so much time on it at all cuz like I said it's just it's sort of found its way into everything that I do really.

>> I love that and I think it says so much about your mentality and how you approach the craft and honestly you're on a heck of a trajectory. I'm really

excited to see where you go from here.

So Tommy, thanks for coming on and pulling back the curtain and sharing a little bit about how you think and your journey all this work. [music] It's

really really inspiring stuff.

Appreciate it.

>> It's been awesome. Thank you for having me.

>> Before I let you go, I want to take just one minute to run you through my favorite products because I'm constantly asked what's [music] in my stack. Framer

is how I build websites. Genway is how I do research. Granola is how I take notes

do research. Granola is how I take notes during crit. [music] Jitter is how I

during crit. [music] Jitter is how I animate my designs. Lovable is how I build my ideas in code. Mobin is how I find design inspiration. Paper is how I

design like a creative. and Raycast is my shortcut every step of the way. Now,

I've hand selected these companies so that I can do these episodes full-time.

So, by far the number one way to support the show is to check them out. You can

find the full list at dive.comclub/partners.

dive.comclub/partners.