top of page

Why, What and How?

Why - Only a few apps have a section for motivation and most of them aren't reliable. But confido is a reliable source because the content in the app is from the people you know and get inspired. 

What - Confido is a listening application that has several celebrities audio tracks that boost your motivation and increase your confidence.

How - Confido idea started when I was exploring meditation apps. There was no application related to confidence and motivation. That's how confido app idea was born.


What was the process?

The app was designed in Figma and development using Bravo. This application is made out of zero coding !



I tried generating a couple of ideas to create a no-code application. 

While I was using the meditation app, I got the idea of creating an application for motivation and confidence. 


Did rough research on how the application is going to be made and taking a look at different applications for taking this to the next step

Why named as "confido"?

I was mixing and matching names and finally found the right mixture which is 

Confidence + do it = Confido 

Instagram post - 16.png
Instagram post - 13.png

Userflow (Rough Sketch)

Tried to make the user flow as simple as possible because this app doesn't require login or other information from the users

After completing the user flow, I digitalized it and worked on Wireframing (Rough sketch)

Wireframe (Rough sketch)

Designed a rough sketch of the wireframe using the information for the user flow.

Instagram post - 14.png

Making it digital

Converting the rough sketch of user flow and wireframe into a digital form in Figma

Digital Userflow

I used the Figma useflow tool to digitalize my rough sketch and wrote down the required points for development. 


Digital Wireframe

Digitalized the rough sketch wireframe and started adding details to the screens. The application has around 40 different screens which consist of 36 different celebrities' audio tracks.

High-fidelity mockup

Once completing the wireframes. I moved on doing research and collecting audio tracks online. Around 40 different audio tracks are added to this application.

Figma screenshot of High-fidelity mockups

Why dark-mode ?

The app made keeping it all dark-themed because research has proven that more than 56% of people prefer dark mode for reading and viewing. 

The app has a defined colour palette; rather than going for white and black, I did my research on how to solve this issue of white light which gives excessive stress to the eyes. I created my personal dark colour palette.


Dark Mode colour palette

My colour palette doesn't consist of black and white colour rather it's a combination of darker and different form of white colours.

How does these colours help ?

Black and white are extreme contrast of colours therefore using those colours may weaken reading stamina and increase eye strain. I avoided shadows and used mild colours to help the users to have a strain-free experience. 

Main Hi-fidelity screens

These were the main mockups because I will be feeding information into the frames using Bravo tags (Check the development stage).

Digital Hi-fi mockup.png

No Code Development

The best native app builder that turns your Figma app prototype into native iOS and Android app without writing code.

How did I find Bravo?

I completed a no-code solution course on Linkedin where I got to know about a lot of no-code development application. And started to experiment with it. 

Instagram post - 18.png

What was the process?

Started out with following tutorial. Bravo uses tag system to generate the application. Added the individual tags to every required frames.

Data collection

Bravo uses Airtable to get informations for the app and fillup the containers accordingly. Therefore I added all the required information about the app like celebrity's name, description and Audio URL. Bravo used these information to populate frame by assigning components to each containers.


Assigning Data

This process is binding information from Airtable to the application. Assigning each information to visual elements like texts and images.

Downloading and testing

After assigning the information in the app. I packed the app and exported it in APK format. Used my phone to conduct the basic test and after conducting the first send it to my friends for finding issues and asked them to provide feedback for the application.

Sorted all the minor issues like data retrieving and populating them in the frame and slow audio player.


Finally! Published in PlayStore.

 Thanks for your patients. Have a nice day! 

bottom of page
"use client"; import React from "react"; import { Boxes } from "../ui/background-boxes"; import { cn } from "@/lib/utils"; export function BackgroundBoxesDemo() { return (

Tailwind is Awesome

Framer motion is the best animation library ngl

); }