Wondering what it's like to start with an original app idea and end up with a fully functioning native app that is receiving global downloads every day?
We sat down with the creators of Voda app to hear about their experience using Bravo as their no-code app-building platform
Voda is the mental wellness app for the LGBTQIA+ community.
By and for the queer community, Voda works with leading LGBTQIA+ psychotherapists to design gender and sexuality-affirming therapy and cognitive journalling programmes. Our approach is rooted in the LGBTQIA+ lived experience: our unique programmes help LGBTQIA+ people cope with the challenges of living in a heteronormative and cisnormative society.
Voda’s mission is to help LGBTQIA+ people to lead better, thriving, and more fulfilled lives.
The bread-and-butter of the Voda app is our self-guided therapy programmes that combines audio with cognitive journaling to help users build greater emotional self-awareness. Think of it like a Headspace or Calm, but designed by expert LGBTQIA+ therapists.
As we are serving the needs of a marginalised community and working in the mental health space, we need to ensure our programmes are safe, secure, and effective. This is why we began Voda with a private beta that ran earlier this year. This was done via TestFlight for iOS and Android Play Test Store for Android users.
The key features:
Of course, for an app we also required user logins and authentication and to connect to a back-end, which was easy to do with Bravo with Firebase and Xano.
Over time, we added additional features to improve user experience.
The main tool we used to design our Bravo app was Figma.
This is because Bravo allows you to directly convert your Figma designs into a workable app on both iOS and Android. I was impressed with how intuitive and easy it was to convert my Figma designs into an app.
How this works is that we assign Bravo tags to different design elements in our Figma file. This “tells” Bravo what that element is supposed to do. It also allows you to assign actions, for example, [action:openurl] indicates that a certain text element should open up a link to a homepage, or assigning [container:slider:default] to a rectangular block element linked to a back-end via an API generates a slider of our therapy programmes.
To show you how intuitive designing with Bravo is, this is an example of how our Figma file looks like (left), and what the actual app looks like in practice (right). Note that the design renders slightly differently on different devices as the design morphs to fit different aspect ratios and screen sizes.
For user research, we used Typeform to collect feedback and responses. We embedded Typeform into the app so users can enter product feedback directly, which also comes through to our Slack channel.
For our knowledge repository and product planning, we’re only using Notion for now, with a simple kanban board of features, and a backlog of feature requests, bugs and product experiments we want to test. I have previously used the likes of Trello, Jira, and Asana for product sprints, but I realised this is not needed for Bravo Studio because the iterative process is so much faster.
For design, the good thing about Bravo is that it renders almost identical to your design file on Figma. However, it takes practice to design for different screen sizes and different devices (iOS and Android).
Here are some tips:
- Firstly, on some devices, certain elements look smaller, and on other devices, some elements look larger. We used Bravo’s exemplar files to get a good base layout screen size to work out of, and made sure all pages have the same width size.
- Secondly, connect most elements to a back-end API. This includes most text elements, images, and even audio files.
- Thirdly, because the app downloads data from your back-end, it means that pages will not load instantly when users navigate between the app. There is a wait-time when you navigate across different sections of the app. This is not a design flaw, as it allows you to update content on your app through the back-end automatically, plus it keeps your app size small and manageable. hence you should use skeleton loaders to improve the loading experience. Skeleton loaders give the perception of a faster loading time. (More on skeleton loaders here)
You should also optimise the image sizes and format. You don’t have to use large images, remember that it is a mobile app so the resolution can be smaller.
- Fourthly, test and iterate on different devices, get your beta users or friends to test elements visually and give feedback.
- Lastly, be creative with transitions. Transitions are the effects as users move between different screens.
Not really. We looked at numerous no-code app builders to iterate the first version of Voda on, and found Bravo to be reliable and also enable us to build an effective tool at low-cost.
We’ve been iterating on Bravo for months. The first edition of the app was actually completed in a few weeks. After on, we began being more creative, nuanced, and improved the app functionality by testing with users. We also optimised for user experience with loading speeds, optimising file size, animations and transitions.
There’s plenty of choice for backends but I chose one that Bravo already has documentation for. With Bravo’s API connector function, you can connect any API securely I suppose, but I think it’s risky to choose one that isn’t documented or recommended as there are often little differences that can cause us to lose time.
We are currently using the no-code backend Xano as it better fits our needs regarding audio support and scalability. Xano is a very powerful, scalable, secure no-code database.
However it does have a learning curve and you need an understanding of how back-ends work in order to use their more advanced functions like automating certain tasks and using functions. Bravo has basic documentation on helping you set up webhooks and connect APIs, but for more advanced stuff you’ll need to read up Xano documentation instead
For user logins, we use Firebase to authenticate users, and also allow users to login via Apple email or Gmail. Since enabling Apple and Gmail signups we’ve seen a much higher increase in conversions to registered users.
For beginners, you can start with something as simple as Airtable, Notion or Google Sheets to set up your first requests. However these tools have inherent scalability limits. For example Airtable is disabling their features for storing attachments, and more importantly, they also have a limit of 5 API calls per second. This is very easy to reach so I do not recommend it for a live app.
However, if you’re looking for a place to start then I recommend starting with those tools first to dip your toes into development, and then moving to a scalable back-end like Xano later on. Xano has an import feature so you can migrate databases easily.
Developing with Bravo is relatively straightforward. It’s liberating to go from a Figma file right through to a fully developed app.
In the past, that would have needed a multi-functional team of people, so being able to do so much ourselves is pretty impressive. We will always have feature requests but we manage to do a lot with what is already in Bravo.
In the world of no-code, Bravo is to mobile apps what Webflow is for websites and Bubble is for web apps. In terms of duration and learning curve, I’d say that Bravo is slightly tougher to get the hang of than Webflow but easier than Bubble.
If you are proficient in Bravo you can probably design an app in a few days. My first iteration took a few weeks but that was because I was tinkering with over a dozen of Bravo’s example apps, breaking them apart and putting them back together to figure out how things work.
As Bravo is relatively new, there are sometimes roadblocks in terms of visual debugging, and sometimes certain features don’t work but they always get fixed over time.
There are also other roadblocks you will learn along the way, such as waiting to get approval from the Apple App Store and the Google Play Store, but that is the remit of those app stores and applicable to all kinds of app development.
Since we have a live app, we generally push updates very late at night when no users are online. If you update your app while users are on, understandably they get pushed off the app.
Our private beta ran this summer and we had about 500+ beta users test, improve and iterate our programmes with us. This allowed us to improve the product over time and dedicate what programmes to create, and what new features to add.
Since then, we were also invited to present at a LGBTQIA+ psychotherapy conference, having been featured as an innovation in the mental health space making mental wellness programmes accessible, affordable, and inclusive. The feedback from psychotherapists and users alike has been fab.
To learn more about Bravo's business app upgrade, which the Voda team used to launch their app, click here.
.svg){kind=logo}
