How I have become a UI/UX Designer
I’ve had a few ideas for android apps, and I’ve been wondering how I can have them produced without having to learn a lot of programming or spending a lot of money.
Getting your own mobile app on google play, is not as tough as I thought, believe you me. What is difficult really is to raise funds to market your app.
I quickly realized that if we had a chance to access funding in a more easy way, a lot of innovations could have taken course in most developing countries. I tell you that, even me, if I had funding means, my organization could have developed as many functioning mobile apps as possible.
Consider getting an app produced for $250 — a rudimentary app to introduce on the market and then seeing it earn $2,500. An incredible return on investment! In short, my inspiration then grew to say if at all I invest my time and energy in developing better and more complex apps, without necessarily getting it done by others, except maybe on more technical aspects (which easily happen and can cost nothing much) I would make my life better and comfortable.
I considered starting with learning first. I invested most of my time and resources into reading, watching videos on YouTube, participating in SKillshare lessons, and many more on Coursera, Udemy, edX, google digital garage, and many other platforms. My challenge was to learn more within the shortest space of time.
I first started with drag and drop platforms. But could not get the best design, and moreover you tend to get a lot of bugs. I turned to real coding but could not go any further — though I was able to learn a bit of coding using W3Schools, which demanded more of my time.
There were more complex and they required my whole attention. Then I bumped into something that made sense to me, Figma. I spent a weekend to learn basics. I then began to come up with business ideas that can work with Mobile apps. From there on my mind was racing with numerous ideas and I was also designing the wireframes to depict these ideas. I took completely 2 weeks to build my new career, and Wow!, here I am.
Because most apps are created with the iPhone in mind, I started with it. However, I realized my country is more of android phones than iPhones. So I switched to Android apps.
Here is my journey to designing the first app.
I came up with an avocado exports app. An Avocado is a brilliant green fruit with a huge pit and dark leathery skin. An avocado is a popular snack. Alligator pears and butter fruit are other names for them. My mind was that if I created a platform where people can register as users (either buyer or seller), and be able to supply to a common point where the buyer then buys. Initially, my mind was focused on the Thailand Market. Having individuals or stores order from Zambia using this app. However, it was just a pipe dream because there was no way that could work due to a lot of funds required to implement. Nonetheless, I still hanged onto my idea — left the name like that -but choose to localize it. This means, therefore, that I can still have local people (either farmers or businesspersons) supply the fruit to a common market and have local buyers buy using the same app. Here, the basic idea is that we connect the buyer with the seller — in between we provide our storage and packaging service — and earn ourselves some transaction fee (to start with), and extra cash on packaging and delivery.
I started with the sign up and login wireframes and designs, of course not forgetting the splash screen. I had to design the logo for the app, and thereafter create an icon.
It took me about an hour to reach the final outcome…of course after struggling with the concept. Then wala! I managed. This is how it will look like on the screen:
The next thing to design was a splash screen. And I had everything under control by this time because my focus really was to do it, and not by anyone else but me. The splash screen is what is known as an Opening screen, also known as startup screens, and are a frequent feature of many mobile apps that show shortly after the user launches the app but before it becomes fully functional. Regardless of how quickly an app loads, users must complete a series of small activities before they can engage with it. A splash screen is used to compensate for any loading delays.
The App Idea..
My idea was that if I am to design a splash screen to show that it is an avocado selling and buying app, then better put some effort and I did just that. I had to look for an image online that can be put as background image and then add a logo with the name of my company. have a look at how the splash screen came out finally after a day’s long work.
Now that I was pleased with what I designed (sometimes we tend to be our own judges and believe it is a good piece of work we have done), I had to proceed to creating the register screen and the login. On these screens obviously we find the names, emails, phone numbers (in some cases), and some action buttons. I designed the sign up and login screens in two days, with of course a lot of revisions. Just have a look:
You would notice from the actual images, before mockup, that if by chance one is not registered they can easily go back by clicking on the register, and vice versa.
The rest of the screens
I felt that was enough and moved on. I started contemplating designing the other screens….. The idea of the business is that there will be a supplier and a buyer. This app, therefore, is meant to connect them. Though what is really going to be happening is that the users may not necessarily be talking on the app, that is solely the role of the mobile customer service. I continued designing the profile screen, category screen, order screen, payment screen and delivery screen. To those who choose to buy from another town and want the products to be delivered.
Here are the outcome designs…..
I managed to finish this in 4–5 days.
Fine…..
I finished designing all these screens and I saw that they were perfect. Of course I need to mention that I have not shown the loading screen, the menu screen, and the keyboard element.
I have left off with my wireframe, so I have a storyboard of how I want my app to work at this point in the development process. It’s now time to put that storyboard to work and start testing functionality. But before that I have to prototype my wireframes with Figma.
Linking different frames with elements is how prototyping works. Users can then move across the app by clicking on the related elements. The first step is to choose my starting frame and then create links between the frames.
Took only a day to finish this….I should mention here that there are some screens I have not included where some important elements are. So when I finished with this, I needed to see how the whole app was going to work. Lets see how it will work now, shall we?
I have only managed to show in a short video how the mobile app with look like on a real phone. I am sure you will be very excited to see the entire complete mobile app.
Having completed all the works in Figma, I exported the entire wireframe into Bravo Studio. The best native app builder that turned my design prototype into native iOS and Android app without writing code. I added a bravo tag and that was it. A Bravo Tag is a text string that I placed in the layer names in my Figma file. After I imported the Figma file into Bravo Studio, the layer with the Tag turned into a mobile component or action in Bravo Vision.
Obviously, this where I defined my servers, APIs, and data diagrams using your wireframe. I realized Bravo studio is a good platform where people can do-it-themselves site. It offered necessary resources.
If I had a $20 I would have right away published on Google Play, and again I would require about a 100 bucks to publish on App store. It is at this point where the funding requirement starts. I would need a bit of money to run and make the up running. Just ensure my app works perfectly and deliver, I need about $20,000. I will soon be telling you how this money will be used for.
I will surely be coming back with another part of the this article when the app is up and running. Make sure you download and experience it.
