The First Major Mobile App Revamp of a 4 Year-old Start-up (Part 2)

This is a continuation of The First Major Mobile App Revamp of a 4-year-old start-up (Part1)

For the past 2 years before the revamp, the bottom tab was used as the primary navigation. The expectation was that the content in all tabs would get good exposure due to the interactive nature of the tab navigation. We tried and tested various ways to bucket the content to fit into different tabs. However no matter how the tabs were redefined, the majority of the interactions still occurred in the home tab. Furthermore, people were complaining that it was difficult to find what they were looking for in the app.

Content structure we used in an earlier version. L2R: Home top, Home bottom, Stores
Content structure we used in the last version before revamp. L2R: Promo, Discover, Home

Removing Bottom Tab Navigation

It was clear that the tab navigation system was not working, as most of the users only stayed on the home tab. . If the users tended to scroll only on a single screen, should we make better use of this one single screen? What if we strip away the tabs entirely?

Content in ShopBack app

Taking a step back to look at the things present in the app, we made the bold move to remove the tabs and rethink the way of content discovery.

Redefining the Info Structure

ShopBack V2: Removing bottom tab

Greeting Card

We introduced a Greeting Card on top of the new home screen, which delighted users as the first thing they see when they opened the app is how much money they have saved so far. Every time Lulu/Bob open the app, they get a glance of their total Cashback, as well as any new Cashback updates, with the option to see more details.

Quick Access Panel (QAP)

Most frequent user journeys:

  • Check Cashback balance and new Cashback updates
  • Go to merchants they frequently visit
  • Use lifestyle services: compare taxi prices, find movie showtimes, order food delivery, top up mobile balance
  • Search for merchants

These most frequent flows need to be made clear and smooth, only then will we be ready to induce more complex features. The most frequent actions should be accessed at your fingertips. Every time Lulu/Bob open the app, they will see the QAP expanded, which covers 80% of their repeated needs. If they feel like discovering something new, they can simply swipe down or tap in the background to dismiss it.

Quick Access Panel

Even though it has become a convention on mobile to have the search bar at the top, as it is more eye catching. However, although top half of the screen is friendly to the eye, the bottom half of the screen is friendly to the thumb. We decided to take the risk to move the search box to the bottom of the screen and as part of the QAP.

In our prototyping test, we observed that most users find it unusual to see the search box at the bottom. Some didn’t notice it at first; it was only after a few taps they become comfortable and start to like the convenience it brought. With some subtle tutorials and a little time to grow users’ habits we believe the this change would make it more efficient for users to access search.

Wall of Discovery

When Lulu is in a good mood, she loves to do a little bit of discovery in the ShopBack app. Everything can be accessed from the same screen within two scrolls: merchants, campaigns, deals, blog articles. Our operations team work hard to curate these content, and more often than not, they need to promote different stuff at different timings. Each type of content is built as configurable components that can be turned on and off, moved up and down in the wall. This configurability makes it flexible for us to plan when and what to show to the users.

Wall of Discovery: Content modularised

New User Journey Optimised

If the user is new to ShopBack and Cashback model, they would be very confused if they see the same thing as returning users. A few key things we need to educate new users include:

  • How does ShopBack work?
  • What merchants can I use ShopBack for?
  • How do I make sure this is not a scam?

If these doubts are not answered, we have fail to establish a trusted relationship with the new users from the beginning. Because this is a money related application, new users are more wary and would delete the app if they encounter annoyances or perceive a lack of transparency. They might also leave bad ratings on the app store, and spread the news of how ShopBack is a scam. We learnt the lesson the hard way with the previous versions.

Progressive Education

Education is essential in new users’ experiences. We do not want to bombard the users with long tutorial flows. Progressive education refers to the practice of progressively educate the users as they dive deeper into the app, showing only relevant tutorials based on the context they are in.

The journey begins when new users download the app; they are directly taken to the home screen, greeted by a different message on top of the screen.

New users: non-logged-in Users + users who have not earn any Cashback

Instead of seeing Total Earnings: $0.00, new users see a welcome message with a button linking to a detailed on-boarding tutorial. To make an analogy to a real life situation, when you meet a new person, you go “Nice to meet you!” followed by telling each other who you are; when you meet an old friend, you will catch up on past experiences that you guys share.

New users care more about the width instead of depth of what ShopBack offers. We configured the wall to show merchant categories and list of most popular merchants in the first fold, followed by campaigns, deals and blog articles as they scroll. By prioritising merchant categories we tell the user that we cover a wide range of merchants. By showing the most popular and recognisable merchants, we are able to make meaning connection by showing merchants they can relate to.

New users continue to see these configurations until they receive Cashback for their first transaction, which is the time they have created an account, and have gone through the entire Cashback flow.

Redirect is a tricky term for new users. It simply means to open a merchant’s website/app from ShopBack. Cashback will be tracked after the user finished transaction through a redirected shopping trip; it could take up to 48 hours for the Cashback to be reflected in the user’s account. We realise these can be better explained when the user reaches the relevant steps.

Progressive education

The first time the user enters a merchant’s website in ShopBack app’s in-app-browser, a message is shown explaining what is going on. After the user exits the merchant’s site for the first time, another message appears explaining what could happen next. These tutorials are easier to be digested if shown in the relevant context.

The entire redesign project, from ideation, brainstorming, wire-framing, prototyping, iterations, user testings, to finally going into development took months. Initial data is indicating a positive response, but the quest for a a better user experience is a never ending battle.

Take a spin at the new app. The app is available on Google Play Store and iOS App Store.

ShopBack 2.0

Special thanks to

  • people who have given me advice and feedback for this article: Yingying (PR hero, who writes excellently ), Raph (PM boss), Adrian (super intern now a startup cofounder), etc.
  • Joel Koh for helping me with my bad gramma

Have different opinions or wanna discuss more on the topic? Tweet Me

Or find me on Dribbble | Linkedin.