How We Connecting Bikers through Mobile App — Case Study KGB Community

Kelapa Gading Bikers (KGB) is a cycling enthusiast community found in 1st July 1993. 8 Adventurous souls that live in Kelapa Gading kickoff it all. And soon, their love of cycling rubs on to many others around the area and beyond. 

Presently, KGB boasts more than 200 active members with various background and different stories. They even have members from aboard, like from Finland. Although most of them use road bike, there are also some who fancy mountain bike and folding bike. KGB welcomes any man who play with their pedals.

KGB lives up to its motto “no day without cycling”. Its members arrange their own peloton for early morning ride around Kelapa Gading neighbourhood. Some would go a bit further to do the Jakarta loop or even more ambitious ones who go to Sentul, Bogor and Puncak area to test their climbing skills.

KGB also have long tour out of town to Bandung, Lembang, Tangkuban Perahu and join special events like Tour de Bintan, Bromo, Lombok, Bali and many more.

KGB members like challenges. Not content with just riding, a lot of them joined races from regional, national even international level. KGB has quite a reputation for it as well, with our members getting placements in lots of those events

Biking is about finding myself, my character, my personality. It’s the art of meditation. Refresh from the booted program that attacks my mind. Moreover, biking is on seeking faith — Bakhtiar Rakhman (Musafir Biker)

©Josh Nuttall


Get our other case studies, and we continuously provide the three infinity traces to get the infallible design. “Pre”, “On” and “Post” development.

One cardinal step is understanding the king, the client. What product we gotta build and who gonna use it.

What the client appetites to?

Here they are. First, we fathom that Kelapa Gading Bike Community is a colony who own no specific team to develop their mobile app. Exclude on one hella full stack engineer to rule’em all.

We dig up rooted then, to whom they really make the apps for, plus what’s the feature inside. The scrupulous talks lead us to the following conclusion. Alike universal business inquiries, our client dreams to make a multi-functional apps. The angel apps which provide social network, tracking GPS for biking laps, premium membership features and many more.

Thereupon, I and uxmarker shake our brain how to make the client’s wishes come true. We figure out how to make this works and winningly releases in App Store/Play Store as what we target it. After a long dialogue, we find the prime and what sort of feature we gotta release for the dead 2 months plus 2 weeks to go, to born this baby apps. The “D” day of KGB anniversary would launch this apps, and the community of KGB would start to utilize it. So we run. Work it to the mount rapidly. The thrill of the chase, the blood pumping through our veins are, challenging!

These are main features we’ve dealt for MVP:

  • As a user, I want to create account with my social media
  • As a user, I want to browse and register to the event
  • As a user, I can get information from the event I’ve registered for
  • As a user, I want to browse and read the news from community

and from who’s gonna use the app, we took closer look to the members of the community and we had done the persona such as shown below :

The persona samples above ease us to take surmise, the user of this apps are they who utilize mobile app as their main handy stuff. Age between 20 to 60 years old. Along with flagship smartphone.

Those all enough to tell us how to do. How to deliver a seamless product with prudent gimmick and micro-interaction, yet developer still get the design do-able. Developer won’t eat their time for the sake of 1 or 2 interaction fairly.


Here to go. Draw the product flow. This is one necessary thing to make sure the product runs straight on the line. So, when it comes to the time to add some features whatever in it, it won’t be any major alteration. Why? Because this isn’t startup. Not even corporate who own engineer team to do alteration everytime they want to.

One thing should bare in minds, this is not the detailed RedRoute or the flowchart. This is the highlight of general product flow. Made to be un-detail yet. This blueprint is to brief us where the main feature is, and where the next features would be added.

after we’re agreed on the general flow, yes we did the more detailed flowchart about the product at, but I’m sure you are gonna be bored, and let’s get into fun things.

Proposed Wireframe 1.0

Do not get stuck with only design things, learn other things as well. Read every day. Read everything. Don’t just read about things you know about. Learn from everything.

— Ervan M Wirawan

I mentioned here on my post before, as a designer, you need to learn lot of things. Discover more. Gain much. Master to the most. It is great if you more than capable to create alluring, aesthetic design. Nevertheless, you would never get bitter to surprise yourself that you able to do it rooted more than you’ve ever imagined. This is not just talk on your career design. Moreover, it’s your backup when you face extraordinary cases which need a quick fix.A Letter to My Younger Self About Designing A Better Life
Dear Myself, My Younger

Randomly ShowCased 1st Version MockUp

The Design Iterations

Exploring artwork as designer is indeed joyful, whatever field they work on. Letting the pen dances solely. Freeing the hand. Tuning in to the soul. While listening to favorite music. And calling them heaven.


Designer needs to control their ego. Compromise things over things. Help client solve their problem, not just let them kick the bucket. Because in business, designer does not live alone. They exist among the system.

So there’s always be a scratch in every blank paper. They are blemished by the king, the client themselves, moreover the user. The product then are yelled as a mark of collaboration. Designer gotta diminish their selfdom, not to lose, but to prove one thing, leadership. Somehow in the right time, designer are required to determine the right decision in bridging business and technical engineering to deliver the right product.

High Fidelity MockUp — v2.0

Here we bring you a scant of sneak peak to explore Kelapa Gading Bike Community Apps in version 2.0, where we able to add features such as social media, send a message, bookmark event, navigation etc.

Sorry for the low fps :p

Final word from us, we’re happy that this app able to hit the market before the original deadline, even though we have to sacrifice some interaction, but what we learned working on multiple startup, corporate and product, before.. it is okay to release the ‘Good Enough’ product, and from there we iterate little by little to make ‘Great Product’

“Big shot are the little shot who keep shooting”.

That’s how it is.

Download on PlayStore or AppStore

uxmarker was found with one mission mind: creating the best and most reliable user-centered design for our clients. Here in our HQ, we deal with a wide range of design avenues on every product platform. To ensure a satisfying product experience, our dedicated team generate data from curated user research methods and analyze them to find and fix various design obstacles. With our ingenious ideas and tested skill, we believe we can help make your products a pleasure to work with.

Keep in touch with us :

LinkedInFacebook | Instagram | Twitter | Dribbble | Contact Us

Categories: PortfolioWork

Leave a Reply

Your email address will not be published. Required fields are marked *