InspirationMy First No-Code App with Bravo Studio

My First No-Code App with Bravo Studio

This article is by no means advertisement for Bravo Studio, I just think it’s awesome and provides amazing possibilities for us UX & Product Designers. What is Bravo Studio? A tool that let’s you transform your design into a working app, and helps you publish it to the App Store. Why this article? Before the release of this tool we would not dare to dream it in our wildest dreams, and I like to take you along in the possibilities it creates for us.

Disclaimer: This article contains no tutorials, but I’ve listed several video’s and articles that helped me get started at the bottom of this post, if that’s what you’re looking for. The focus for now it to show you what it enabled us to do, by using my first app as an example.

The Goal

I’d have to admit my vocabulary isn’t as good as I want it to be (no worries, this little anecdote actually goes somewhere). To improve this I’d write down unfamiliar words I hear from time to time on sticky notes, with the word on the front and the meaning on the back, and pile them up on my desk. As you can image this quickly becomes a mess when you exceed a certain amount of sticky notes. I searched for an app that could replace this process. But because we designers have rather high demands when it comes to apps (stunning looks, easy to use, etcetera), I could not find any apps that fulfilled this need.

I came across Bravo Studio at some point, promising me things like “From Design to native iOS and Android app. No-code.”. Yea right… was my first thought. On the other hand I was tempted to say: challenge accepted.

Part 1 - The Design

I first needed a design. Since that’s my day to day job this was the easy part. I needed a look & feel that was content focussed. Helvetica, a super minimalistic look to keep focus on the content, combined with primary colours were soon born.

Bravo Studio App Design
Bravo Studio App Design
Bravo Studio App Design

Part 2 - Making the prototype

Bravo Studio comes with an app, that enables you to preview your app before publishing. It requires you to mark certain elements, in order for their software to recognise elements correctly. Such as a form or a search field for example. This is rather straight forward and easily documented in a nice overview.

When your design is done, and the layers are named as required, you can upload your app to Bravo Studio (website software), and open the app instantly on your phone. You have to use the prototyping feature of Figma in order to let Bravo Studio know what happens when you click on things. Pretty easy.
Bravo Studio Interface

Part 3 - Connecting API's

A clickable app can also be made with Figma, so where is the awesomeness? Remember I wanted to build a list of words? And that each word would have a ‘backside’ with its meaning? And of course I wanted the ability to add new words and delete learned stuff. This all works via a simple spread sheet like Airtable or Google sheets.

You can set up a Google Sheets or Airtable list with these items (I used the latter since their tutorials are focussed on it), and connect your UI to it using some API mumbo jumbo. When the connection between Bravo Studio is setup correctly, every time you submit something to the app (a new word you learned for example 😉 ) it appears instantly in your Airtable sheet. This is somewhat complex for a designer with little to no coding experience. But luckily Bravo Studio created a section called “connecting to API’s” in their awesome Notion environment. And when you do figure it out, it’s pretty darn awesome. You’re basically creating your own simple backend environment.

Bravo Studio Interface
This is the interface for connecting the API's. You get an API link from Google or Airtable, after which you can use that data and connect it to certain UI elements.

Below some screenshots of my app, with a short description of what it does.

Bravo Studio App Design
Bravo Studio App Design
Bravo Studio App Design
Bravo Studio App Design
Bravo Studio App Design

Next Steps

I’ve probably just discovered the tip of the iceberg of what is possible with their tool, and they are constantly adding new things. They even made their Trello roadmap publicly available.

I’ve also published my app under the name Vocube, but recently discovered the bug that items appear in random order in the list….

To reflect back on the title, we are used to talk about prototypes in terms of low or high fidelity. Sometimes a Figma prototype just doesn’t cut it when you want some quality feedback on your work. In these occasions Bravo Studio can also serve as a prototyping tool to get feedback before building your app outside of Bravo Studio.

Overall I thing it’s pretty darn amazing that this is possible since 2020/2021. Like I said, we’ve probably only seen the tip of the iceberg of what is possible. And wether we will use it as a hyper fidelity prototyping tool or as a means to bring app’s into the real world, it’s a nice blink into the future.

Useful Links

  1. Their Youtube playlist with the basics. Easy stuff and enables you to do all kinds fo awesome stuff. 
  2. Their official Help Center.
  3. Written extended tutorial on how to create something similar as above. Also available in video.
  4. Bravo Get Started page.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll up Drag View