Junior Developer “Jane”

As a junior developer who just started making their way into the OutSystems world, I received my first assignment: create a mobile banking app for users to manage their accounts. I started feeling faint as I read through the requirements... Ability to have multiple accounts? Transfer money? ‘How am I going to pull this off?’ I wondered. I didn’t know how to do any of this. And it's not like I could go online and find the code and adapt it... My stomach started to hurt.

Afraid that I was going to be fired soon, I shared my concerns with a colleague of mine, who was an absolute lifesaver. He told me that OutSystems actually has a “builder” with near-ready-made apps, and he was pretty sure they had a banking app. It was called Experience Builder, a tool where I could mash up business concepts, connect them, and try them on the fly.

I logged in. Everything seemed pretty straightforward. I clicked ‘Create an app’ and there it was: the banking app. The app opened with all the flows I needed: from onboarding to transfers and accounts, it was all there.

According to the assignment’s requirements, the user needs to be able to sign up using their phone number. But the default sign-up flow only has username and password… ‘Oh, I can replace flows!’ I realised. Exactly what I needed and with minimal fuss. I published the app and opened it on my device. It looked great, but I knew that this was just the start of my journey. I’d need to extend the app in Service Studio, the OutSystems development environment.

 

 

Before that, I spoke with my Tech Lead and showed him the prototype I’d built, emphasizing that it wasn’t yet connected to data or any other external services. He was amazed with the result. The reality is, during the development of any kind of app, we need to share demos with our stakeholders. Creating a first working prototype usually takes weeks, but I was able to do it in half a day.

The next day, we showed the demo to our stakeholders and they really liked the outcome, especially because they were able to experience it on different devices (Android and iOS) and even as a Progressive Web App (PWA). We all know that when we put a working prototype in the hands of stakeholders, their vision for the final product and how close the prototype is to that vision becomes clearer, so they started identifying some changes and extra functionalities.

This is actually a good thing, because we start working with stakeholders much sooner and have shorter feedback loops. On this occasion, one of the things they asked for was a flow for the user to track their stocks and dividends. There was that stomach ache again...

I went back to Experience Builder and there was nothing like that available. I was short of options, so I decided to ask a senior developer for some advice. At that moment, it was clear to me that I would have to build it from scratch.

Senior Developer “Josh”

Jane approached me with a challenge: to build a flow for the user to track their stocks and dividends. She had a look of despair. But I was confident. "Challenge accepted! Let's do this."

Going through the requirements, I started to recognize a lot of patterns that we had built in the past and I wasn’t going to reinvent the wheel. When we start accumulating years of experience, it’s pretty common to perform the same patterns again and again. It would be awesome if we could put that experience at the service of more junior developers and increase our productivity as a team and, inherently, our productivity as a company.

Jane walked me through the initial prototype in Experience Builder and I immediately noticed an option called Flows. I decided to look into it and it seemed they’d read my mind: I could import any given flow into Experience Builder and make it available for those on my infrastructure to reuse it in any application! Or so they say…

The process starts with a module template and some documentation. After going through the instructions, I opened the template in Service Studio and copy-pasted the patterns from our own modules. I made some tweaks in the organization of the blocks, added my data and even an integration with an external service, and boom! 1-Click Publish.

Ok, now going back to Experience Builder: I selected my template, it was validated and… all green checkmarks! As I moved through the next stages, I was thrilled. It was all extremely easy to understand and perfectly mapped into a wizard-like process. I added some categories and tags to help me categorize my flow, and provided some nice display names and screen image previews in order to have a perfect representation of my use case. Save and done!

 

 

‘Let's try to see if I can use this flow in an app built with Experience Builder,’ I thought. I started a new Mobile Banking app, opened the ‘Add flows’ modal, searched for the tags I added during the import flow process… et voilá! My flow was there, ready to be used. I don't know what kind of black magic these guys did, but this is amazing!

After adding the flow and connecting it to my user experience, I published the app and tried it on my device. I looked at Jane. We both had a goofy smile on our face.

Re-Using Flows to Accelerate Development

Experience Builder is a prototyping tool with a laser focus on the customer journey, using a customer-centric lens to frame the creation of apps around it. It abstracts data, frees your mind from smaller blocks like patterns, widgets, and behaviors, to let you concentrate on your main concern: how to build an app for your customers.

To achieve that, we rely on larger experience components, such as how to handle a money transfer, how to submit a claim, or how to schedule an appointment. What’s great about that is, while you dwell on these bigger experience components, OutSystems takes care of the UX, the pixel-perfect UI, the architecture, the performance, and the native behaviors.

If you evaluate Experience Builder in a quadrant depicting design freedom versus code readiness, it resides in a very unique place. It has some design freedom, although not at the same level as your typical Digital Product Design tool, and, while it can’t be considered a functional back-end as it doesn’t allow you to manipulate your own data, it greatly accelerates your app development due to its code readiness.

Experience Builder resides in the functional front-end space, allowing you to create fully functional prototypes that in turn produce production-ready code. When combined with the power of Service Studio, it increases your productivity, ensuring you can build applications fast, but also build them right and for the future. Any prototype created with Experience Builder can easily be extended in Service Studio to achieve your desired outcome, not limiting app development in any way.

 

 

Adapted from "How to find the best design-to-code tool?" 

The customization options mentioned aim to increase your design freedom and foster the reusability of core components, thus increasing the consistency of the apps created—all without compromising our value proposition, allowing any developer to create great customer experiences fast, right, and ready for the future!

Find out how you can accelerate app development with Experience Builder!