Customized App Components Without Coding

DronaHQ launches its no code control Designer to give its user even more control over the granularities of application development. With the Designer, users can quickly build and customize components for their app to their specific requirements all without code.

Here is a chat between the lead product engineer behind the Designer, Mohit Agarwal and DronaHQ’s Marketing Director, Kinjal Vora to give you a greater insight on the product and how it is going to take the no-code market by a storm! 

You can listen to the interview here:

Kinjal: Hello everyone! Welcome to this podcast from DronaHQ. Today’s topic is Going beyond the basic UI interactions. 

So today we have Mohit Agarwal, the product engineer and user experience evangelist. He has a fantastic product to announce and we are excited to hear all about it. 

Let’s get started! Hi Mohit, how is the day going so far?

Mohit: Amazing!

Kinjal: Great. So, Mohit, tell us about the new user experience tool or the UI builder that you’re working on. What’s the name? 

Mohit: The name is Designer as of now. 

Kinjal: And any specific reason behind it or what was it that triggered you to start with this kind of a product?

Mohit: The basic trigger was that the level of granularity that we were giving to the customers earlier was not as up to what they needed, certain basic things weren’t available. 

So, we came up with this solution where we will give the user all the customizations they need and once they are done with the customization they can put an app on top of that customization.

Kinjal: So, currently in the Studio you have already provided a UI builder. 

Mohit: Yes. Right. 

Kinjal: And it has a Control library with major of the controls as well?

Mohit: Commonly need controls. 

Kinjal: Commonly need controls. And users can edit the properties of these controls? 

Mohit: There are certain properties when it comes to data. UI properties are limited to certain properties which a user commonly needs, say the colour properties or the font properties.

Kinjal: OK so that means right now the font or that data properties were limited Or they were sufficient for the users and something triggered where you all were like, hey! We need to give more control over the properties, we need to give more UI properties. Is that the case?

Mohit: Ah yes. When I think of myself as a user, I sit in the user’s seat. So the problem which I would face is that I think there are certain requirements and certain standards which I need to follow to make the app. Now I have everything that DronaHQ is providing. But the problem was that some standards on me weren’t being met. I had a problem with that. We thought was, why don’t you give users a place where they can meet the standards and then can act upon on that.

Kinjal: Fantastic. Just to clarify things you are willing to give the user a capability to create new controls or new properties for the same controls?

Mohit: Newer controls. So there are two phases to this- either you start with a completely new control, Make it customized according to you OR we’ll have N number of templates for you, pre-built controls, where you can pick the controls that you like and then build with your customizations on top of that and then use the same controls in Studio.

Kinjal: Fantastic. So, giving more consistent visualization to the user to use it across the application

Mohit: Consistent and up to their need.

Kinjal: Up to their need. So, as a user, generally in the market we see a lot of other UI builders, they need to have coding or other prerequisite skills. So, what will happen with this Designer?

Mohit: With the Designer, there is no code, not a single piece of code needed. The only learning curve will be for half an hour or one hour and that will be to understand the UI of the Designer that you need to drag and drop and that will be as simple as using Word. So, how much time it took you to learn Word? It is going to be very simple.

Kinjal: So, you mean there would be no coding skills specifically required to understand any front end and so on. Oh, fantastic. So, this is something like drag and drop builder for your UI controls. 

Mohit: Yes exactly. 

Kinjal: Fantastic. So how long did you take to build this platform?

Mohit: That is a very difficult question because the thought process started around six months ago. 

Kinjal: OK 

Mohit: Then we kept looking for places to decide on how we start because this was a very open-ended approach. Nobody else was doing this. There were other solutions out there giving similar features as us, but they weren’t giving the granularity that the user needed. So we thought out of the box and we came up with a product that will have all the possible controls that you will need as well as all the customizations that a person will need up to the level of border colour or other simple yet customer-specific things. So, yeah, it took 6 months to build the product.

Kinjal: Oh that’s nice. Could you just give us some example of any particular control that was built on this platform and what was the wow elements that the first-time viewers could observe?

Mohit: I’ll tell you. So, when we initially started building this, and this is a real use-case by the way, so, we had built this platform but we did not know what we should create as a first example. 

So, there was a use-case wherein a person needed an ID card. What we did was, we took out our own company’s ID and, I’m not kidding, we took just 3 minutes to make the UI of the ID with all of the dynamics. Say I am logging in to a  Studio App after the control has been added to the app and I’m logging in as Mohit. So, on this app, I will see my ID, my name and my photograph pre-loaded. That control was made in 3 minutes according to my requirements. There was no base template and I could make that control in 3 minutes.

Kinjal: That is crazy. Nice. So, this brings me to my next question. Will this product be a standalone product or will we be using it along with Studio’s UI builder?

Mohit: It will be a companion of Studio’s UI builder. But we are also thinking of scaling it out to other products that we have. Say we have a workflow Designer where you can add emails. So, email templates can also be done on the Designer.

Kinjal: So this output of the Designer, do we have to import and export it and bring it to Studio or how is that going to work?

Mohit: in a single click That’s all. 

Kinjal: Oh fantastic. So, as I understand, it is going to be a product for various elements of DronaHQ Studio and going ahead, the roadmap, probably you would open it just as a standalone platform for the UI/UX Designers of the world to create their controls.

Mohit: Say you have to build controls, any element that you want you can customize. We are planning to do it via the Designer. So, say there is certain customization needed in every aspect of the app that you are building or anywhere where you have user interaction, wherever there is UI customization needed even slightly, we will incorporate Designer into it. So right now we have started with Controls and trying to achieve for the email templates in Workflows. These are all common things. Email is the most common use case where the user wants a customized email to be sent out and we have a UI builder and Workflow builder so we’re doing something in between the two and planning towards emails as well – customized emails templates.

Kinjal: Fantastic. Why don’t you tell us more about how you’re building experience was and how big was your team?

Mohit: The team’s size varied during the 6 months it took us, but it was commonly only three people- it was me and two more colleagues of mine. They did a tremendous amount of work because we were building something that only we had imagined. Unlike how usually when you are building something you would take references from outside. Since the Designer was tightly coupled with Studio, it did take a lot of head-scratching and thinking on how to do it because the problem is, as a developer we’re thinking in a different perspective but for the user with a non-technical perspective who use this, we have to make it according to them. So, what we did was, we removed our developer caps and started thinking on what the user will need and how he would develop such a product and during that phase, we learnt N number of things and then we came up with this product. 

Kinjal: So, who is the target audience of this part of the product? Is it the Designers, the UI/UX Designers or somebody who’s just new to application building?

Mohit: That is the beauty of this product. Anyone interested in designing the controls. It is so simple. Any person who has used a computer can use this product. The whole point of this product was not to just target one single type of audience. It was kept as simple as possible. 

Right now we’re a smaller team, we are 2-3 people designing the apps and I can’t hire an external Designer. So what we did was, we kept it simple so that even a normal [non-technical] person who is making apps can use this. Now, if you have very specific needs, you can look outside but for the most part, you will be able to do whatever you want in the Designer itself. 

Kinjal: OK. Nice. Any future roadmaps that you have for the Designer?

Mohit: Future roadmap would be to make Designer a place for users to come and build their UI in a much simpler way and then maybe use it in a wide spectrum of apps or products that we provide. 

Kinjal: Good. Any particular story that you would like to share with us from the beta users who used the Designers and how they have enjoyed it or if they have given you any particular feedback that you could share.

Mohit: So there is a really funny story.

So, it’s a live project story and we were pretty tensed because the project is in the alpha stage, not even the beta stage. So, we were building an app for a company and they had a very specific need which was very much doable in Studio and Designer but the problem was that the project was in its alpha stage and we didn’t know how it will work out, how will it work when it is published into the Studio package.

So our Designer was building a component. He did everything in the night and finished it and checked everything and he went home.  Somehow we didn’t know that the box-shadow of one of the components of the screen was being removed as soon as it was published. It was a small bug which we fixed later on. 

Now, in the night, the client says, ‘ I can’t see the card’s borders’. So during that phase, during, you know in the alpha stage, we were wondering that there are so many things that we can do for the user and fix. These are the things that the Designer could have seen. It was funny because our first attempt was a failure but we overcame that with N number of controls that we built after it.

Kinjal: Good, interesting insight. How many controls have been built on top of Designer up till now?

Mohit: Twenty five-thirty have been built, so there are different types of builds. For the clients, we have built around 25 to 30 controls but internally we have been building controls every day so more than 100 easily. So, what we do is, we have two ways of interacting with the Designer: one is, you can import your code. So, recently we had a colleague who wanted a specific card to be made and he didn’t know we had the import code functionality that well. So, he made that card and it did work out perfectly and when he showed it to us and we saw it and thought well this is different and asked how did you build it? He said he’d made it manually. He used up two hours to four hours to make that complex control and after that, it just took 30 seconds to copy-paste the code but it was fun for him to learn how to make it.

Kinjal: Fantastic. Great. With that, we come to the end of our Discussion over the Designer. I’m very excited to go and try it out. Probably you all should also try out the Designer as it gets launched and please shoot back any queries or feedback.

Mohit: Do let us know.

Kinjal: Thank you so much.