Yesterday we finally started beta testing. Ali just launched the first version of Crowdspottr at Tuesday evening. We immediately sent the .apk build to Android Beta testers subscribed to our mailing list not to waste any time. We knew we had many bugs and missing features, but but we wanted to start getting feedback as soon as possible.
In the meantime Bandi and Szajmon made comprehensive list of bugs and features to be addes accprding the initial project scope to get Ali and Shubham working on fixes and further development.
Then we realised we do not want to give away the whole source code to any beta testers directly, so we moved to .apk file to the Android Market and used the beta testing feature. It’s kind of a more professional :)
Beta testing for iPhone applications is a bit more complicated. Fisrt we thought we will get the beta testers applicants UDID numbers and send the packages one-by-one, but it just turned out more complicated. So we decided to use a cool sercive calles Testflightapp and asked users to register their devices. Going this way, after launching a new beta build of the application, all testers get notifications and access to download the new version and we can monitor all beta testers activity at one place.
Altough giving feedback is easy, we just made a feedback page for our website too, accessible here.
Shubham launched Crowdspottr v1.0 and Martin, Chohye, Juni, Simon and some of our friends from India + Hungary started to go through the build carefully. Of course this way we got a lot of important feedback on bugs and ideas on further development.
Our goal is too release a new beta build until Saturday morning. We’re pretty sure, Ali and Shubham will to their best to release new, more reliable version for our beta testers.
Oh, for everyone who gave us some feedbacks: bigup, thanks guys! For the others: new build is coming, stay in the loop!
You liked our app trailer video? In case you did, we got some goods news: we create a launch promo video, too. Adam tells how he would like to improve the visual! What do you think?
I’d like to show you the difference between the new and old pipeline for the promo video. In the first attachement you can see the old 2D graphics (this technique was used on the first trailer). I was thinking a lot, how to improve it, and I think I’ve found the solution.
Here you can see the new 3D workflow. It takes more time, but have many advantages (for example I don’t have to redraw everything, when I put the camera in different place / perspective). I’ve also managed to make the bumpy paper surface like in real life. Also we have now proper lighting (and it’s calculated in a physicly accurate way) and reflections. Not mentioning, that objects are not flat.
Hello all Tech Readers
You all obviously know me as the guy behind the scenes, the one who is responsible for creating the backend of the Android application and also designing the interaction. I want to take some time off and write about the way I thought about building this application. I’ve always believed that to make any good software the architecture has to be really awesome, and to do that you can’t just start coding you need to think things through in your head and start working in a planned manner.
I think it all started when Szajmon, Shubham and me started putting together the layouts of the different screens for the application. Throughout this discussion I was continuously thinking about how I can make this application in the best possible way and turn it into something working and real. Once the interaction was fixed and the mockups were drawn I started designing the backend.
According to our design we had in all 15 screens (quite a big number to implement in so little time). And the content in the screens was populated by data from not only Facebook but also Foursquare.
I knew for sure that I had to use a lot of threads and a lot of synchronization between these threads. I started with getting batch requests working which enabled me to get a large amount of data just by one request. Then came the part of creating the method to fetch the data. There are two possible ways in which we can do that:
1) Build a Service (Background Thread) which will periodically start itself and then fetch data from Facebook/Foursquare and update the database.
2) Get all the data from Facebook/Foursquare once at the start and then give the user the functionality to refresh the data. This is more of a pull on demand technique.
I went for the second option because I think it gives the user more flexibility and also it got things moving really fast. After that I spent quite sometime designing the structure of the database (Since the data needed to be dumped somewhere). The database that I designed needed to have the power to store events, checkins, places and friends of the user, and it needed to do it in a very optimized manner such that no data would repeat. I went for a ‘many to many’ database design (courtesy Shubham) the reason being each event could be attended by more that one friend and vice versa. Also I added a couple of indexes to make the queries process really fast.
Once all of that was complete I needed to get the UI elements in place such as the listViews, tabs etc. Todo this I think one needs to figure out what are the primary Activities (Android terminology) in his program. This lets you understand what are the things that can be reused. I decided to build Activities for every View in the interaction since I din’t want to put everything in one Activity and manage it myself, also I believe the Activities need to be as compact as possible (it should just serve a single purpose).
I m going to explain this with an example:
For the Events page the interaction that we decided needed to have a list view which had the events of the users friends and when the user clicks on an event item it takes him to the details of that event. This needed to be separated into different Activities i.e One Activity needs to be responsible for managing the ListView and the other responsible for the details of the events.
After I had all my views in place I wrote custom adapters which connected these views to the backend data and displayed it on the screen. I had to take a lot of care not to overload the UI thread and hence I used a lot of Threads (hopefully there should be no ANR’s :P).
Then came the part of implementing the Tab bar. According to our design we needed to have a Tab bar at the bottom and that was used for navigation between the different screens. I’ve realized that doing this in Android is not that easy. What I did was I coupled all the activities that were there in each tab and then put them together into an ActivityGroup. The way the activity group managed between these sub activities was obviously hand written by me (this part is definitely not for the faint hearted).
During this process of building the application Juni and Szajmon were simultaneously working on getting the final mockups ready with the final colors and icons. Once their work is over I will put all the icons and final colors into the app and with some help from all our beta testers we should have something nice looking and AWESOME!!!!
Once you got to check out our brilliant pre-release video of Crowdspottr, pretty sure you would wonder who made this cool video and where did the idea come from. Learn about the process with Adam’s guidance.
Making of Crowdspottr Pre-Release Trailer
The whole trailer project started for me when I’ve got the script from our marketing team. It described the basic storyline (with Napoleon Dynamite as a main hero), the narration and the dialogues. From the beginning I had an idea, to make it like a movie trailer with its features. After that I started to discuss the whole visual looks of the pieces with Geri, our art director for the project. He suggested to use the figures like roughly cut-off from papers. And I picked up the idea, and developed it further. Then the process of developing of the layout started. I used a lot of paper textures, hanged objects on ropes, and made massive strokes for everything. I tried to give it a handmade look.
Thankfully, the script left me enough room to manouver, so we had a lot of possibilities to put in some additional ideas. I made everything in linear order, scene by scene, in After Effects and Photoshop. It took me 3 days to finish, and I spent another day on polishing. I also made the sound effects, edited the dialogue/narration, and mixed with the music. The process of animating with the cute little birds took me a lot of time. Meanwhile the others were preparing the final version of the logo, which I got finally on the last day of making the video.
Some of the campers appeared in the video itself, so I photographed them in the right poses. The beautiful girls on both sides of Napoleon are Chohye and Anna (her look was precisely selected by us to match Napoleon’s style, white socks with flipflop combo.) and the hand that smacks Napoleon’s head belongs to Shubham and the iPhone is hold by Szajmon.
I hope you enjoy the video, we are already collecting ideas for the Launching Trailer, and next one would be cooler!:D (Napoleon won’t appear in it for sure, I was watching his “pretty” face too much in last 4 days).
Now we have our Pre-release Promo Video on YouTube!
Let’s Check How these awesome geeks(Napoleon and Pedro) can go out and socialize! :D
We don’t believe that’s completely true but design certainly plays a huge role in the success / failure of your app. Whether is about utility or game app - how it looks has immense impact on usability. And of course, popularity.
Obviously, we wanted to come up with an outstanding design - so Anna, Juni and Geri started to come up with the visual identity of Crowdspottr without any hesitation. As a first step of this process, they got into designing the app’s logo and icon while Ali, Shubham and Szajmon were mockuping the UI.
First, our designers made some mood-boards, simply without any limitation - they just wanted to visualize what they had in their mind about Crowdspottr. So they come up with the following:
We talked about these mood pictures a lot. Though we liked it, we just dropped the radar concept: there are so many applications - some of them great - with radars as their core visual. And somehow we felt that it was kind of ‘first idea’ and we don’t wanted to get stuck with it. We had different problems with the others as well, but mainly they were simply not suited for Crowdspottr.
We just realized, that we
- need more emotions and fun
- don’t want to use any photo-realistic elements
- want to vary the elements of the logo differently in the app website, promo video etc.
After spending hours of sketching up some basic ideas we decided on animal characters which can incorporate all aspects mentioned above. So Juni, Anna and Geri just sat back in front of their Macs. They did the following:
We talked a lot about these versions again and came up with a [mainly] common decision [except Bandi who wanted to go for the peacock, but we don’t pay any attention for him]: we choose those cute little birds… Why?
- birds are spotting everything from the air: they are aware of everything that happens on the ground
- they used to be in crowds, especially in populated areas
- the logo is variable in many ways
- cuteness rocks :]
So we just made some other versions on colours / birds and finally we came up with the [it-might-be-the-final] logo.
We just simply love it. Hopefully we’re not alone with that :]
Our next challenge is now how to create a great app design using these visual elements balanced with function.
Well, we / you’ll see!
let’s stay in touch:
How do you start to develop a mobile application, once you already have got your idea and the functionality you want start for? Read Szajmon’s post how we did!
The first step was mockuping. The developing team (Ali, Shubham and me) made mockups on paper to arrange every content and function we wanted in the application. First we found out which views do we need: detail pages for events, profile pages and several kinds of lists. We gave names to these views and created groups from them. In this way we got the main navigation elements. After that we started to draw the views. With pen and stickies we created 18 mockups for the different types of views. During this, we also rethought some functions and already had some design ideas. Initially, we had an idea of the navigation structure, which proved to be very misleading when tested on the others. After some changes we got these five tabs:
• My profile
Unfortunately we later realized that it’s not possible to gain enough data to have proper statistics, so we dropped it and added a Calendar. We have some ideas about what awesome functions to include in future versions, but for now let’s just keep it simple!
Obviously the mockups we did are not the final ones - we will keep them flexible and open for new additional ideas.