A SIMPLE APP's 
not-so-simple journey

 

BACKGROUND

Instabridge is an app that gives people free wifi based on a simple crowdsourced solution - if there are 1 million people sharing one wifi each, then there will be 1 million free wifi hotspots for the whole community to enjoy. More people use the app, more powerful the app becomes. It is an Android-only app for the first two years because Apple doesn't give out wifi Api. 说说结果,再回头去说怎么到这里的

I decided to jump in this project after its founder Niklas pitched to me for only 5 minutes during our first meeting at a Stockholm hackathon, when the company was only one month old and the idea then was mainly about sharing wifi passwords among friends.

We started off passionately, from our the kitchens (of course), had our fair share of 14 hour days, pulled together resources to make promotional movies, won various important awards, had our idea covered by some prestigious press and had a lot of interests from investors. Everyone agreed that they would love to have an app that saves them the hassle of asking for passwords. We not only made an app doing exactly that, but also the app was for free! Who wouldn't go crazy about it? A few million downloads would just be a piece of cake in a few months, we thought, and we were over the moon. 

The hard truth was... the first version sucked. We had the very annoying Facebook log in which was very much hated back then. The app was bulky and complicated. And most importantly, we learned that people didn't really care about the passwords sharing among friends (although they said so) It would be a nice little feature to have but it doesn't relieve a pain strong enough to be "app-worthy". Talking about killing your darlings... we had a major pivot after the first version. 

Fortunately, there was one feature that was proven to be desired by our users - sharing the passwords of public wifi hotspots to everybody. We quickly scrapped the first version and made a new one with this core function in mind and a much simpler interface.  

The second version basically has only 3 tabs. One tab to see the wifi you can share, one tab to see the wifi hotspots already shared, and the third tab to see all the wifi hotspots available for you on a map. This time, it is a simple app with only 3 tabs, and it is a free app giving people free wifi. How could people not understand it? How could anyone not love it?! 

Well, they didn't really...  
It profoundly puzzled us, and frustrated us. 

After some painful soul searching, we identified three problems:
1. Even our "simplified onboarding" was way too complicated. People don't have patience. 
2. We tried to explain things a little too much (no matter how cute the coach marks are). People don't have patience.
3. We didn't give our users the 3 most important thing when it comes to the decision making of keeping the app they just tried: instant gratification, instant gratification and instant gratification! People don't have patience. (着重)

With the head of product leaving to start his own venture, I took the role of product design lead and started to design the last iteration before our money ran out. We couldn't admit defeat yet, we still loved this idea and we still believed in its potential. For me personally, I just couldn't give up yet, before I designed a product that I could be truly proud of. 

The challenge

Like all the crowd-sourced solutions, it is almost a given that the early adopters wouldn't have instant gratification with the originally intended functionalities - we had only tens of thousands of free wifi hotspots in the database globally, the chance of someone downloading the app and connecting to a free wifi right where they were was extremely low. We needed a lot of wifi hotspots in our database in order to give the users value, but we could only get the database filled if we had a lot of users. 

A typical "chicken first or egg first" dilemma. (着重)

new concept (solution)

Obviously, the database wouldn't fill itself, so we needed to get users. In order to get users we needed to give them value. How can we give them value when the value needs to be built up by them using the app? Apparently, we needed to give them some other value than only free wifi. 

What other value could we possibly give them? 

We had discovered that Android started to allow apps to replace their native functions, e.g. replacing the native SMS function with HelloSMS. So, what if we make a much better wifi client to replace the default one? There, extra value (even if the user is the only one in the world using it) and also instant gratification (we were confident to improve the 20 year old design big time). If our users would use our app to connect to wifi every time, we would have so many more chances to urge them share wifi and fill our database too. It was like a light bulb being turned on, we were absolutely energised.

(show old design here, write: we were confident to improve this, big time.)

So, our new mission is: make the world's best wifi manager, which also gives you lots of free wifi! (着重)

Product DESIGN PRINCIPLES

To define the design principles was the first step of our new design process. This may sound "fluffy" but we actually measured every design decision against them, which made it so easy to weigh different options and make choices. 

We didn't only come up with our own key words, but we also found all the apps that were inspiring for this project (HelloSMS, Google Keep, Timely, Waze and Dots) and extracted all the keywords in their characteristics. Actually, I always start by identifying the smart design elements in great apps, understand why, and try to create something new based on similar problem-solving methods.

In the end, we found these four the most important: 

  • Trustworthy - It should always work as expected, if not, you should know why. 
  • Delightful - Fun. Tick in the heart (since then, this phrase has been used again and again during the entire process, even till today. I strongly believe that our emotions lead us in unconscious ways and often we go where our hearts want to go, without explicit reasons. One shouldn't sacrifice functions only for delightfulness of course, but if one can achieve both, it would definitely benefit the app. The challenge is always how.)
  • Light - Smooth, instant
  • Smart - Predict, facilitate

UX DESIGN - An app is not a stack of webpages

Mobile app design became a profession only in recent years after the invention of smart phones. (I know, it feels like we've had it for decades) Most designers started somewhere else, me included. When I joined Instabridge, I had 8 year web design experience under my belt, but it quickly dawned on me that I had to drastically change my app design approach - AN APP IS NOT A BUNDLE OF WEBPAGES (although most apps are still designed that way).

Because we use our fingers instead of a mouse to interact with the interface and we fiddle the phone in our hands, apps feel much more like physical products with texture, dimension and touch feedbacks. To only pay attention to the information architecture and function is not enough anymore, one needs to take a much more holistic approach and (if possible) use animations to tie the product together "organically" - static transitions are like flipping pages in a book, the change is sudden and abrupt, while animated transitions are like turning a cube, the change is smooth and one could see the relation between two states. (We actually decided on this before Material Design was introduced :) )

Also, flow is extremely important because each action is competed by a series of steps.  Every click's feedback alters the user's feelings. When it comes to UX design, I think we need to fine-tune subtle feelings in order

 

 

As you can see. We were so ready to step up the game, to give a boring utility lots of new functions and also to make it delight and charm. (着重)

Possible improvements

  • Foremost, it is easy to see that we can make it so much more beautiful and fun. The default app then was dark, heavy, decades old and extremely dull. 
  • Speed test
  • Curated wifi list - so people can focus on the better hotspots
  • Get free wifi from the community
  • Share wifi with the community
  • Thank the person who shared a certain wifi

 

 

To achieve the goal of the app being "better" than the default one, we needed the 

 

Ultimately, we are trying to invent something very simple but very good. It is controversial and it is totally innovative. It is not an easy task. It is hard to find the pain points like the conventional apps. 

Every little decision is an important decision. To have a button high or low is a crutial decision, much more important than on webpages because it is full of buttons.  

Inspirations from other successful examples are always very important in my design process. My strength lies in spotting patterns that will beautifully integrate into the apps we are making. 

Last year when we started designing the new wifi client Instabridge, I looked at these native Android apps: Google notes, Waze, Hellosms, Timely and Dots. I can quickly go through tens of apps and identify the few that really work for this case. I am also very quick at spotting the patterns and make a decisive choice. Quickly use it in my prototyping. 

Product structure 

 

We had 3 different sections and we called it "curated wifi list". In retrospect, I should have grouped the first and the third together to just distinguish between wifi right here and wifi not here. Otherwise, it is a little harder conceptually to understand it. (we always have to keep in mind to use as little brain capacity of our users as possible)

Graphic Design

 I was super excited about the liberty of designing something totally innovative and being supported by an as dedicated dev team - it would be an uphill battle technically. 

 

I had to think out of the box, it was not like we were building another price comparison site. The functions need to be useful and new, the interface needed to be original but not too unfamiliar. 

Something extremely valuable we learned from the last version is that we do have a fan base and there are people who just want to contribute to the community. The top user he went around and added more than 600 wifi hosspots in the system. We thought we got to give something back them to. At this "chicken or egg" phase, if we get a lot of fans in every city then we are all set. We thought hard about what could possibly make them happy. If they are willing to just contribute then at least gratitude will delight them. It also give them status, which is a basic human need. They have done so much for the community and they deserve to be recognised. 

I started by drawing something like this. (the form is so important in this case that I went into high-fidelity prototyping directly. ) It follows the norm in native Android app design but somehow it feels heavy. It took a few tries before I found the solution to move the top bar to be the bottom bar that suddenly the app feels so much lighter! 

I used the open and close animation to curate the different kind of wifi hotspots. Then I had a problem of placing the map somewhere. 

When it comes to color. We moved away from the blue and used much more nice colors while keeping the main theme black and white.  

It is a total innovation! 

We used persona situations. (the little drawing) Empathise with the users. 

I love one striking idea with simplicity. (although it sounds cliched.)

Extremely easy onboarding

Instant gratification

Graceful degradation 

Design for emotions - send a heart to thank the person

Curtain overlay easy to connect to captive portal

Kill your darlings.

The dev team was amazing. They learned everything to animate the app. They made all my requests possible. It was an amazing period of my life. 

User testing

We used the online testing service with real people around the globe to test the app and we also brought in people to the office. Finally the process was very smooth. Everyone understood the app easily. They know how to add wifi, they know where to find the map. They know how to test speed. We were thrilled. 

It was a bit confusing about the map. Then we added one button at the bottom to make it even more obvious. 

Marketing 

Website

To make the website. I want a really easy to understand photo. Of course, to explain the app, I need a hand with a phone. (I thought of making it less "cliche" but then quickly ditched that idea. It felt silly just to make something different for the sake of being different. The most important thing is the site's real goal) I really couldn't find a picture with the hand exactly the way I want so in the end, I decided to take my own camera and shot it myself with my colleague's hand holding my own phone. Then I photoshopped everything in. The end result is really not that bad. 

Video

I listened to about 200 tracks to find the music I like. In the end, I felt like puking. 

I felt so strongly that the new app needs a video. But I didn't know how to make animation videos yet although I watched a few After Effects videos. In the end, the urge is so strong that I decided to learn After Effects from scratch to make this video. In total, it took me about 200 hours, including quite a few weekends. but it was totally worth it. At some point, everything I could think of was just animation and I was at Phraell concert and I started to comtemplate how the animation in the background was done. Also, I wished my Saturday social gathering to end early so I could go back to the office. 

Press

We got featured on TechCrunch. Even thought our press release had its important section for our funding raising news, the journalist spent 90% of the space writing about the app itself. And we got voted on Reddit as No.1 on the Android Sub Reddit. 

Achievements

This version of the app got Instabridge about 1 million downloads. 

3 million free wifi hotspots

Average rating for this version is 4.4

Feedbacks

People love it. The average rating during the intensive period is 4.4. User quotes are as below. Some people even find it hard to accept when this "wifi client" version was changed to the new "wifi search engine" version because we got millions of free wifi hotspots already. The goal of the "wifi client" version was reached and it is time to move to the next phase of the product design. 

 

Lesson learned 

I remember half a year earlier to this, I was marvelled by the app design from Tink. I was blown away by its animation and clean design. I loved the graphs and I wish I could do something like that. Half year later, I also designed something with very modern style and delightful animation (Something maybe even hard to design since it is not just infographics). Our team made it real as well. It was a great feeling. When I look at app design again. I was feel so much more confident. 

From the core workings of the app, the visual style, down to the website and the animated promotional video. I developed as a product designer. I see apps differently now. Their UX, how they bring emotions to people, how to realise the core function and and how they fulfil the business purposes. 

People dream of making an app in a week and have it downloaded for 1 million times the week after. But that is not how it usually goes. That's why iterations are so important, and patience too. In the end, though, all those months lost in the woods were essential to finding the way forward.

Fixing it involved a colossal amount of trial and error, tweaking, iteration and excision. It was a journey with countless dead ends–a process that perhaps really was more about happening onto the right path than blazing a new trail outright.

The feeling of finally making that discovery? Relief. “There’s nothing that describes it better.” Wohlwend says. “You’re constantly worried that you’re not going to find it. It’s not like, ‘God I’m good at this.’ It’s ‘oh thank God I found it.'”

I learned a lot to become a real app designer other than a web designer. I learned to treat apps like an organic form instead a pile of tied up web pages. I learned to work on the emotional side. I learned that I am a genius designer who has extremely sensitive empathic powers. 

To have this startup journey is invaluable. It is so different from just work on a project for a few weeks. in and out. I worked on the soul of something, not just its external deco. I had a profound understanding how "the design is the functionality". It was good to get frustrated. I understand the true challenges startups face and I understand that journey we all (almost all) have to go through. I think from the users's point of view, I try to make a product that is really working for the purpose of your business. 

It took Twitter 5 years to find their formula. It took Airbnb years to find theirs. It is ok to take a detour, almost everyone does. Keep on iterating and do not give up!

I have my experiences before so it was easy for me to learn quickly. I have the holistic view and I have the tingling feeling that I want to make something organic and wholesome! 

What now

Instabridge has a completely new UI now because we have passed the critical number of hotspots in the system and it is time to be the world's best wifi search engine!