A design system helps engineers and agents ship consistently

Transcript

Transcribed by machine (Whisper) from the episode’s audio, so a word may be off here and there.

1. 19:32

   I feel like nowadays, any engineer can just start shipping. The shipping stuff is not hard anymore. It's easier than before. So in some ways, almost everyone in the company can ship basically. And now, as a designer, how do you make the craft and the quality still good? How do you avoid just a bunch of slop going to prod all the time? Yeah. Yeah. It's hard because there's a lot of benefit to letting everybody in Granola is like writing code, shipping code in one way or another, like A lot of it's for internal tooling, not into the production, but a surprising amount is into production as well.

2. 20:05

   And there's like some power in having anybody be able to go and do that. And I want to encourage that and not make design like a bottleneck for that. Yeah, I guess some things I think we've done that I think really helped there. With the rebrand that we did in February, we did a bunch of work to overhaul the look and feel of the app, make it feel in line with the brand. but in doing that we also built that out on a new design system and so like everything behind the scenes is tokens and components and uh yeah it's all it's all reusable not just the human but for agents too there's md files all over the place to teach the how to use the design system that's i mean that's helped a lot for like stuff that's not super like design heavy or doesn't need thinking about super hard like it usually comes out looking decent uh okay okay just from the agent right of

3. 20:53

   code a lot of the i don't know for building enterprise features in the settings menu like you can just ask you know it's a you just ask the coding agent to um you know i need a new page in settings that does x y and z and when this toggle is turned off this and and uh it does all the right things like it uses the components yeah got it yeah yeah yeah for the designers i don't know i feel like they're it's an interesting timer we're like a real figma had like a complete hold on the whole design industry you know for good reasons like it's just a great tool um yeah i don't know 80 of my day was spent in figma both like catching ideas iterating on different approaches and also like refining and handing off designs and i feel like that's just all been blown apart like in the last year or something and it's honestly now like uh i don't know all

4. 21:40

   the designers use all kinds of different tools all day long like like um we're an in-person company we do a lot of like initial thinking of whiteboards together in rooms i mean sometimes like a whiteboard sketch is enough now to give to an engineer and go with it because like the coding agent with the design system go and do the thing you know like do the right yeah yeah and then and then i don't know like uh i have an example actually we have like uh some some mocks and stuff premium beef so i could talk through how i went on that yeah i mean how how much do you stick my now is like 10 or you just don't use it anymore uh 20 maybe yeah something like that it varies like i i some designers on the team will be a lot more than that and i think it depends on the project too like um when um when tanya was working on the a paywall you know like

5. 22:24

   subscription flows and upselling you to the the business tier and stuff like that that's all like all of the hard design stuff there is like does this flow make sense and does the copywriting put the ideas in your head at the right moments and it's far faster to iterate on that by just looking at it all on canvas and it's not it's not heavy on like interaction detail or like there's not too many states to have to worry about it's just like a linear flow with copywriting being the hard thing um whereas pre-meeting briefs for example is much more interactive and integrated in the core flow and so there was a lot less stigma and a lot more prototyping in um in code for pre-meeting briefs for example yeah it makes sense because it's just a couple of bullet points right you gotta make sure the bullet points are actually good yeah so yeah yeah it's like where

6. 23:06

   do you where do you show them in the app and um yeah so like this was a this was one of tanya's early prototyping, um, explorations. Like, I think we basically went from like chatting about where the, where the brief could live in a room on a whiteboard or something to this, to, to her kind of like mocking this up. So this was like, what if it's in the notification and, uh, this, you know, like stuff comes from here. You can ask cursor to be like, Hey, I want to add this brief text, Please text, can you go put this in the notification that appears in the top right of the screen before a meeting?

7. 23:42

   And can you also please go and put it in the bottom of the screen? And could you also go put it in the floating transcription indicator on the side of the screen? Do all three of those things now, you know? And you can instantly get so much more signal on, like, is this going to feel good or not? Yeah. And then, you know, like this whole project like flip-flopped between prototypes like this. and then back into Figma and then prototypes again back into Figma.

8. 24:03

   Yeah, it was really not at all linear. I think that's more molecular now. Yeah, because I guess you want to get as close to the actual end-user experience as possible, right? So this feels more interactive than like static mocks. Yeah, exactly. And I think like, especially with... Let's see if I go back to mine, to us, for example. Like with something like this, you know, it's pretty simple. It's just a bunch of text.

9. 24:30

   And there's, there's a bunch of nuance in like how loud you make it and where do you put it on the screen and whatever. But really the thing you're designing for is like, how does it feel when you're stressed and you're late and you're arriving to this meeting and you've forgotten who the person is to, to like receive these words in this, in this way. And, um, it's very hard to get a realistic feeling of that from looking at a mock-up of like somebody else's brief, you know, or like a made up brief.

10. 24:56

    like it really it really matters that it's your data and it's your stuff you're looking at to make a judgment call on whether it works or not yeah that makes a lot of sense yeah yeah yeah and also like how how good the brief is awesome matters right it's not just about the ui it's like how good is the brief yeah yeah yeah yeah exactly yeah yeah yeah do you guys like uh like another way i've found to just like still let people ship but still have higher quality is like you know just like a shit ton of dog food internally and like you know showing to beta users and getting their feedback before you ga the product right like i i assume you guys do that too yeah yeah yeah yeah we do we we really like try and push to get like when a project starts to get like a shitty end-to-end working version of it in the app as quickly as possible um yeah like

11. 25:38

    we had brief we had a version of this brief in the app within like a then a week a week and a half of of um starting the project and it was incredibly ugly like it was just in a big box at the top of the notes and um yeah you know the data wasn't good and the yeah it wasn't well written but like i think you you want people to be feeling the pain of this thing not being good like day in day out it's a very yeah it's a very effective way of like uh of you know making you give a shit about yeah you probably have a bunch of like internal slack channels giving feedback and stuff like that right it's like yeah yeah yeah yeah yeah um cool well i mean uh i i guess