Ideation to Creation
Build log for lion’s club app
So, this weekend my team and I, took up the challenge to create an app to support a charity. My parents are Lion’s Club members and they have been donating to charity for awhile(I was a Leo too), I occasionally go home for a visit at weekends, when I can spare the time from work. My parents reside in Trivandrum and I work and live in Mumbai.
One Monday morning before dropping me off at the Airport, to take my regular flight to Mumbai, my dad asked me to build an app for the lions club. At this point, I couldn't help but wonder why a charity would require an app. But I am not in the habit of questioning my dad and so I refrained from asking him why?
It also occurred to me that most of the members were over 50 years old and probably had no clue about smartphones, even though many of them own the expensive gadget. But, are they aware of its functions and capabilities?. Because, most of them only use them to make phone calls & send occasional sms’. (The only reason sms is still alive). Yeah, there are some hep older people who do know how to use watsapp, facebook, skype etc, but most of them are aware of these apps, thanks to their kids.
Oh yeah, so when my dad asked me to create this app, he simply assumed that I would be able to complete it in a couple of hours. Geez, thanks dad. But it got me wondering, do people really think that developing an app is that easy? Sure, writing code maybe (its just a small part of developing an app) but not building something from scratch. Because let’s be fair, a lot of thought goes into it, like judging your user-base, researching, wire-framing, doing a ui/ux overhaul, timelines,testing and releasing. These are just some of the crucial features involved, when building an app.
So we said goodbye and I realised I had about 40 minutes before I had to board. So I decided to use this time productively and began doing some research . The first thing I did was open up the play store and decided to do a search for “Lions Club” & Violaaa…. Some 10, 20 results pop-up. I started downloading them one at a time so I could check them out and understand the concept and study the various approaches taken by the developers. As I was going through them, I realised that each app was a classical user interface mess, built by coders not by Intellectual Badasses’.
So I decided to set those aside and instead concentrate on what I wanted to create and build. And since I did not have any paper, like a true genius I decided to scribble my ideas on some tissue paper, while munching on my chicken junglee sandwich. I created the wireframes and other basic features I wanted for my app. Since I long hours most days, I decided to spend a couple of hours each night working on this app and trying to perfect it.
During this time, Google had just released the Android 5.0 (Lollipop) sdk and the L Preview sdk just went to the recycle bin. This gave me all the more reason to develop the app since it would allow me to tinker around with all the latest API’s Google had to offer. I think it is important to remember that every line of code that I have written, has taught me something and that writing code constantly motivates me to push myself to write better code and improve my skill set. Developers should never leave opportunities like this to learn from personal projects as it is the only way to sharpen your skills, that’s why successful companies like Google allow their employees to spend 20% of their office time on personal projects.
Lots of people think of me as a mobile developer but I am also a huge fan of pixel perfect graphics and applications. As a result I spend at least 15% of my time working on software like Photoshop or Illustrator. I am strongly convinced being a developer doesn’t mean you can’t like great things. As a developer you are not supposed to do your designer’s work but should be multi-skilled enough to handle situations where some design tasks are required. The first thing I did was to build an app icon since i didn’t want to use the Lions Clubs logo as it wasn’t professional enough for me so I just created a mock-up Lion like flat icon on Photoshop. This gave the app the definition I was looking for.
It’s the little details that are vital.
Little things make big things happen.
John Wooden
Now it was time to add some material goodness to the application since it has been applauded by designers and developers around the globe. I decided to keep the app as simple as possible without many gesture driven actions this helped us to deliver the clean interface that can be seen below in the screen shots. The user is greeted to a clean and simple album layout which is appropriately labeled depending on its contents (we gave a dark overlay on the image containers in this particular view, this helps the text to pop!).
I decided to use activities instead of fragments for this particular app since working with activities is painless compared to fragments (turnaround times are much faster too). Click any of the containers and you are smoothly taken into a reel of images that you can smoothly scroll through and identify the images you like. Clicking on any of this images will take you a deeper instance where you can play around with the images (zoom in and out, multi-touch, double-tap) The Actions bar gives you action buttons that you can use to download the image to your file system, favorite a particular image and share it through any other app. This sums up the flow of the application.
The next challenge was how do we show files, you see images were not the only thing that needed to be shown there were Word, Excel and Acrobat files too that are not easy to deal with. I planned on firing an intent to call system wide apps to handle these files instead of handling it internally in the app. This was awesome since i dint have to take the pain of dealing with these file, but the next road block was how do we do it beautifully. I took inspiration from Google Drive & built a list that contains folders, these folders can then contain files. All these files will be pulled directly from a remote server and the UI can be populated by using a simple JSON script this helps the app to be super efficient ( light build and fast performance). Here’s the magic when you click a file it pushes a request to my server and downloads the file from the cloud then passes an intent to the system to open up all apps that can open the type of file and Eureka we can see the file on Quick Office or any other office suit installed on the phone. We gave a action item on the actionbar in the album view of the app from where the file manager can be accessed.
The useful part of the application was complete now and i was looking for an interesting way to add credits to the application so that it can be an attentions seeker and yet not destroy the flow of the application (its really difficult to do). I came up with the idea to use the navigation drawer for this task, i love my team together we have learnt a lot in the past 5 years from when we first met we have done things others thought were impossible we have delivered on timelines much before anyone even expects it we have built & broken things but always stuck together as a team. We always motivate and teach others who join us in this wonderful journey called life. I added the images of all who contributed to this app in some form or the other. Added an activity to point to all the open source libraries we used in the app without which it would have been very difficult to develop the app in a couple of days. The last task was to add an About activity where we can brag about the application and its developer (you can see the screens below). I also added a desi flavour to the app by inscribing the “Made with ❤ in india” in the app, to show the world that yes, we in India understand mobile applications and design.
The app can be downloaded from Google Play
I have not yet decided to make the app Open Source, i just may (comment down below if you want it) and if i do you will be able to find it over at GitHub.
