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

Lingjun
Lingjun
Sep 4, 2018 · 7 min read

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

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

Quick Access Panel (QAP)

  • 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

Wall of Discovery: Content modularised

New User Journey Optimised

  • 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

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.

ShopBack Engineering

Building the Smarter Way to Shop

Lingjun

Written by

Lingjun

Product Designer at Shopback. Wanna learn a bit of everything XD. Checkout my work at lingjun.space

ShopBack Engineering

Building the Smarter Way to Shop

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade