UX First development with Servoy – Jean Silva, Jan Aleman
Jean Silva and Jan Aleman from Playbookify talk about using UX-First development principles with Servoy
Playbookify Features
- Playbookify is an application for storing, sharing, and executing knowledge within companies.
- It offers features like creating playbooks, assigning tasks, setting deadlines, and collecting data.
- The application supports role management, multi-tenancy, and multiple workspaces.
- It includes policies and checklists for compliance and recurring tasks.
Development Process
- The development process follows a UX-first approach, prioritizing user experience and saving development time.
- The product owner creates ideas and XD concepts with the UX Pro, leading to user stories for the development team.
- After the story is well-defined, developers build the app, followed by code review, testing, and user acceptance testing.
- Adobe XD is a tool designers use to create prototypes without coding. Developers then take the XD designs and convert them into a Servoy app using code.
Design and Implementation
- The speaker demonstrates how to convert an Adobe XD design into a Servoy app by creating style classes, applying CSS rules, and reusing code for similar components.
- They also discuss the benefits of reusing CSS code from design tools like Adobe XD and Figma.
- The speaker suggests using variants to prepopulate classes for easy drag-and-drop functionality.
- They mention the importance of maintaining consistency in component design across the application.
User Involvement and Design Considerations
- Involving end-users in the design process by using tools like Figma or XD can be beneficial before building code.
- Having a style guide is important for maintaining consistency in designs.
- Designers sometimes come up with designs that are difficult to implement due to technical limitations or the need for custom components.
- Balancing design and technical feasibility is crucial, and sometimes designs may need to be reconsidered or modified to fit within resource constraints.
- Prioritizing based on development time and cost is essential, especially for software startups with limited resources.
- Poker sessions are used to estimate the time and effort required for different design elements and help make informed decisions about which features to prioritize.
Alright, so Shawn is going to actually do most of the work today because I’m only going to do a very brief introduction. Then John was the lead programmer at Webukify. We’ll actually show you how this is done. But our focus today is on how to create UX first applications. John is only going to build one screen because otherwise it’s going to be like the rest of the day in the session. So just for demo purpose, you’ll build one screen so you get an idea on what the flow is from going all the way from design first and then our development flow into the application. But kind of to give you guys an idea on what the end result is. I wanted to start with a demo of the end result also because I love to do demos. Alright, so my Webukify is an application we built in, started in NG two years ago. So then thing came out and on the tour, Sir Roy Wild on tour in Santa Monica, they convinced me to switch and they said, is it ready for production? And they said, yeah, it’s ready for production. Yeah, yeah. And I should have known because I worked for this company for 16 years. But no, we jumped all in and started moving to thing. But eventually we made it. Yeah, we suffered how many bucks, how many tickets, 20? I don’t know. I can count more than 20. Only 20. Only 20. That was not bad. I remember the days of Webwind. But did you say how do you every hour restart on the first version? Every half hour or restart? We didn’t have that. But then we have a desk server and how do you never use a desk server because he doesn’t believe in testing. Because if you write proper code, why should you test it anyway? Yeah, you should just write proper code. All right. Yeah, so simply a bookify is an app to store, share and execute knowledge within companies. And oh, by the way, we are looking for resellers, wants to resell their application. Everybody. Fine. So it’s essentially a wiki per the interval charged. Because the problem with a wiki is it’s not actionable. Right, a wiki, let’s say you have a repeating process. Maybe let’s say cleaning a hotel room is a repeating process. You want that process to always be done the same way. Maybe you want to add an interactive video to the process. But you also want when your people are using it to store and collect some data, which in a wiki is not possible. That’s why we came up with a concept of playbooks. And let me show you how that looks like. So we still also have support for wiki. So if you really want to make some static pages as well, that’s fine. You can do all of that just like in any wiki. But then the really powerful thing of this software is playbooks. So let’s say you’re working in a hotel and this is I have kind of configured this as a hotel. And then Hario goes to the front desk and he goes, I have a complaint. Then maybe as a front desk, maybe you got trained or maybe you know this very well. But most people are this quite a flow of people within hotels. They may not remember how to do a complaint. So what you would then do is open this is playbook and you could just read it for reference. But you could also say, I’m now going to actually run this playbook. So you’d hit run and then you would say, let’s put in the name of the guest Hario. Hario is a complaint. And then you can assign this playbook to somebody else. So let’s say you’re a manager, you want to assign it to them. Or you can do that as well. You can also add a deadline if it’s maybe releasing a new product version playbook. Then you could add a deadline to it. Then you would start a run. Now if you’re running a playbook, it will show up here that you’re running. Now you can still read all the, you know, how to handle this complaint. You can watch a movie about how to do this. And then the next step would be to lock the complaint. So you can have multiple steps in your playbook. And it will tell you here all the stuff you have to do. And then so what you want typically in a process like this, you want employees to actually go in here and say, yes, I’d listen carefully to Hario. And I express my empathy, which is very unusual for Dutch hotel people. That’s why we put it in there. So they are reminded that we have to show some empathy for our guests. And then maybe confirm the contacts, lock the complaint, and then thank the customer for bringing the, and then you can put in here the actual complaint. The same system, right? You don’t have to go now. This is a problem with, with Wikis. If you store all your knowledge in a wiki, now you can’t collect data. And often, well, you’re running this process. You want to collect data. So that’s really what you can do in short with, with the playbooky file. And you can also easily make your own playbook. So let’s say we’re going to say, use auto release, or maybe make a playbook for a new, new release. And this is all using a solution model. Some of you may have seen already, because now here I can add any kind of component. So we really made this very end user centric so that any user who’s new to the system can create a playbook. So you can choose between static components, which is presenting text, videos, images. But you can also have fillable components. So you could put in a checklist. So right, you could begin here with a, with a description. And this is just a rich text component. So you can format it and do all the kind of stuff that you guys have used to. But you can also put in checklists, or maybe a file upload or a date picker, to check various items, right? You could say, test it for bugs. Etcetera. So it’s very easy to interactively build checklists, gather information. Or really anything that you would create, create an SOP or a playbook for. There are other things in there. What the software also does is that you can divide your company into roles. And then you can assign playbooks and wikis to roles. So there’s a bunch of role management in it. This uses server security as the basis. It is multi tenant. So you can have multiple tenants going on. You can even have multiple workspaces. Right? So we’ve, we’re now just working in one workspace, but maybe one, one workspace that you share with a customer. Because because of the multi tenancy nature of this, you could have playbooks. Let’s say a customer onboarding playbook that you run together with your end customer. That way you could say the end customer I need you to upload a logo as a next step. And then you can upload a file in it. There’s also policies where you can have, let’s say your ISR compliant. Or you, if you work with one, then you want to create a handbook. No swearing while working and have him sign off. So you can have employee sign off to certain policies. And there’s also checklists for something that’s really simple. And you maybe don’t want to create a whole playbook. Just create a checklist. In particular recurring checklists are very well suited. So that’s in brief of the application is now let’s go back to the presentation, where John is going to build and show our process of designing with the UX for a step branch. So without further ado, John. Okay, thank you. Just… What about what is so quiet today? What is that? Yeah, as you may know me, my name is John Zupa. I’m a lead developer at Playbookify. What could we turn to the Playbookify? We took together with the developer team, the development team. So you’re going to guide you guys here. Yeah, you already don’t demo. So the Y and Hall and I’ll build a little screen with you guys. And then we can pass the questions. So yeah, a little bit of the Y. First first first let that makes the customer happy. Just, it tells us how the user has got to experience me. How it’s going to be expensive. The user in non-systems. This is a really good, really important thing when you are building software that you have to think. Which is well, the user is going to be working all day, probably all day in the system. So yeah, it’s really important. And it also saves a little bit of time development time. Because you don’t want to use the user to be complaining. You’re being back and forth with those requests. So we don’t start development until the entire UX and UI is done, tested and ready. And the story is written and the story is planned. And that sounds like a lot of upfront work. But it saves a lot of development time. Because you don’t run into funny things when you’re developing or user-changing their mind. Because we don’t start until the UI is done. Yes, so we start with the creation of our backlog. So we have our product owner, Yoyan. He comes up with the ideas and then he creates those XD concepts together with Bing. That’s our UX Pro. And we work with those concepts to get to a user story that we can work on with the development team. So, Yoyan is also involved in this process. Sometimes we need help to make this work. And then I also review the story to make sure that we have everything we need to go further with the UI. We go further with the open process. And I also make sure that the architecture is good enough for us to… You start to be otherwise we have to go around and build a little bit more of, well, making tables, etc. To back out this story. So, we also have a planning together with the development team to see how much effort we can put on this. And to estimate how much time this is going to cost. It’s all part of the scope that we are building. Yes, so we use a classic agile scrum approach to big sprints. On a proper sprint, I have to admit they’re not all proper, but on a proper sprint we do the planning. Before the sprint begins, so we poke away the entire development team. And then we know how much work we can probably do the next two weeks. Then we start with the sprint. At the end of the sprint review, we figure out how did it go. We missed things which things went quicker so that everybody can learn from. Now, what is our actual velocity that we can pass the team in building software? So, then after we have this story, well, don’t do to be picked up by the developers. They will be building this. And then that’s code review, just to make sure that everything is going to be a sprint. And then we pass the test in a sentence after the play that’s worth that server. And the public towner, Yoon and Johan, they will test this and see if everything is okay. We also have another guy to test it in the technical aspect and see if everything is okay. It’s functional and go live. And, well, we reached users in that part. Sure, we want to add something. No, this is Chris. I think if anybody has questions to interrupt, feel free to… Yeah, to raise your hand and interrupt. Yeah, so I will start to build a little thing here. So, while we receive within our story, user stories, we have those XD concepts. Then that you can just go around. You can’t execute it. Does anybody use that? Next year, you can click around and see how it works. But, yeah, we can go back. And you can see the code of components. Jump, do you zoom in a little bit? That’s a little smaller. Yeah. All right. So, here you can click around and then you can see the code that is related to the components. And this is what we are going to use to build up our R. And for those sound familiar with Adobe XD, it’s really a tool on which any designer can work easily with how it happened to write any code. Typically, a UI designer works in Adobe XD and then a developer like Sean would then pick out where they left and then move that to the servo. Which is the process he’s going to demonstrate. How do you take an Adobe XD or a Figma design that your UI designer made and then how are you going to take that? And a few steps into a servo app and make it look exactly the same as it’s looking here. Yeah. So first, I’ll just jump into a servo developer. And here already have the instructor because, well, this is just a route structure that I’ve built before. So we can just go to the interesting part. So this is like this right now. It’s pretty raw. And we want to make it like this, right? So I’ll go one by one and then we can build something here. For example, this one already also left the style class, which is not here anymore. Because I did it. But it’s everywhere. We’re going to put everything in. Right. So for this first one, the user profile label. You’re going to go back here. And we’re going to see, right? The code. This is probably a bug. The thing that I’m interested here is the UI properties. Because the layout, well, this is not going to be too much of, it’s not going to be handy for us right now. Well, just get the code here. Yeah, this is so, so. But so what is important here is this part. You have this undefined. You can just skip it. So I have to create a class for this guy. This is a label. I’ll shut the monitor from from side by package. So you can just create a style class. You can first go to the to the last file here. I’ve already had all the structure to help out this title label here. I’ll just paste this code in. That’s all the information. I’ll save it and then I’ll go back here. Get this class. Oh, it’s already. And here is style class. I’ll just paste in the class that I just created. And then there you go. You already have the style applied here. You can see them in the developer. And you can also go back here. And it’s already applied. So we got to go for the next part. I’ll jump for now. This part because it’s I will come back later for this. And I’ll be following out the part of the form. So I’ll go one by one as well. For this guy, it’s about the same. So the same process that we did before. But it’s different. The the why do you have there? The CSS rules. So I’ll just kind of pretty straightforward. I just got to go and grab this. This part here. I can see you on this writing a conversion till the background. So you can imagine you could actually put from Adobe XD. And then you’ll write a tiny converter that would import then in Server Voice. So you don’t have to do any of this copy paste. Yeah, that would be good. We can pay a test to do. You just told me I’ll give it a credit card. So go ahead. So yeah, for the boot level, I also have added the classic year already in advance. So just to get down to some steps. So I’ll apply to every every label. As you can see here in style classic boot label. And I will just save it. I’ll go back to the to the browser. And I’ll see that apply as well here. So for this one, it was just one class that I could reuse. And that’s it. Now I’ll jump to those guys as well and do the same. For this one, I will create this class. Let just grab the code first. I’ll come here. And now we have to have two elements here. So we have to take care of this in two parts. For example, this one, you have this this box is a little bit different. It has some rounded corners. And then you can see the code here in the white property. It’s like I said to you guys. So you’re going to get this. And I’ll just go in here. And create a class called a taxi boot. And then paste the code in. And this is the it’s kind of the the four ones. The shape part of the. Of what we have. When I go back here, I also apply it as well for every single component that I have. So just to reuse it. So it’s already applied. So now the second part, it’s the text style inside of this text point. Which is this one. And you can probably reuse for everyone. Besides the the mail address, but. So here’s the same thing. I’ll go for the white properties and get the code. If you don’t know better than you probably get this, copy all the things that’s also going to work. But because I have a I have a bug here. I’m named style and undefined because the the ones that’s got the translator will go over right the. The others. So, but I’ll just get to get a click. They’re just going to grab the things that really matter. So in here. I’ll park the base thing in the text part. Oops. So I’m going to have a little bit of change now there. Oh, we have a problem here. This probably gives up the point because this font doesn’t have. Yeah. So we use a form that we bought. So I’ll just use this and serve. And then there we go. So the content inside it’s you see that the text is a little bit. It’s it’s it’s it’s weird before because of this. Also the size of the style of the style of the text inside. Also change a little bit the component. So yeah for now just basic stuff right. So I’ll just go to go jumping this for now. I’ll go for the bottom and then we go back to this. For the bottom is it’s just the same thing. It’s about the same. So again, just go here. You have also two parts. You have the shape and you have the the the the text the text is style that you’re having here. You see it’s pretty repetitive. What we are doing now. I created this class called Fm Btn. And then I’ll apply to to all my components. There are buttons in my. In my form as you can see here and it’s already there. So here. Style. So yeah here to take one thing. One thing that you guys through the be looking at is that I still using the BT and the default in here. So. To I just shape a little bit what what already exists. So if I remove those then it’s probably not going to be good. because the BT and the default that already comes in with with the servo team already has the the controlling the the hover and the other aspects of the book. So I’m just adding a little bit more style on the top of that. If you go here you can already see that it has changed. Now I’m going to go to the text part. It’s all about the same. Do you copy paste this. Right. You can see here that’s got change. So yeah this part the basic part is done. Now we’re going to move to to the drop down. In the drop down we have a little bit of a yeah we have some stuff that we need to look into it. Because first this is kind of a button. This is a button. So you have to shape the button. And there. Wow. So you asked me how I get to this structure right here because this is this is the cluster that it’s going to shape the to shape the component. One thing that I did was just I I expected the component and see how it’s structured. So the content that the the the that content that contains the button is this Bt and broke here. So we’ve got to place the code inside of this class. So I created a class and put that inside. So we got just go here. You can see here the the drop down the drop Dw that I created. And inside of that I create this. On half kind of work around to make it 100%. Why are we because this this doesn’t have we don’t have we don’t have this in in our XD. It’s just a trick that we’re going to use to make this wider as possible. So far one person fell asleep. Is it waiting out? Yeah, I should just see it says stuff here. And this part as well that doesn’t contain there. We don’t have that in there. So I’m going to put the I can that we want to put the I can this icon here. We want to put this icon right here. And we’re going to just float right and and mess a little bit with the margin. So it’s got a gold there. So now we’re going to get the the button. Style in here. Okay. So yeah, we start to achieve enough. Okay. So yeah, I’m not so good at CSS. I’m back at guy. So if I’m doing this, you guys can also do it. So it’s not going to go into much details. We just got to make a little bit like we have in there. So we this is pretty much better than without with the what we have before. So. Yes. Yeah. Okay. Let me see now the logo part in the logo part. While we have in there, it’s it’s also a little bit trickier to do it. Because we have to manipulate this this this round corners here. We also don’t have the rules that’s going to do that for ourselves. So just going to go to the background to to get this UI properties and I’ll just put in there. You guys got to see that’s not going to going to shape what we do. We want in the logo as already applied the styling there as well. And here, as you can see, the logo is just a label with the initials. And of course, you can you can use a data label to link back to to data survey. So it’s going to be it. We have the style class here. Well. I’m going to paste in this. And we’re going to get it also the text there to aspects here that we want to look also the text. Copy it. I still forget to do the right forms. Here is it. So here what you get is this. It’s not that good. You can do it’s at this to the border radius and the padding. Five piece. It’s supposed to get this a little bit better. And that’s that’s a thing. You don’t follow 100% what is in there sometimes. You have to to to go around a little bit. Yeah, this is pretty much what we have now. So it’s well, it’s better than what we have and it’s and it’s also a responsive. And what we can do here, it’s like this guy. The text equal to that’s getting better now. With it. Yeah. As you can see it takes about 20 minutes to take a nicely designed form a Adobe XD. Copy paste some CSS over. And as we saw you still need to know some of the tricks. I mean, he’s almost doing some tricks that I didn’t know. But it’s already starting to go a lot better than just creating Lane vanilla forms. And it really helps that you can reuse a lot of the CSS code from tools like Adobe XD and from a fig meows the same capability. Most UX tools have the scalability that you can extract the CSS from them and reuse it in in serve way, especially with with thing. Titanium, sorry. Yeah, so you have to sometimes you have to play a little bit with this. And I think that’s I I do often it’s like for example for this guy. I can just go here. I can expect it and go here after the the the CSS part that is related to this. And I can also do this to discover what is the the best the best value that I could put in my code. So I can about 0.5 of your point six. So then I will go with 0.6 and then I go back to my code and then just change it there. The most of you use the Chrome tools to go and see and look at your code. Yeah. They’ve become very useful of the user to see why the hell things are happening. Yeah. So yeah, that that’s that’s our screen now pages root. It’s even better. And let’s see what I can think. I think this is any questions so far or observations. I couldn’t even do it. Yeah, it’s it’s really straightforward. Do you fair into to pre populate your class classes so that when you drag the button on it, we’ll already have that class of life. Yeah, not yet, but we could use that. And this is really good because we could have a like a palette like we’re discussing yesterday, right? So you can you can talk to your to your design and ask for a for a palette of I don’t know labels. Or everything every component in your system. You can create his variants and it’s a really good fit new feature that that is coming up to help us. So dragging out the component already there. You don’t need to even do that. What I’m doing now you do that previously like creating the styles and creating a variance there. You have one developed that is that and then all the developers just designed the poll. Yes, yes. Yeah, so it’s not a good idea once you want to are using a tool like XG to begin with your style guide, where essentially you create every possible component once and then you make those in server point and then all developers can use those. Yeah, and this is going to make your application fairly consistent when it comes to components. You just watch you don’t want to decide about them looking like for the same kind of the same form looking different in every page. So yeah, this can be really useful in this in this sense. Right, I think that’s it. I don’t have anything more to add this. Any specific questions or non specific questions? I was going to say that ask any question that I know the time questions, but we all know that by because there are many dumb questions. But I’m assuming that you don’t ask that. Yeah, maybe in the time that we left you can build something here. So I’m going to build something. Yeah, no, just to show how much is this. How easy you did. Yeah, probably build something. You can’t go move it. But it’s been a while. Yeah, okay, you guys. Anyone have some question about it or? So at the beginning, I asked so how many people use an XD? Not a lot. How many of you just start building the form straight away with no priority sign? You use fake, but Aria does. Aria is, yeah, he builds some straight away. I’m going to do that. Awesome. Well, something. Okay. Yeah. I’m going to do that. Sketch. Sketch. Yeah, also know a few people that just build their initial versions in PowerPoint or in keynote. Yeah. And then they hand the, the, the, the, Ok. OK. And Prince would say it’s done. What they will do is create a really sense feature, so you have it on paper, Don’t forget, see how it brings, the input, is the entire being a very interesting way. Yeah. It’s supposed to just be… the shape, the web version and then you can always see it. That makes it easy because we tend to attach, maybe you can open our whole xt model version. Do you have one there? Yeah, because we have like, yeah, hundreds of screens built out in it and they’re all connected to each other and all the interaction is in those screens. And I can highly recommend using a tool like this because it saves you a lot of time before you even start developing software because sometimes you know, mainly you on an i-come-up with product ideas but sometimes they’re stupid, but we don’t recognize they’re stupid until you’ve built out some forms. You start looking at them and then you go, no, this is not a great idea. So now instead of having a developer involved to other most, you guys are the most expensive people of the company. Instead of having a developer involved, you can now figure out upfront how to start changing your mind or and even showing it, we often build stuff that we will first show to end users just an xt to get their input on, you know, would you be using something like this? So also when you’re getting your engines involved, it can be very helpful to first have it in Figma or an xt, click them around, figure out what’s wrong before building any kind of any kind of code. Do you use a style guide? Yeah, we have a style guide. Yeah, it’s actually one of the screens in XD, not? Yeah, I don’t know where it’s, there’s almost hiding somewhere. It does, in XD, it does tend to become messy on how to find things. Anybody has tips on how to organize things in XD then? They’ll be looking for it. They’ll be looking for it. Yeah. That’s actually a good idea. Because we could then start with a link to the style guide and then then go deeper from there on. I’ve got a business box as well. Yeah. Do you ever find that your design comes up with a design that you can’t implement in certain points? Well, that’s, let’s do that again. Do you ever find that your designer comes up with some sort of screen design that you can’t implement because you need a, some functionality or do you have to create a custom component for it? Yes. So both, both have any answers. And then sometimes we descend it back or jump, we’ll send it back. And then we reconsider or in some cases we have to wait for things or consider, should we build a component or is it not worth the app? Because we try to stay away from building components, which I think is a good thing. But sometimes if you really have to, you have to. Yes. Sometimes when, when this came to me, get come to me, I tend to look into it and well, this is going to be a little bit tricky to, to handle with a self-life component. Then I send it back and then, well, why don’t we do like this? Is this going to be easier to do it? And then they reconsider it. Sometimes it comes back with the positive, well, it can’t be, it can’t be that. Sometimes not. And then we have to figure out how to, how to get around. The, the, the, obviously we used to, we would love to be like, how Steve Jobs was running design. I just wanted to just get it done was, was, what he said, doesn’t matter how much it takes. We only have three developers. So we would have to think about, you know, there is a big resource constraint if you’re a software startup like we are. And so something is going to take, that’s why we like to, to poke our sessions before we take them to, into the backlog into the planning. Because then we find out, you know, this is going to cost so much time that we believe we should be building something else first. So you prioritize based on. I think few development teams did that they just start building, but we always, that’s why we like to miss you. Programming the things are like one hour or two hours, not really worth it. They have a long discussion about it. But if something is going to be planned, the, what, in the focus session estimated this, this is going to be 40 hours. Now is the time to maybe break that down or reconsider a little capability and figure out is that, is it worth the cost? Yeah. And even if you have bigger budgets, I think she’s still be doing that because you should be building the most important things first. All right, we have two more minutes. We have time to go on Tom Quest. Come on. We have time, we have one Tom Quest. All right guys, thanks a lot.