So I'm doing I'm a developer.

Hi, I'm from someone.

Designer.

By the way, How many designers do we have today?

Nothing out, but as expected as, ah, mostly tech conference.

But how many developers work with designers?

So lots of us today and the what?

We're very excited to be here today and sparked a devil.

Its culture.

So what's w X?

It's basically, well, the idea of spreading the love between designers and developers.

Finally, so just a bit about myself.

So I'm abilities developer at theater.

It's a service company, and what I do is help my clowns build new products.

So this whole story about Debbie wait started actually with the project.

So a year girl almost on this project and I have to build a chat service in six months.

So the product salts and the designer sends me all the markups.

And actually, I get stuck at the first feature because I have to display this chap a bow.

But I don't have to.

I can.

So I asked the designer for the Eiken and he sends me this.

Actually, I cannot work with this blue background, So I asked for the icon on me and then we were working on the remote.

So the designer is not there And I have to wait for the icon and I just cannot just go there and Bo came and say, Yeah, give me the icon, Please give me the gun.

So I wait and I guess and get this nice PNG But then I realize, hey, colors should be customizable.

And actually, I cannot do that with a PNG.

I really would like an SPG format to our explanation deform arts and I wait fortified to come.

So finally, after all those back and forth about the stupid icon, it basically I wasted half a day on this.

Well, I finally get to finish my feature, so you must hear the frustration in my votes when I tell this story.

But at that time, I had much more things to worry about.

I have to front end's to back ends to manage.

I had a team to train, so, really, when it comes to market integrations, I didn't want it to come that way and be so painful.

So then I took a step back and then I remember that well, I had a friend false, who is actually an experiment to designer, and I wondered how she was working.

So I reach out to her and asked for my help in her insights.

So when she called me was actually pretty funny because I was suffering on my own project.

Um, back then I was working at a sister company of Theodore, and so I was working with a client.

A very simple up.

It was a mobile application with a very classic sign up and looking.

So, um, I gave the designed for the sign up form to the developers who start working on this.

And then the asked me for the Logan form and I go, Why do you need it?

Because they're actually the same design with different warnings, but they insisted, So I ended up providing it to them.

But I was very frustrated because if you look at those designs, I beside they're the same structure.

They're basically the same thing, and it's just it felt like they didn't try to understand the product as a whole, and which is designing the pages as they came.

And I was actually, um, I had other things to do.

I had a product honor who didn't want to do usability testing.

So I was trying very hard to convince him that that was very important to do and a very short time line to design the rest of the features of the APP.

So, um, I'm having to copy paste the same design and then changing the wording.

Was that the last thing I wanted to do?

So having heard each side of the story, we realized that by understanding understanding each other more, we would actually enjoy working together.

And that's how we started this hold every week thing.

And so we've experimented on new projects.

We've worked with other teams and we were able to map out full levels of debut ex collaborations.

So I'm gonna work through them grounds, ear of justness, dysfunction.

Then you can move it to a level one.

The basics, then level two f agency.

And finally, the Holy Grail symbolizes.

So what we're going to do is walk you through different projects at different stages of collaboration to Regis traitor points and before that, just a summarized of the context.

So the usual team composition of the project would be the product team, with designers and developers working hand in hand with the product honor that sets the product vision and the road map around this team.

We have stakeholders such as to see you of someone for marketing someone from another product, team or even legal that's gonna tell you, Yeah, I need Diesel that So for the first story, by the way, all stories are true.

For the first time, we ever gonna take your food tech ABT that my company worked on a couple of years back.

I didn't work on the project that we're actually working with a freelance designer who had a very limited time on the project.

But I did follow the project very closely.

Um, and so it started like this designer hot time in advanced to ship all of the design for the product.

So he provides that to the team, and the product owner is very happy because that's exactly what she wanted.

So the team happily starts, and actually, one week later, the CEO sees the up, and he's very unhappy with the way he says.

That's certainly not what he wanted for the app, and actually, that puts a stop to everything.

The team has to start over on the design and the developments in has no choice but to only work on the back and for a while.

And it took literally three weeks and 17 attempts to find a U IE design that actually worked for both appeal and the, um, and issue.

And, um from then, development can start again.

But that's when the designer had to leave because he only had that much time on the project on That's Ah, In theory, all the designs are great, great.

But of course, there were things that were missing.

There were behaviors that were not clear.

And so the developers, they have no one to turn to accept the product owner.

So the ask for for advice and she goes, Well, I'm not a desire, so I really don't know.

So they do what they can, and then we call this best effort, which means they try to do something that not too ugly and can the words and let's hope nothing breaks.

And so, yeah, so let's go back and see what one wrong.

So first thing, the CEO made the whole team start over on dhe This happens when the process for product definition is not clear.

So this happens mostly with Marcus being late, too many people being involved in the decision process.

There's other problems that cannot happen to, um like, for example, the vision of the product is not able to find.

So it is very important at this very basic level to clarify what each team member has to do, what the responsibility is and to defend key moments where they can synchronize with each other.

So very simple, very basic process would be the product honor is, um, the one who is in charge of the part of vision.

So he writes it on the specifications and the description of the tax description.

He has dedicated a moment with the designer so that he can pass on that vision so that the designer can make the mock ups.

And there's a separate moment for developers to ultra.

Gator did find this technical strategy to implement all this so off course, this is a very simple way of doing its, But don't be afraid off adopting this to your context.

For example, if you know that your product under once our likes to have user inputs before he decides off needs.

Bring him into your user research.

Um, if you know that developers can be very picky about certain things in the design, invite them to the U Ex workshop so they can together you can find solutions for the upcoming features and Sadr etcetera.

And it might look a bit scary like this because it looks like they're all those big meetings, but they don't have to be big meetings.

You can do this as synchronously over slack or on any tool that you use.

You can do that over a coffee break five minutes.

The important thing is just to update every member off the team product design product on our, uh, altogether on what is the new direction for the product.

So was the second issue.

The second issue is that, um, actually the there were missing assets, and that happens a lot when designers do the job ship the designs and they're just leave.

And the thing that don't they don't realize is that mock ups are not, uh, development reading material.

So whether really encourage people to do is to have a meeting developers and designers together to define what needs to be delivered alongside the mock ups on dhe to centralize those.

The assets and everything in the design have handled.

So first you could just, for example, I could just be a simple check this off.

Every single needs to be done, maybe static content.

Maybe it's images work, and I found those images etcetera.

Ah, very useful tool is to use a design handoff to because they centralized everything you can don't know the assets, but you also can see how the screen was built so that you see the margins, the font size of fun colors.

You can even export some cold when depending on the product.

Um, and you're my person.

Per favorite is, um, is a plane, but there's a lot of tools on the market, so we could talk about this later if you want.

And the third thing is that because the designer had left, the developers were left on their own to figure out some behaviors and solutions.

And this this is again this because the designer had to leave before the end of the project.

What really in create you to do is to find a way to keep the designer working in parallel of the developers.

For instance, I always managed to during a certain Sprint healthy developers with the curve in future.

They're working on because since I work on the future before him, I can help them with certain issues and certain things that hadn't seen a front.

Um, but I can also test the previous feature so they can learn from them and, um, avoid some mistakes in the future.

And I can start thinking about the upcoming features.

And if the road maps of designers and the Clippers are well synchronized, that it's completely possible to do this.

So he fell on to summarize, If you cut the design and development process in three phases, product definition definition, woke up delivery and development, uh, the product definition face for to go to the basic level of collaboration, you need to have a will defend process on the mark of delivery.

It's it's important to centralize everything so that the Ripper's know where to find the information and the assets, and on the development side, work together.

We're next to each other, so it's easier to communicate and, um, not have moments where you just don't know what to do and having no one to answer to your questions.

If you do all this, then you got to live a one.

So welcome, you got the basics.

So what happens now with a Level one project to the team here is working on the travel agency tool.

And what they're trying to do is display an itinerary on the map.

This is the design Ah, that the designer suggests, and the team implements it.

But actually, when it goes live, the itinerary do not look very user friendly.

And, uh, that happens on most itineraries.

So the team has to roll back the future, and the designer has to work again on the new design designed with numbers for each place.

I mean numbers for each day and the places that the traveler is gonna visit The thing is the designer and did not, um, think of the case where itin your is Luke.

So developers get stuck when first a day 12 happened at the same place as Day five, and they need to figure out something to display that information.

And in the first, the designer decides to use a tool T to display that information.

And then the developer finished the development a the implement, the tool tip and, well, they decided to improvise under hover and active states of that cruelty because they really were eager to finish that feature.

And actually, I don't think the designer really liked it, but he went with it because they wanted to bring value to the users as fast as possible.

Thio What are the new challenges down the rows here?

Well, first off, the designer did not use a real data to build their markups sued.

They were not a really working on real use gays.

And they did miss which cases, so to provide a proven that it's essential that designers work with weird data when it comes to like, um, well having complex situations.

And developers can provide those data, and they can also provide technical insights during the market creation.

So, for instance, this is a tool that France uses on schedule.

It's called Craft, and what she can do is basically use an A p I to get some data and use this data to populate a list.

Um, so getting an image getting your title and it's really powerful when you need to populates for, say, a table.

Our analysts, because we all know there are many each cases, and it's good to work with real data.

The second thing that was missing was really a list of this state's, and each case is on components, and sometimes what can also makes it was in when it comes to responsive, you don't know how at the screen behaves and the layout behaves so really important to have a style guide that sum of all the states and behaviors off components and also defined the breakdowns for your responsive behavior.

So we've mentioned Ah, I mean, it was mentioned in the previous dogs, um, to have, like a common language between designers and developers.

And that's why I really like the study guide.

It's really a U IE contract between the two on.

Do you know what colors should be used on the APP?

You know what fun size, what fund you should use.

You know, the convention around margins and spacings.

That should always be multiple of some values, you know, like how the buttons should behave.

You've got all the states and and you've got the form, uh, different valuations of forms, errors, states, et cetera.

Two.

I don't know if you have this on your project.

If you don't really try to get this as soon as possible, because that will help you in your choices and to get a nap consistent.

And also, um, another thing that's helpful is use a flu.

What I like when I work on a complex future is really to understand how you go from one spring to another.

So here we have video uploading work flow.

So first you start with the applauding page.

Then you move to your processing page.