Finding what’s up and who’s up around you
In the fall of 2014, Telenav's Incubation team launched the beta version of HopOver, a map based instant friend-finder. It let you flip a switch to broadcast your availability and say what you wanted to do in the form of a "Hop", aka hangout.
Challenge
I joined the team 1 month before the launch. The initial ideation and UX had been in the process for almost a year without a dedicated UI or Brand designer. In the first iteration, I focused on creating a visual system and brand identity that would overlay the existing UX.
User logs showed very little interaction outside of users opening the map and seeing where their friends were. Creating a Hop had too many perceived steps. Hops all used the same icon on the map no matter the content, meaning you had to tap into the cards for more information. More private users wanted the ability to gauge interest with a few individuals before broadcasting what they wanted to do to everyone.
Solution
We made the update all about the people. We got rid of places and Hop cards and attached all of the information about a Hop to the people cards.
We developed a new interaction where users could gauge interest by “nudging” their friends to hang out via 1-on-1 chat.
We cut down the number of steps for creating a Hop to just two.
These changes led to an increase in Hops and overall interaction with the map.
Company
Telenav • 2014
Role
Branding
UX Design
UI Design
Prototyping
Quality Assurance
Marketing
Web Design & Development
Collaborators
2 Designers
1 UX Copy Writer
1 User Researcher
5 Developers
HopOver's branding mimics the sticker style used in the app
Below are a few transformation sketches of the logo with the updated sticker set.
Animated first-time user experience showcased core features
These images show the visual process for the user: how to see who is free, how to use the cards to interact with your friends, and how to post your status via a Hop.
The map became focused on the people
From V1 to V2, we removed places marked by the POI pins. Hops no longer ambiguously had a blue or green symbol. The Hop stickers, instead, stuck to the people who made them. At a glance, you could see who was free and what they wanted to do without further interaction.
Cards types were combined
We created one card with two parts. The top part grabbed the crucial functions of the people card, such as user name and chat call to action, while the bottom integrated the "Hop" details when available.
Updated card interaction offered a new way to gauge interest
If a friend hadn't already created a Hop, the user could gauge interest by nudging their friend to hang out. It sent the friend a 1 on 1 chat and a push notificaiton in the form of a "Wanna [insert emoji] ?"
Hop creation was streamlined from 7 steps to just 2
Users created a Hop by tapping the + in the center of the tab bar. From launch to the 100th day in market, we made broadcasting users’ intentions the centerpiece of Hop creation. Users would no longer be weighed down in the who, what, where and when. Instead, these details could be figured out later in the Hop group chat – after letting others know they were available.
