How to handoff your designs to Engineering

hey friend if you clicked on this video then i assume you care a lot about your relationship with engineers so ice work you're one of the good ones but really i've had a lot of requests to do a bit of a deep dive into what my hand-off process is like from completing the designs up to handing them off to engineering so i'm gonna show you some of my latest work and how i actually ended up handing it off to my engineers so let's jump on into figma so here is my figma file with my handoff page and you can see there's a lot of designs here this was for a really big project that i worked on for about six months but before i kind of go deep into that let's talk for a second about why the handoff process is an important step within the design process now of course you could just finish your designs and send a link or exports to your engineers but often this is not going to be quite enough information for them to actually implement it there are several things that engineers need more details on such as flows states like how do you get from this screen to this screen what's all the different interaction patterns what are all the components that are being used what is all the different states that are being used and what kind of triggers those different states or different versions of those components and sometimes we might also have to export certain assets for them so there's a lot that goes into actually documenting and communicating how the design works and all of that is kind of done during the last step in the design process which is the handoff all right now let's go deep into this so this project has kind of been broken up into different work streams so for example we had a whole work stream here on campaign creation we had a work stream on restaurant manager information architecture etc etc and the two extremes i'm gonna sort of use to walk through hand off with you today is onboarding and education which is a work stream that i worked on for this project as well as campaign management so these are just two work streams that made up the broader whole bigger picture of this project so as you can see each work stream kind of has their own section and let's dive into onboarding and education first so i've got a big title here to kind of indicate to the engineers what the work below is in relation to and then i've got three sections within this so i have user flows core and specs now in this particular work stream there wasn't really actual flows but there were three different um i guess surfaces where onboarding and education was going to be present so that's like the rm dash marketing page and then within campaign creation now within this work stream i have a big title here at the top so that it's easy for the engineers to see what the work below is in relation to and then i kind of have three sections within this so let's start with uh user flows you can see here that i have a status at the top to indicate that it's complete uh while it's in progress this will say in progress or if it's blocked or maybe descoped then i'll update the status to reflect that and i do have a whole figma template available in another video that i made all about how i kind of set up and lay out my files so you can get a template that kind of has this built in that you can use for your own projects i also include here links to any uh like relevant documents related to this actual work stream so in this case we always have like a copy doc so all of the content and copy is in a google doc that's accessible from here and then sort of you know extra things like notes from design reviews research a like final presentation things like that so i want to focus specifically on this screen so in this case uh we were kind of showcasing here that we were adding a few new things to this screen surface so in this case we were adding a new education banner which is this yellow banner at the top we're also adding a new label which is this green label and then like a little bit of i guess information about how these things work on the screen so this is kind of where our engineers can see the final screen and then they can get into a little bit of detail over here in the core and specs section so core is really where we take like key elements on a screen and talk a little bit about what those elements or components or blocks actually are so in this case one of the key elements is this banner which was completely new and so i've kind of made like a little key indicator here where they can see okay banner number one and over here there's a little bit of detail about the actual banner so we give it a name and then we also leave the engineers some notes about how the spanner should actually interact or like what its purpose is on the screen for this case there is like a bit of animation sometimes i might mock this up as a prototype so that the engineers can actually see how this banner might animate in this case i i didn't do that we talked a lot and we had a lot of like in-person revs on this so it was pretty clear to them how this needed to animate but if i had the time and if it felt necessary then i might actually turn this little animating banner into a prototype just so that the engineers can see how it would actually look and feel and that's kind of repeated across the screen so just indicating like core new elements on the surface and talking a little bit about what these elements are and like notes for these particular elements then over on the specs we're getting a little bit more in depth on how these new elements are actually designed so we go a little bit into the visual design so for example this education banner at the top i'm indicating to the engineers the spacing between different elements in here i'm also indicating the colors that should be used the text styles any components like this button for example so getting kind of really nitty gritty here on how the actual specs of this element should be now we do have a whole design system so here this is kind of like a code for the component that i'm actually using from the design system uh and so that kind of the engineers can sort of like take these labels i suppose and then kind of match it back to the component library that they're using so that's like a quick look at how i might hand off something that's not necessarily an end-to-end new flow maybe we're just focusing on adding a few new components or a few new elements to an existing screen or an existing surface so that's when i kind of use like the structure of having core and kind of talking about what the new elements are on that screen but let's now move on to campaign management which is more of a flow that i had to hand off to engineers so getting a little bit more into the interaction patterns and how the user should go through this journey of actually in this case managing their campaign so similar i've got the title i've got like the status and then links to any relevant docs for this work stream and then here we have the flows if i zoom out for a second here you'll be able to see just how many flows there are in this work stream so the way that i've kind of laid this out is like first beginning with like how do you actually get to this um screen like how do you get to campaign management followed by different flows so for example being able to pause a campaign resume a campaign and edit a campaign here we have the actual like campaign management flow of like how do you get to the screen and in this case we were working on uh like a new ads manager product so after a restaurant had created their campaign they would then get taken here to the campaign management screen and i'm kind of indicating here to the engineers what like is the key action that's kind of happening on each of these pages so in this case there's like a toast to let you know your campaign was created and then i'm using these arrows as well to kind of signify the movement so from here the toast then disappears for example um here you know you're coming from the submit button so kind of using the arrows to indicate where the user came from and where they should be going to now there's a few different states here as well so in this case maybe if their campaign was scheduled there's a different status for this particular state and then i also of course always add the empty state that's always important to have so if they didn't have an ad campaign and they somehow got to the screen what would it look like so then the other two key flows here are pausing and resuming a campaign so i'll just go through one of these because i think what's really important for you to see is how i lay these flows out and then you can just apply that to any other flows or scenarios that you have in your design so let's go through pausing in this case they have an active ad campaign and let's say the restaurant wants to pause it well here i'm indicating that they can click on the actions button which will open a drop down and then they can select pause in this case i'm actually showing the like hover state of the pause button in the drop down and that will bring up a modal from the modal if they decide to pause it then they will get back to the screen there is a toast it indicates the status is now paused and that toast will disappear after a few seconds and then they just have the campaign management screen with a poor status of their campaign so i kind of repeat that for all of the different flows here's like an example of maybe where um you know they're clicking on a button going to another screen somewhere else so just kind of highlighting and showing how all the different screens are connected and then also pulling out any particular edge cases i suppose so you know when a user clicks next and weekly ad spin is close to new budget like the detail of this doesn't matter but just kind of indicating like when this thing happens um it should show this like message for example so there's a few different states of those depending on the scenario and the situation uh which like the restaurant was in at the time so that's how i kind of lay out all of the screens i really laid them out in a sort of user flow format so that it's really easy for the engineers to see where the user like is and where they're going and how they get there and kind of breaking it out almost into user stories um so that it's just really clear for the engineers to get the full picture of how this whole experience works then in addition to this i go into detail on specs and states so here i'm kind of highlighting the core components that are being used in this experience so in this case we have the table which you saw earlier and very similar i'm indicating all the spacing the height of things uh indicating the components that are being used etc etc and then in this case because we have quite a complex or comprehensive design system i'm also occasionally linking to the actual component that i want the engineers to use this is actually completely public our base web design system you can actually go to this link base web.design and see it for yourself and so in this case i've linked directly to the table which has all of the like engineering documentation that the engineers need and so that just kind of helps them connect the dots uh if they need more info about the component that i'm using so kind of going through like in this case like this is a custom component that doesn't exist so i'm kind of spelling it out in cases like the table which is an existing component i don't need to tell the engineers the text style of these headings for example because it's already designed to already exist as a component within our component library so going through the different components being used like here's the drop down the engineers can find it by looking for this indicating the name of the icons that i'm using and then also just calling out any like really important things so in this case i didn't want pause to have chevron because it doesn't open up another experience it opens up the model on top so just kind of indicating that it wouldn't actually take you anywhere else so just highlighting really key important things that the engineer should keep in mind and then lastly is states so for example i'm using the drop down component and i wanted to kind of show the different states of how these different options in the drop-down should interact so in this case if you're hovering over it it should look like this and if you've pressed it so like you're clicking it it should look like this and you can see i'm not spelling this out for each of these different options like i'm not repeating this for edit and activity in this case like it's kind of clear that it should apply to all of the elements on the list and this technically is predefined within the component itself so i don't technically need to spell it out but i just like to be really really clear to the engineers so that there is no margin for error there i suppose and that's pretty much it like that is repeated again across all of the other sections within this file we get really kind of nitty-gritty into you know anything that's kind of like a custom container component or like needs a bit of extra documentation will kind of make sure that that's specified for the engineers otherwise we just share them a link to this page and they can come in here and ask us any questions and then begins like the implementation and qa process and that's how i hand off my files and this has been an iterative process so i find that with each new project i make small improvements or i've learned things that like didn't go as well last time in a previous project and so this is a constantly evolving process past like handoffs that i've done have looked very very different and i haven't like specified all of the states or like all of the specs as detailed as this so it's definitely an iterative process and i find that it can also change a little bit with the engineer that i'm working with and how like you know into the design they are or whether they're able to kind of pick things up quickly and like match it quickly to the design component library um kind of depends on the engineer that i'm working with as well how detailed i will actually go into this hope that was really helpful if you want to chat more about this topic and you're really excited about handing off to your engineers then you can always book time with me on superpeer for a 30 minute call and i'd love to get like nerdy into this topic with you um and learn also about your process and maybe how i can help you refine thanks as always friend for watching and i'll see you in another video [Music] bye

Channel: femke.design

Views: 58,241

Keywords: design, product design, ux design, research, user research, ux research, women in tech, women in design, designer, graphic design, design education, tech, uber, uber design

Id: PK8dLpwSqbw

Length: 14min 29sec (869 seconds)

Published: Tue Jul 21 2020