Kicktrip — My Journey on Creating a Social App for Travelers
Last November I decided to travel to Equador to take surf lessons, explore the country and get inspired. As a creative person working in a Swiss Bank, I like to travel alone from time to time and open my mind for new experiences and people. I love to be spontaneous, plan as less as possible and get lost in a foreign country. It’s a great contrast to my daily business, and life in Switzerland in general.
After spending two weeks in Montañita with surfing, reading and drinking cocktails for 3$, I took a flight to the Galapagos Islands. On the first day I explored Puerto Baquerizo Moreno in San Cristóbal — a beautiful and charming village where humans and seals live next to each other.
Here’s a video I made from my trip by the way. I can highly recommend visiting Galapagos!
The idea
After spending my second day visiting Kicker Rock and snorkeling with turtles, seals and sharks I went back to my motel to plan a trip for the next day.
To my surprise, someone knocked on my door at 8pm. A young guy asked me if everything is fine with my room and if I would be interested in a day trip to the highlands. He was a student and tried to make some cash. The trip would cost a 100$. A guy from Canada was already interested and if I would join, we could share the prize. So 50$ each. I agreed and we met the next day.
When I closed the door the idea instantly hit me. This poor guy goes from door to door to ask people if they would like to join a day trip. The other guy, who was already interested, for sure was hoping that someone else would join, so that he can save some money.
There should definitely be an app for that purpose! I grabbed a beer and started making notes and sketches.
As you can see my sketches and thoughts are really messy and I’ve mixed german with english. But it doesn’t matter at all. I just wanted to write everything down and lay things out.
The basic idea was pretty straight forward:
>> Start the app
>> Locate users current position
>> Show trips in that area created by other travelers
>> Start a conversation
To come back to my example, an app like that would cover the needs of all of us. One can create a trip and the other guys can easily start chatting and arrange things. The app will help travelers to kickstart a trip in a second. Obviously I came up with the name Kicktrip, and I sticked with it.
Minimum Viable Product
When I was back in Switzerland, I asked myself: What is the minimum set of features my app needs to offer that travelers can benefit and actually use it?
- Discover/Explore
A user can see trips in his area (using Geolocation or city search) without registration. As soon as an interaction requires a profile, the user is forced to connect with Facebook. Why only Facebook you may ask? For two reasons: It sets a small hurdle for fake entries and with its API I’m able to display names and profile pics. - My trips
The user sees his created trips. He can edit them or create a new one. - Chats
As soon as a user starts a conversation with a trip creator, the chat appears in the Chats-Tab. Chats are completely separated from trips as a user may want to delete a trip but not the conversations. - Settings
The user can decide if trips should be shown using geolocation (with radius) or by city search. For example: If I go to New York next week, I can already check out what people usually do there. Then of course, there should be a notification service for new trips in my area and new messages. Finally, the user can delete his profile.
That’s it! There are three reasons I asked myself this question:
1. Focus on the main features and keep it simple.
2. Development costs. I’m a designer and can do some frontend development, but I’m not a “real” developer who can build complex apps! That being said, I would need to hire a developer and watch my budget…
3. Not overwhelming myself with too many functions and ending up not to start working at the app at all.
I had many other features in mind which will might come to life in the future. For example: Social network, Google Maps integration, Paid entries for agencies, trip categorization, advanced search etc. But I forced myself to keep it very simple for now.
User flow
I jumped right into Sketch to create a user flow. There are probably better tools out there to do stuff like that, but it worked well for me. Drawing a user flow really helped me to wrap my head around everything. I just used basic elements to put things together — but it already gave me an idea on how things could look like afterwards! Additionally, a user flow really helps a developer to get the idea and it’s easier to communicate and discuss things.
Here’s an early stage user flow I created.
UI Design
Note that on this stage I already knew that I want the app to be built using Ionic, a Hybrid HTML5 Framework. (more on that later) Therefore I made sure to use given design patterns to lower development cost and time.
My intention on how the app should look and feel like was pretty clear from the very beginning. Friendly, welcoming, adventuring. My target audience are probably people from 18–40. On the discover-tab is always a random image shown from a person from behind. (Thanks a ton to Unsplash btw.) These pictures should give users an adventure-/freedom feeling. On top of the image is the users current location displayed and right below the radius on how far he wants to see trips.
I decided to go with a simple and proven bottom-tab navigation since my app only have 4 main navigations points (Discover, My trips, Chats, Settings). I followed the design patterns for Android and moved the Settings to the right top.
All call to action buttons (add/edit a trip, start a chat) I placed between the image and content part in material design style. Finally I’ve added big form-buttons to create and delete trips in bright green and red colors.
I also wanted to make sure that the app shows something helpful if there are no trips at the user’s current location (empty state). Since I visited Galapagos, seals are definitely my favorite animals. This is why I made it my app’s mascot. ;-)
The disappointed seal suggest to start a trip by yourself. I personally really appreciate things like that in apps. If there is an empty state, I want to know why it’s empty or what might went wrong—and of course, what I can do to change that. By adding a nice image or illustration and a short info, the user already feels a little better—even if he’s disappointed at that time.
Logo
Please don’t judge me for this one. I’m not really good at Logo- or Icon design… I liked the idea of a simple lettering logo. Since I have a really bad handwriting, I just played around with various fonts and really liked how “kicktrip” looked with the Bellico typeface. I outlined it in Sketch and did some subtle kerning here and there. Voilà!
I’m quite happy with it. The logo works well within the app and on top of images. However, I most likely need something different for the app icon as the type is not really readable on this small size. I find myself often spend so much time on logo design, especially when I design something for myself. It’s never perfect!
Prototype
After I designed all screens, I created a little prototype using inVision. If you’re not familiar with it, you’re definitely missing out. It’s an amazing web based tool to easily create prototypes for apps, websites or any other application. You simply upload images and link them together to create an interactive prototype.
Prototype is no longer available.
I showed the prototype to my friends, colleagues and family without telling them much about the product or the idea behind it. This way I was able to quickly figure out where people struggle or what might be unclear.
It was obvious to see that my friends didn’t understand the concept just by clicking around. After a short explanation it was pretty clear to everyone what it’s all about. I therefore decided to create little walkthrough which will be shown when the user opens the app for the first time.
Technical Specifications
I’m not going too deep into technical specifications, but as I mentioned earlier, I wanted Kicktrip to be built using the Ionic Framework. This way it would be easy to distribute the app for iOS, Android or Windows with just one code base. (even if this is not the case now — but that’s another story I’ll probably write something about) It will also keep developing costs low (compared to native dev) and I would probably be able to make customizations by myself as I’m familiar with HTML, CSS and JS.
Ionic offers a library of mobile-optimized HTML, CSS and JS components and tools for building highly interactive native and progressive web apps. Built with Sass, optimized for AngularJS.
The data should be stored within Firebase. Firebase is a Backend as a Service and offers Realtime Databases. (it was recently acquired by Google)
Now the cool thing here is, it’s really REALTIME! As soon as I’m gonna create a trip, it will be pushed to every connected device instantly. No need to reload or pull to reload or things like that. New entries just magically appear on every phone! Firebase is also blazing fast as it offers a global content-delivery network (CDN). This was an important aspect for me. Content within the app should load real quick no matter where I currently am.
The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and synchronized in realtime to every connected client. When you build cross-platform apps with our iOS, Android, and JavaScript SDKs, all of your clients share one Realtime Database instance and automatically receive updates with the newest data.
Now a real pain in the ass were Push Notifications. My developer spent by far the most time on this I guess… We were both not familiar with things like that, so we had no other chance than trying different solutions and services.
We ended up creating a script (hosted by Heroku), which listens to changes in Firebase (New trip, Chat messages) and then triggers a push on another third party service called One Signal.
Currently in Open Beta (Google Play Early Access)
Currently we are in Open Beta for Android and private beta for iOS. (Just drop us a line at hi at kicktrip.world if you want to give it a try).
We are really proud that we had the chance to work with Google for the last couple months to be one of only 28 apps who made it to the Google Play Early Access Collection. The Early Access Program was presented at
Google I/O 2016 in Mountain View.
Feel free to test and send feedback! I really appreciate any help!
Facebook: https://www.facebook.com/kicktripworld/
Twitter: https://twitter.com/kicktripworld
Mail: hi at kicktrip.world
The Landingpage
I created a simple Landingpage (www.kicktrip.world) with a Video background and the slogan and links to Facebook and Twitter.
The easiest way to discover trips and meet new people around you.
When you scroll down, you’ll see a world map which shows all the trips being created using Kicktrip in real time. I love this really much! Just click on a pin to see what someone is up to.
Marketing Video
Personally I love to just watch a short introduction video of an app which shows me the main features in a simple way. I bought some nice stock videos from Videohive and gave it to a friend who made this cool marketing video. It is shown in Google Play- and Apple Store.
Updates
January 1, 2018
I stopped working on Kicktrip.
August 24, 2016
As I get a lot of Beta-Feedback from test users, I decided to add multi language support to Kicktrip. Currently available is English, German, Spanish and Portuguese. I plan to add more in future.
