Leslie Cohn-Wein & Rafael Conde on Designing the User Interface at Netlify
Leslie you identify as a front in an engineer at a you focus more on design. But how much would you say your skills like sort of crossover like do you. You feel like you have really good design chops to in Rafeh. Do you do any like programming and stuff analysis to or are you mostly working in design tools and was mostly just implementing the design center like Kinda built or sorry designed by the designers maybe Leslie can answer. I yeah so you know design was actually Kinda. What led me into development side definitely have like a personal passion for the design side but I will say I spend most of my time in code or share on our react primarily and that's really where I do most of my work however I'm no stranger discussion abstract on some of the designed to us and and I would say is that we while we work in our own tools we do a lot of collaboration and have a lot of kind of day to day touch points with each other to to be talking throughout the entire life cycle? There's not like a hand off. Where design gets you know given to me to be implemented? It's like a constant conversation. Yeah Yeah Awesome makes no sense Rafael are you Do you consider yourself to be a programmer to or do you stick mostly to sort of design side of things I don't I don't aw I don't call myself a program but I know how to code in especially for side projects that usually code all the things but another another Fai thank God we I don't coat anymore as I used to do some light front and work but today a even I might play around with some pen or something quickly. I write the code for it but then I don't WanNa push code directly. Sometimes I do but it's like there's no need there's way more talented front end developers although we don't so lesbian the the Front End Engineering team. They don't really do a lot of design work in innocence of in in in design tools in also designers are not really touching the code but we are all talking about the same thing so we don't go over the details however design mockups are how we write the code but we are present in all the in the in the conversation about what we're building right yeah so we overlap a bit there yeah awesome that makes sense so I think maybe something that would be interesting to sort of walk through would just be taking maybe like an example of recent feature something that you've built and shipped analysis and maybe telling the story as to how it got started started and how much back and forth was and how the team collaborates and what it looks like actually ship something so we talked a little bit about this ahead of time and I know like one of the it features that recently was Kinda deployed and Nahla Fi that I know everyone analysis is really excited about is the new NETLA FI analytics feature. So what do you think about walking through that story. That'd be great yeah. analytics is our suicide analytics dashboard. you can activate for any any sites on nullify leave at nine dollars a month or site we will we when we were concept in this one of the things that I can really exciting was that front end was really sort of a part of the design from the beginning so the designer who is working on this sort of kicked it off with his own research so he he spent a Lotta time kind of brainstorming not not so much competitor analysis looking at existing dashboards collecting sort of visual usual you I examples of analytics and did some deeper analysis right. How did other solves the problems that we're trying to also trying trying to solve but how does that also different from our meads? Intellects is awesome but it still sort of at the very beginning of its life cycle as a product so it was also you know something like Google. Analytics is a lot deeper than than maybe what we were going to do so there was some complexity and the existing tools that we didn't necessarily need to need to copy over and one of the things that that that designer and I really did together with writing user stories about how people are actually gonNA use the future so that was something we started from the gecko rough. I don't know if you have anything the ad so I guess what I'm curious about. What did it look like to like? I kick off the feature from the very beginning so you mentioned that you know one of the first steps was kind of just sort of taking stock of the landscape and seeing you know what sorts of things are people doing. I'm did you have sort of a list of goals or anything like ahead of time like what are the problems that we're trying to solve by introducing this analytics feature yeah for sure Francis this berry man I have to give her a shoutout who's our head of product design in U. X. And she sort of helped concept the bigger picture of what are the stats that we want to show on the dashboard. What's what's feasible technically from our platform teams to be able to implement and then sort of figuring out how deep into that we were going so we had pretty specific nick ideas about what what we were showing a thirty days of data in particular at least to start off and then from there it was pretty open ended right so we we had to figure out what's the best way to display this data? What what type of chart or type of visuals asics my sense an go down that whole hope halfway so what did it look look for that I guess you could sort of call it a list of requirements to be like presented to the team? I'm did Francis present in any sort of like visual way or was it just more or like you know here's what we think is important and then someone on the visual design team sort of takes a stab at sort of trying to figure out what looked like to present that information or how does that sort of work well I can answer this usually like when we presented new features or a new projects that we're working on usually it doesn't come out of the blue like we as a team we are aware of what's in a roadmap and we were all align and we know what we were going to build a starts with a just a brief. What exactly are we trying to do? A why how does has at fit in our own you know our whole product roadmap and strategy but then we try especially in the beginning to try to be a bit free with what what we WANNA do. We don't WanNA impose too many. you know limitations in the beginning of the we'll get there because eventually when a ship writer there's some freedom to also go back and forth and also challenge a little bit some of the some of the brief as well but like I said we at the end of that we need to ship so eventually we close is that just try to fix the problem or whatever ship design the feature in this right at the beginning. We have a kickoff with everyone involved so that will be the design team in the front end team in the back in team in someone from support always so there's everyone is aware everyone has a voice voice in especially in the beginning of the project was talking about a collaborative process Khanna. Yeah it makes a lot of sense so so I guess like digging into sort of the the actual workflow and implementation of this thing does when you're building a new feature like this does it get like fully designed in a tool like sigma or sketch or something something before like the I j Sachs's written or whatever for the react components or or does this sort of like gatorade on like intend like Leslie when you started like actually writing the code for this sort of thing like how fleshed out did it feel like the feature was from your perspective yeah so sometimes it differs depending on what the product is for analytics in particular we had pretty solid mocks before we started to get too deep into implementation and a reason for that was that we sort of had to prioritize ties what it was we needed in the U I in order to be able to choose some of the technical decisions that we were making rate so with analytics we needed some sort of charting library. we could have written things ourselves we could have done it all on SDG. We talked about d three right. There are all these options can technically to how we wanted to go about implementing we also had deadline and we wanted to get this into people's hands more quickly we wanted as many engineers on the team as possible to be able to contribute to the feature Matt means people who made not have deep Sag Knowledge even though everyone on our team is very very smart you know all of those things kind of went into this particular feature so it made sense to sort of have that you I design kneel down a little bit more before making those decisions once I had a those designs I spent some time prototyping a couple of different versions with different charting libraries to sort of figure out what was going to work but us four sign cool so I think that's actually an interesting point something that I I wondered a lot about teams like the team had natalie by as someone who works on personal projects and open source and stuff you see like there's all these great libraries for solving all these different problems but most of the time these libraries come with a lot of like baked in sort of U.