paint-brush
How we created the first low-code prototyping tool that generates Angular code for non-codersby@ksenia-goron
1,381 reads
1,381 reads

How we created the first low-code prototyping tool that generates Angular code for non-coders

by Ksenia Goron September 8th, 2019
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

UI Bakery is a free prototyping tool for non-technical people that generates Angular code in minutes. It was created by Akveo, who had expertise in both UI design and front-end development. The company created a new product that enables to easily create a custom UI design using machine learning algorithms. It's the story of how we set up the product approach and processes to launch the product. We had a year of developing and testing and in less than 4 months hit the market with a totally different product.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - How we created the first low-code prototyping tool that generates Angular code for non-coders
Ksenia Goron  HackerNoon profile picture

Have you ever found yourself in a situation when you’ve created the product, met the user's needs but there are no results? Still, when you entered the market, you were sure that everything would be okay. We’ve been there.

In this article, I’ll tell you how we’ve fixed this problem and finally start selling. We had a year of developing and testing and in less than 4 months hit the market with a totally different product.

It’s the story of how we set up the product approach and processes to launch UI Bakery – a free prototyping tool for non-technical people that generates Angular code in minutes.

Background

Our team had high expertise in both UI design and front-end development. We have made several successful Open Source products like Nebular, UI Kitten, ngx-admin and others. ngx-admin quickly caught on popularity as developers got a great Open Source admin template based on Angular code that is very wide-spread among products in enterprise vertical. 

Mostly they are engineers who don’t have a lot of experience in working with the Angular framework that Nebular was built on. However, though we were receiving plenty of positive reviews and testimonials for our ngx-admin, some of our customers wanted to have beautiful designs in their own brand style.

After Akveo implemented brand designs for several such clients, we understood that there was a need for a separate software solution. And we built a brand new product that enables to easily create a custom UI design using machine learning algorithms. It was based on its own Eva Design System.

We presented this product to our clients. They liked it but it was not enough. They wanted to create applications on the platform, they wanted a low-code. 

The main goal of our potential clients was to speed up development. The reasons were different: some weren’t able to meet the project terms and budget, some needed to quickly redevelop the system, and others just wanted to reduce time to market. We saw that our audience is pretty large, from startups to large companies.

User research

So, we found out that our solution to the design was not sufficient for our clients. Their key problem was front-end development: now frameworks are changing very fast, front-end developers cost a lot of money. In addition, sometimes they are more focused on the app look, not on the business logic.

Competitor analysis, user feedback, and market research allowed us to define the main pain points as well as see what the process should be replaced with our platform. 

We’ve interviewed 8 users at the 1st stage to elicit the principal issues. They were repeated almost in each interview so such the amount of users was quite enough. In our case, user research gave us a clear understanding of the customer's challenges in front-end development.

As we had already known the main pains of building front-ends, we dived into the needs and expectations of our customers. This let us identify the primary fears, what exactly could help to resolve their problems. During this thoughtful analysis, we changed the priority of MVP features. What’s more, we found out one of our key advantages: the possibility to generate code and download and use it as a regular Angular project with a common Angular structure.

Another stage of user research was the launch of UI Bakery’s beta version. Our team issued a crippled MVP version to collect user feedback and check whether or not we went in the right direction. We created a landing page with the vision of the whole product and showed a demo version to potential clients. Thanks to this, we attracted a lot of users who were just happy about the product since we showed them something that adds true value.

Many of them asked about our plans and we admitted that a large part of our strategy and tactical decisions depends on the client's needs. Nevertheless, then and now, customer discovery allows us to stay in touch with customers.

Processes set up

The main challenge was that we were born from outsourcing. If you’ve ever worked both in outsource and in a product team, you know that people there have a different mindset. Outsourcing companies are focused on delivering good quality and meeting the project requirements. Here you need to do your job and once it’s done, you are free. Such an approach doesn’t work in product development. Surely, the product should have a high quality, too. But you also need to know the time when to come to market, when to test ideas, when to stop improving and go further and a lot more things. This requires changing the mindset and I’d say that we are still working on it.

To help the team to deliver the value and get feedback faster, the workflow should be seamless. We used a mix of 2 methodologies: GIST and SCRUM. I won’t describe here their theory, I’ll tell you how we’ve come to the understanding that we needed processes and what difficulties we faced.

Because of some challenges, we couldn’t enter the market, we were going around in a circle:

  1. Lack of clear vision: planning based on “I like” preferences, we had no clear features' delivery plan to users' segments, potential problems with clients due to out-of-schedule feature readiness.
  2. Lack of user feedback.
  3. Lack of clients and marketing.
  4. Lack of a demo version.
  5. Unclear tasks: incorrect estimations, unknown/broken schedule, difficult to plan the product development with unclear velocity.

So we needed a straight decision about what we should create and how we could add value. It wasn’t fast to build the product using the hypothesis-based approach as there were plenty of ideas that should be checked on the market.

Our team needed the methodology that would bring clarity and some more “steady” base that we could lean on and not fail on the market. GIST, created in Google, became such a methodology. According to it, you break the product into ideas in the Idea Bank, prioritize them based on the ICE score model, and combine into small steps. Then, you check various ideas and define whether they will live or you should just reject them at a very early stage.

The main output of GIST is that we defined short deadlines to test the ideas and gained confidence that the chosen idea will fit the market based on data (market and client’s research), not personal preferences.

I cannot say that we have “right” SCRUM but we communicate a lot. Everyday meetings of a small team (5 members) and constant discussions enable us to solve issues with ease and make a retrospective when we really should. 

One SCRUM trait that is necessary for us is a demo. Each week we show all the stakeholders what we’ve done and collected feedback which helps us keep our productivity at a high level. Moreover, thanks to such a customer-oriented approach, we don’t spend time on what users won’t need.

In closing 

By using this approach, our company conducted soft-launch this summer and got feedback from early adopters. We've understood the difficulties that our users faced by looking through a huge variety of components that they were building up. 

UI Bakery fits any business and covers most of its needs due to providing numerous design templates, custom elements, and different components. It enables to create real prototype and generate Angular code. And we are working on adding new components and extending the possibilities of UI Bakery platform.  

At this moment, we are on the way to launch the product on the market. However, you can try UI Bakery even now. We'd appreciate any feedback, feel free to leave it!