Juhi Chitra
Product Designer
h.png

Hike

Designing for growth at India's fastest growing startup.
Feb to Oct 2015

 

Client

Hike is a cross-platform messaging app quite popular in India, with over 70 million monthly active users—over 80% of which are under 25.

Brief

Help design new features and optimise old ones to drive growth to the platform.

Constraints

Based on the Indian user-base, we had to design with the lowest-end Android devices in mind.
___

We optimised everything for 2g and slower network speeds.
___

We needed to keep the app download size to a minimum and to be able to quickly test and update the features based on data, so most of the features were implemented as web-views, micro web apps, and HTML blocks. 

 

 

Hike Wallet


Why a wallet in a chat app

While Hike is primarily a messaging app, a large part of the user-base consists of young Indians who are using the internet for the first time through their smartphones. As such, they have little awareness of—or loyalty towards—products in other online sectors. Hike taps into this opportunity by introducing the users—who come to hike for chat—to other verticals, either through partnerships or in-app features.

Most of these features start out as experimental and many have become a big hit with the users. Hike already has in-app games, a smart assistant, live cricket scores, coupons, local news. 

___

Initial concept

Hike Wallet (or Rewards) is part of the same strategy. There already existed a basic feature where inviting friends to hike earned you free SMSs. 

 

___

Initial idea was to mobilise active hike users to do activities that would increase their engagement within hike (or help hike in some other way) and then reward them with points, virtual cash etc.
___

 

However, over the course of building it, the idea went through a lot changes in direction



Team and my role

I worked with Pathik Shah, the Head of Growth, and Rachit Jain, a UI/UX Designer with the Growth Team. Pathik explained the initial concept to us, and with his help, Rachit and I sorted through the various moving parts, developed a coherent structure, sketched, brainstormed, sketched some more, finalised the flow and the structure of each screen. With a lot of help from Rachit and Pathik, I designed almost all the mockups and interactions using Sketch, Marvel and Pixate.


Information Architecture

Rachit and I started with some basic research on levels, points-systems, wallets, gamification and virtual marketplaces. We also looked at a lot of existing products and how they have implemented these features.

We brainstormed about the high-level details. We divided all the parts into sections that could translate into the structure of the micro-app and would make sense to the user, as opposed to from the business point of view.

Grouping each sub-feature into sections.

I did some quick sketching to put down possible ideas for the structure. We discussed the architecture and each sub-feature in detail. 

Quickly putting down the first ideas

 

___

We defined the micro-app as a marketplace to buy varied virtual (and some real) goodies using virtual money earned by either using hike or doing some activities.
___

 

At this point, we created the general user-flow:


Paper Wireframing

We tried a lot of different approaches, particularly for the home-screen of this micro-app. We realised that the goodies in the Market were going to be the main hook for users. So instead of just providing navigation to Market and Earn sections on the homepage, we decided to also pull out the most popular items from each section and feature them. We also went into detail for each section.



Marvel for the flow

After a lot of sketching we settled on this outer flow.

This is a live prototype. Click anywhere inside the phone to see all links on that screen.


Mockups

Once we were fairly confident about the structure, we moved on to Sketch.

home

I started with reproducing the vertical cards from the wireframes within the market and Earn sections but quickly realised that the item title and category needed more room as these items would vary widely—the first could be a sticker-pack, the next a paperback book, and the next an SMS recharge pack—so truncated titles and category names would lead to confusion.


Iteration 1 with vertical cards


Card-swiping animation made with Pixate


Iteration 2 with more room for title and category

___

Earn

The Earn section presented a challenge—each way of earning (survey, event, bug…) could have one or multiple instances for different users, plus I wanted a way for the user to quickly access the status and history of his submissions for each item, which led me to the layout below.

We were still trying to come up with a simple icon for ‘hike cash’. The ћ was meant to be a placeholder.


Inside Earn section


History of transactions

___

Some ways to earn


Form to report a bug


User's bug submissions


Event details


User's attended events


Taking User Feedback

We made a Marvel prototype for all the interactions and showed them to some users.

___

The biggest learning was that on the home screen, most users thought the items in the Earn section were also going to cost money instead of earning them money.
___

Because the two cards looked so homogenous, they did not see Market and Earn as distinct sections with different types of items.

Since we already knew that the marketplace was the hook for users—only if they liked things in the market would they be incentivised to earn cash—we decided to show Market items upfront on home and collapsed Earn into a prominent button.


Before user feedback


After user feedback

Another round of feedback assured us that this version was much more understandable for users.


Marvel Prototype

After more polishing, we built a simple prototype in Marvel.

This is a live prototype. Click anywhere inside the phone to see all links on that screen.

To start, click on the 3-dot menuin the top-right and select the last option ‘Hike Wallet’.


A Major Change in Direction

Before the project could go into development, some changes came into effect in hike's business timelines which affected our project.

___

Our project morphed into ‘Talktime Rewards’. Building a marketplace was pushed further in the future and most of the ways to earn were culled.
___


There would now be only one way to use the cash—talktime recharge—and 3-4 simple ways to earn cash—inviting a friend, importing a WhatsApp group, levelling up etc.The second big change was the shift from building a web-app—embedded in the main native app—to web-views which would later be converted to a web-app. Without going into further details of the process, here are the final mocks.

Because this was now just web-views, which would soon be converted into a micro-app, we had to contend with the double title bars and double back buttons which I realise are a huge UX issue. I wish I had pushed more to at least have the top arrow changed to a cross.


Home


Redeem earned talktime

 


Flow for redeeming talktime

 


User's inflow and outflow log


Comfirmation screen

___

Marvel Prototype

There's a combined prototype for this and two other related features—levels and labs. Look after the next section for the embedded prototype.

Jump to the prototype ›


Rewards/Extras

When Hike Wallet was changed to a webview, it was moved to a section of the app where all the experimental features start out and are later moved to better entry-points after being iterated upon called Rewards/Extras. I redesigned this and restructured it into 3 sections—Talktime Rewards, Ninja Levels (which I also designed) and Hike Labs (all the other experimental features)

___

Ninja Levels

Levels were closely related to the Rewards system. Using hike more and more levels up the user. They start out as a White Ninja and move up to become a Blue Ninja at Level 11 and then Black Ninja at Level 101, with an endless number of levels. Higher level users get access to special features and other rewards. 

Since the number of level was 100+, it didn't make sense to show every level in a list. I went with just highlighting all the special milestones that the user can is yet to achieve.

See the complete flow in the prototype below.

___

Hike Labs

 

Marvel prototype

of Talktime Rewards (Wallet), Ninja Levels and Hike Labs.

This is a live prototype. Click anywhere inside the phone to see all links on that screen.

___

These sections are in development and will be launched soon.


Hike 7 Day Challenge

This was a straight-forward way to incentivise the less-active users to use hike more and discover different features in an attempt to increase their engagement and help them see the value of the product.


Exploring ideas


Final mock—easier to understand


Natasha

Natasha is an A.I. chatbot inside Hike. She can hold automated conversations with users plus give answers to pre-programmed hashtags. We added the ability to have her reply with rich-media cards when asked about certain types of content. Eg., if you say “#movie godfather” to her she replies with a little card with information pulled from IMDb.

 


Screenshot of implemented card


 

Live Product

Most of the work I have done at Hike is still in production. But you can still check out the apps or the website at hike.in.