Placeholder Image

字幕列表 影片播放

  • Hi.

  • 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.

  • And finally, if it's successful, you get a preview.

  • And if it's not, you go back to the initial uploads page with a narrow message.

  • This is an example of how the designer can show you how the layout behave on the smaller and wider screens, and really, a designer can provide all these.

  • But it's essential that developers our own building on this and really understand how to use study guides or layout etcetera s.

  • Otherwise, you'll just keep asking questions to the designer or just not follow the rules, and Andy Up will not look like what the designer intended so to summarize for product definition, it's essential that the designer has re elected and can't work on the different each cases and fill that developers can provide technical insights and for market creation and development.

  • It's essential that designers and developers speak the same language, and you can define that contract with the starting gate.

  • And if you don't know that and congratulations, you're you're reaching the level to your being official.

  • Already, you've, um, you've got rid of most of the friction points, so it's quite an achievement when you're there and things get well, happier so you could just stop there.

  • But sometimes projects are more demanding and you need to level up your game.

  • So let's see how you can go from a level to project where everything runs pretty small city to on do better.

  • This is actually a project that Ewing and I worked together on Andi.

  • We're working for a product honor who was one very peaky about the user experience, and he was right.

  • He was a market leader.

  • He couldn't afford to have bad user experience on his tool, and the tool was a technical tool was for de militarised, and in this tool they're worth a very lengthy the communication.

  • As you can imagine, on DSO I wanted that when your scroll down the commendation, you can see the anchor in the navigation on the left updates so that you always know where you're at on, and you can easily come back to a point that you've missed previously on golf course.

  • The product under was completely on board with this idea, except the dealing tells me, Well, I'm sorry, but it's too complex and we cannot fit it in the road map right now.

  • So product honors is pretty disappointed, but he understands and he goes along with it.

  • And I tried very hard not to cry Onda.

  • As I said, the product honor was very picky, so he would always make us change tiny things here and there in the interface.

  • Um, if things were too small, not quite right with Fixit, spacing was not right with fix it.

  • Um, a lineman was not right with fixit.

  • Colors were not right.

  • I'd find a new color, and then we implemented.

  • And as you can see, we were a team that was very, uh we would be pretty fast in answering and we were very efficient working together.

  • But there was still some friction points and we could do better.

  • So how can we?

  • The better.

  • The first thing you'll notice is that some cool features got shut down because of complexity.

  • Um, and this actually is happened because I didn't involve you Ling beforehand before going to the product honor and giving my suggestions.

  • What I should have done is sitting with her say OK, I want to do this.

  • I think it would be a great addition to the product, whether you think, can we do this?

  • And this way we could have fun, smart solution together instead off then going to the product under than going to her than having to shut down and making everyone very disappointed and wasting everyone's time.

  • Actually, I want to give you an example on another product of where this happened and was very efficient.

  • There was this pricing range, uh, that's cold cider Andi and them.

  • So when the development started, they realized that when it's very together, you cannot read the prices at laws on DSO.

  • The river came to me and said Okay, What do we do now?

  • And I said, Oh, but I actually wanted it to look like that.

  • And he looked at me and he said, OK, so we have this pretty long form and you want me to spend however long on this?

  • I mean, can't you find something that's easier to do?

  • And so it took two minutes, literally, on my desk, and we just said, Okay, what's important?

  • Important part is not too.

  • At that point when the Two Rangers are very close, it's not to have both numbers visible.

  • Users are probably going to slide.

  • So if one of the numbers is legible, it should probably be enough at this for the first for the empty.

  • And so we added a white background behind the first number so that you would always be eligible.

  • So in retrospect, this was probably not the best solution design or your ex wives.

  • But the message here is that we spent two minutes together and we found the solution that we were both happy with.

  • And that's what I really want to emphasize.

  • Um, the second thing is that there were lots of back in force in order to improve and polish the up on those where every time they would wouldn't much, but they would accumulate and become small delays on DSO.

  • What we ended up doing at the end of the project was every week you and I would just sit down and go through all over the APP for one hour, and we together we would find the little inconsistencies that the things that need to be improved and polished it up together.

  • So we were basically per program and this worked well, but also something that works very well.

  • If is if designers and developers sure common design patrons.

  • So by that what I mean basically speak the same language with beyond speaking the same language.

  • Understand that, but the logic off each other, each other's logic.

  • For example, if I have a team that understands some basics of your ex, if I tell them I want the designs to be keyboard aware, then they will know that whenever a ship we talk about a form, the buttons needs to be pushed up by the keyboard whenever someone is going to type, and I don't do not have to redesign every time.

  • The state where the weapons are below, and then the buttons are per step because we understand each other or on the other.

  • On the other hand, if I have basis off understanding off a shame, l I know that well.

  • If, for example, in this example thing a table with two columns, I know that there's going to be a minimum space that I want to leave.

  • Between two columns.

  • I can show it to the designer through the design handoff tool by putting the max with off the Dome of the Diva.

  • Actually on DSO that it's thinking, inspected the African inspected and doesn't need to come to me and say OK, so when it's long, actually the text leaves rap, but I don't know where, so this way it's much easier and much more efficient.

  • So this would be our advice.

  • You go from level two to level three.

  • Make sure to involve designers, developers in the mo cap design process and find smart solutions together.

  • Whenever you find small, small problems, make sure you understand and share the same design patrons so that you do not always need to be asking questions on DDE have moments where you sit down together and improve the up together as a team because that's your common goal.

  • Issue produced the best product for your users.

  • And if you do that, then you're amazing and welcome to level three.

  • So now that you understand the old about the different levels of debut ex collaboration, how can you actually sparked this new culture with in your team's well, first thing off?

  • Just define where you're standing now and where you want to go.

  • If you have very silly old situation.

  • If you just don't get along, just sticks.

  • Stick to the basics.

  • Um, if you have lots of delays, lots of back and forth, a focus on efficiency and finally, if you have high U Ex expectations or if you just wanna have fun than aimed for the singers, is so basically this summarized at the different levels of the phrase WX collaboration that you can reach.

  • But the most important message that we have for you is that Dave you wakes is all about the mindset, so you need to think as a team and act like a team player.

  • When is the last time that you had lunch or had a beer with the whole team with your designers.

  • Andan just chat because those tin building moments are essential to build empathy and understand each others problems and motivations.

  • Um, so marked, for instance, my message to the developers here in this room is really that designers cannot guess what you need to work properly, so don't hesitate to ask them.

  • And, um, well, do not hesitate to call the designer with her whenever you have a design question, because they will save your time.

  • They used to solving those issues.

  • Second thing to keep in mind is that details are here for a reason, so you can rely on something like a style guide or the design system to know the truth of what the APP is going to look like.

  • So whenever you have a doubt on colors on fountain sizes, just refer to that and pay attention because the designer has, like, take taken the effort.

  • Thio will provide you the information so really use it.

  • And finally, if you wantto make your drop more interesting, show that you care about the product s O, that the product owner and the designer will involve you when they're making decisions on the other side.

  • What?

  • The mindset I'd like to share.

  • The mindset I'd like to share with designers is first a hole that mo cups are not demonstrative material.

  • So you will need to provide extra steps for the developers to work.

  • And so as I'm watching what they need, um, another thing that I've learned is that the rivers are amazing at finding errors and etch cases.

  • And so it's so much easier when I evolved them early on on the design process so they can tell me Well, this what What is gonna happen when this error happens?

  • And I'm like, Oh, are we gonna have this error?

  • Yes, Believe me, this is my experience.

  • Of course we're gonna have it.

  • So it's It's so much easier when they're in the room with me to discuss those points.

  • But beyond that, um, it's beyond the smaller company in each case is, um, we often get frustrated when we come up with a nice design and wanted to be implemented and tell us Well, no, sorry, it's too complex.

  • But actually, what I've learnt is also very frustrating for the developer to not be able to do it because they do care about the product that I wanted to be the best possible.

  • Soto avoid everyone's frustration.

  • Just involved a developer older type during your process, because that's how you're gonna come up with better features to in order to share the debut.

  • X A spirit around us.

  • Um, feeling.

  • And I have bean doing this monthly.

  • WX drinks with people around us.

  • It's ah, they're very dangerous just to chill and talk about what we're watching them that leagues.

  • What re excited The box in the next Tools that are coming out, for example, recently assured a lot about Sketch 50 58 which I think is going to change a lot of things on the design side off the project.

  • And it's great because you can discuss never informal way about your problems about what?

  • How you feel as, ah, a person in a team that might be working well or might not, for example, for instance, what I learned recently?

  • No, actually, I don't during the first of those drinks is that, actually, even though there's friction sometimes between developers and designers, developers are always so much happier when they worked with designers because in the n At the end of the day, they're just brother of the product that they're making.

  • And that was meant so much to me.

  • Yeah, I I really like those drinks through I mean Warren.

  • And she's like, What's more to to ask for more?

  • Seriously like, um, there's something that I learned and that was surprising to me.

  • And actually, I felt really very relieved to learn that is, that designers are happy to work with developers because they help them make their, um, more make them more thorough with their work.

  • And that's really for me, because before that I only thought I was being annoying with all those requests and questions.

  • So I think that's our message here.

  • Um, if you wantto if you're interested in color like improving your collaboration, we've set up a website.

  • Deb, you extort tech with the manifest of debut ex collaborations.

  • Who you Congar there find the tools that we use?

  • Andi, if you wantto like chat with us, we've set up a slacker also.

  • Ah, that you conjoined with this name and um, yeah, I think that's that's it.

  • Don't hesitate to come and see us afterwards.

  • Air at the booth.

  • Thank you so much.

  • Thank you so much.

Hi.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

A2 初級

更快地構建更好的產品,鄭玉玲和王芳芳|CSSConf Bp 2019 (Building Better Products Faster by Yu Ling Cheng & France Wang | CSSConf Bp 2019)

  • 3 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字