What product design actually means TO ME
A little background
Instabridge is an app that gives people free wifi through millions of crowdsourced wifi hotspots. I joined the company when it was only a month old and worked as UX/UI designer, until the head of product left two and a half years later. I took the lead in product design, aiming to make a final iteration before our money ran out.
The new version, a total product revamp, helped the app pass 1 million downloads, and from there it took off. Now, Instabridge is used by millions of people every month and it is backed by the early investors of Tesla, Spotify, Skype, Baidu (China's Google)...
Needless to say, to create a viral app is a hardcore battle for any product designer. There are five key learnings I want to share:
1: EYE ON THE END GOAL
I like to talk about the end goal, because it prevents us from getting fixated on the means. Instead we can look up, see the bigger picture and become much more innovative.
Every product design consists of a colossal amount of trials and errors and numerous iterations. A product designer faces trade-offs all the time. But when one is 100% clear about the end goal, these difficult decisions become easier to make.
The end goal of a login is to lock down the users, but there is a price to pay – lots of pain during onboarding, which may drive them away from the app hence defy the purpose of having it at the first place. We make a free wifi app, not a dating app, if we don't get them to register before they see the app, so what? Only when it is pain-free enough, the potential users will give it a try. Only when they can see the value of the app, they will keep it. Only at that point, asking them to register will actually reach our end goal – to make them loyal users and to know how to reach them. It was a bold move, but we decided to have a "one-swipe onboarding" in order to remove all the pain at this step – literally after only one left swipe, the user comes into the app.
2: UNDERSTAND APP DESIGN FOR REAL
When it comes to app product design, it is so much more than bundling together a few webpages, although most apps are still designed that way. When we go through the streamlined and functional flows of a good app, it feels more like turning a cube than flipping pages in a book – the change is smooth and one could see the relation between two states. Much easier to use and much more likeable.
When the designer takes a holistic approach and uses animation to tie the product together organically, the product rises to another level. For sure, it is important to delight and charm. But animation is so much more than just eye candy.
Speed testing for wifi is a popular function, which we already knew from previous versions. The challenge here was how to embed it in the new design organically. Steve Jobs famously said "great artists steal". Here, the tab design from HelloSMS provided brilliant inspiration – when a wifi is connected, the user could swipe left to access a panel with speed test and other information.
3: DESIGN FOR EMOTION
When I design, I design for humans. I want to delight them and I want them to fall in love with my product. To me, the essence of UX design is to use reward and pain to fine-tune subtle feelings in order to nudge the users to engage with the app in the way you intend them to. Great apps are not just the fruit of useful functionality, they are the triumphs of psychology. Removing every little bit of pain helps, adding every little bit of pleasure helps. If you make something that ticks in the heart, you have a winner.
When we wanted to reward our top contributors, we landed on gratitude! We all know how it feels when we get a "thanks" from someone – we feel good about ourselves and possibly want to contribute more. So we designed a function to thank the contributor when you connect to a wifi they added, and the contributors can check how many "thanks" they got on their profile.
4: START WITH DESIGN PRINCIPLES
To define the design principles is one of the first steps of my design process. I always start by identifying the smart design elements in great apps, understand what made them great, and try to create something new based on similar problem-solving methods. Experience helps in this case as well as hyper-sensitive empathetic abilities, so one can quickly identify relevant patterns.
For Instabridge, those were the keywords I chose together with the team:
- Trustworthy: It should always work as expected, if not, you should know why.
- Delightful: Make it tick in the heart. (Since then, I have used this phrase again and again throughout my product design processes. Our emotions lead us in unconscious ways, and most often, we go where our hearts want to go.)
- Light: Smooth, instant. Visually, this keyword weighs heavily.
- Smart: Predict, facilitate, make it easy for the users.
I measured every design decision against those principles, which made it so easy to weigh different options and make choices.
5: BUILD A STORY THAT TICKS IN THE HEART
When the product is designed and built, one needs to tell the world about it. It really helps when the story sells the product properly and is as attractive as the product itself. If it goes well, the graphics and videos you designed will be all over the internet. So never take this step too lightly.
I felt so strongly that the new app needs a video but I had never made a full-length animation video before. In the end, the urge was so strong that I just had to do it, even though it meant I had to learned After Effects – one of the most complicated Adobe softwares – from scratch. But it turned out to be totally worth it.