drupe — All contacts in a single swipe
--
A lot has happened since smartphones have transformed our lives, but these 2 main themes kept their spot: people-centric interaction; and touch based interaction. So, if that’s the case, what makes more sense than connecting these two in a transparentnost way?
When I first met Barak and Assi , drupe’s (mobile app) founders, they presented me their first prototype which they developed themselves. It behaved as a transparent top overlay on the mobile device, where the user can instantly wake up, and drag any contact from a left screen-column to a communication actions at the right column. Nothing is more intuitive to use. It blew my mind. How basic, almost completely seamless can any interaction be. I was eager to go home and test this prototype on my device, but i couldn’t because i had an iPhone and all the inner iOS restrictions and complexities. Just a couple of few years later, with millions of Android active users, ‘Play Store editor choice’ badge and after being nominated for several industry awards , the team started developing the iOS version.
In Addition, by then we already knew that drupe became a lot more than ‘just a contacts app’ and we needed to expand the UX in accordance. That meant adding contacts list, recent activity log, single contact details view and additional functionality. Internal dialer and calling screen were added later on to the blend, in order to provide an holistic experience.
Challenge #1 : Launching drupe anytime anywhere (bye bye home screen)
One bold decision we’ve made is to allow drupe to easily replace the phone native contact interaction, and hence, to make drupe ready to be launched anytime with no need for the user to get back to the home screen. The ‘floating dots’ were born. They are by default placed at the top left of the screen and are always there, simple right swiping of these dots immediately launches drupe
Challenge #2 : Thumb swipe
Ever since drupe first launched, it became a start, and was often featured on google play top charts. Still, not all UX challenges were solved. Some users kept complaining that that a single swiping cannot occur as their fingers are just not long enough. We learned that many of ’these users’ were what we called “thumb swipers” — They were often using their device with one hand only, and using their thumb for touch gestures. So we developed a thumb-swipe mode to allow them to enjoy drupe as well.
Challenge #3 : Drive Mode
The ‘swipe’ as the main gesture created an opportunity to resolve mobile interaction limitations while driving. The main challenge was to minimize the need of the driver to interact with the phone while driving, but to still allow her to initiate communications. The solution we found was to develop a“larger” version of drupe that includes less elements. Driving mode included only frequent contacts at the screen center and swiping was much easier — swipe right to call or swipe left to send voice message. this solution helped drivers make interactions with no need to take their eyes of the road.
Challenge #4 :Replacing the native phone dialer experience
As drupe gained millions of active users, the demand for a better and richer phone / dialer experience has increased, and users were not satisfied with ‘just having an advance shortcut’ to their “regular old school dialer” . drupe Dialer was one of the first capabilities to be released following drake’s initial launch, adding an extra functionality that allows users to an unknown number directly to 3rd party apps like whatsapp, FB messenger etc.
drupe also offered a whole new (and much more advanced) UX for the entire phone dialer experience — Outgoing/incoming calls, ‘during a call’ and even ‘after-a-call’ actions like quick message or like setting a reminder related to the call that just ended.
Challenge #5 :Branding a contact app
How to wrap 20 3rd party apps into a single visual language?
In addition to shortcutting embedded capabilities such as phone and sms, drupe includes shortcuts to dozens of 3rd party communication apps such as messaging (WhatsApp, Facebook chat, Skype, hangout, telegram, wechat etc.) , productivity (calendar and reminder) navigation (google maps, waze), money transfer (paypal and Venmo) and more. Each 3rd party app has its own brand, color and icon. But, under drupe UX, all must ‘live together’ on the same visual screen, a huge mess potential. In order to make things organized, the icons were “flattened” into a standard format but kept their original brand. The mess has turned into a colorful magic, which we called “candies in space”.
Swipe as visual concept
As the first production version of drupe was ready to be launched , the urge for a robust visual branding has grown — From an app icon for the play store to PR related basic identity. The main visual concept was developed around drupe’s main UX gesture — the swipe. This became our brand main building block, hinting users about the app’s main uniqueness. This was also used as a key element when designing drupe logo. First drafts emphasized the typeface made of finger “swooshes”, but they were quickly dropped as it simply couldn’t fit this concept in the exact square shape of the app icon that was required.
Eventually, a winning logo was selected and drupe was launched in the Google Play Store. This example is a great one to explain why the branding doesn’t necessarily have to be the first element of a product design in the case of mobile apps. Dealing with UX challenges first, can often inspire the visual language later on and the results, therefore, are of better quality.
After a year from the initial launch in the Play Store and following some AB testings (focused on optimizing drupe install volumes), we realised that we need to modify the icon and make it less abstract, or in other words, more related to the worlds of contacts and dialers as are represented by end users. Since performance is everything in the world of consumer mobile apps, we rolled up our sleeves and changed what needed to be changed. The numbers had talked and we knew we made the right decision. Since then, we keep testing our visual assets using advanced AB testing tools. We learn and change a lot! (And I guess “letting go” is one example)
