7-Eleven CLiQQ App: Usage and Redesign Exercise
Ever used an app and thought: "What if I redesigned this for fun?"
A few weeks ago, I had to pay some administrative fees for a renewal of an expired passport. There are several channels to pay that bill, with one being 7-Eleven - its top advantage being that you can pay it at any time of the day, even if it’s late in the night. When paying bills at 7-Eleven there are two methods: via the kiosk or the app, but the latter is the only one practically used. The kiosk, anecdotally speaking, has always been down every time I went inside. It’s not even because of pandemic hardships, as I recall this problem persisting as early as 2019. I would sometimes see people showing their phone screen to the cashier in order to pay their bills.
The CLiQQ app
Back to the paying administrative bills story: I’ve installed the CLiQQ app once again because one of the payment channels stated in the bill had 7-Eleven as one of the partners. As for why I didn’t just use GCash, even though the Department of Foreign Affairs (DFA), the agency responsible for passports are one of the billing partners, to make the payment easier for me instead? I overlooked that thought while looking at the payment channels - it does make for a good article topic.
Upon opening the app, the log in screen also functions as a sign in screen. Entering an already-registered number in this screen would obviously give you your existing account data, while entering a new number would then function as a new account creation. The latter does not get a registration onboarding like what you would expect from most other apps. After entering a number, the verification code screen would appear. The numeric keyboard is integrated within the app, not with the device’s selected onboard keyboard.
After going through the sign in and verification code screens, we’ll be greeted with the main screen - a barcode for the rewards points, a counter for the rewards points accrued, eight function buttons, as well as an account button on the top left. For people using the app for rewards points accumulation, the main screen’s barcode will see heavy use. For people who pays their bills at 7-Eleven, then the Pay Bills button would see most use.
Though the button is called CLiQQ Wallet, it’s branded as CLiQQ Pay on the actual screen. Here the user can use their current balance in-app to pay for products or load-in their balance. Also present are a send and receive function, similar to what you’ll find in e-wallets such as GCash and Maya (formerly PayMaya).
The Pay Bills section have services split into 17 categories, from Cable TV to Telecoms to Government Services. Users also have an option to save a specific service which would then be pinned on the top of the screen.
The Rewards Catalog screen is just a regular rewards list which contain several deals or promotions of participating products.
The Transaction History screen is split into three parts, any transactions made to or used CLiQQ Points, CLiQQ Pay, and Bills Payment. Clicking on a card would send the user to a Transaction Slip screen of the selected billing information, showing the transaction type, the billing partner, reference number, transaction date, as well as if the transaction is still valid for currently unpaid ones.
The Bills Payment screen is plain and straightforward, showing the specific biller’s description and inputs for either an account number or reference number, account name, as well as the amount to be paid. The confirm button is a center-aligned check image.
A redesign exercise
My payment to the DFA was straightforward and was completed quickly, which is what I could also describe this app - utilitarian. The current CLiQQ app is what embodies the saying “it gets the job done”. Despite this, the design can somewhat look convoluted - the UI seems like a mish-mash of old and somewhat new. I’m not saying that I made a better one, especially because my course is within Computer Science where my experience in design comes from my hobby of making app UI concepts as well as my part-time job. What I do want to do with this exercise is to harmonize the design, integrate the 7-Eleven brand colors a bit more, and to make it look somewhat clean.
The redesign mockups
The first thing I did was to get the current 7-Eleven brand colors incorporated into the mockups as well as to make it an accent across the design. The buttons on the sign in screen had been harmonized into one size, with the Continue to Mobile button a punchy orange to make it stand out on the green background.
For the Verification Code screen, I made the phone number the code is being sent to in a bold weight, the four textboxes have been made slightly bigger and would display actual numbers in this version instead of outlined Xs.
As for the main screen, I made the design into the modern trend of placing data into cards or card-like buttons. This can be seen with the sample barcode, now highlighted with an accent of the 7-Eleven brand colors. The points card has been highlighted to give it a bit more importance - the points counter receiving the large, bold text as emphasis. The four cream-colored buttons are what I would assume to be the possible hotspots for use as this may be the main function of the app for a lot of people - CLiQQ Wallet, Transaction History, Pay Bills, and Buy Load. Four smaller buttons are under it, signifying the app’s secondary functions. CLiQQ Grocery, the online catalog shopping portal, has the same height as the secondary buttons, but takes up the entire horizontal space to signify its importance to the CLiQQ brand and selling point.
In here, I decided to incorporate a card motif, akin to cards in a wallet, in the design for the CLiQQ Wallet screens as well as other screens which have the essence of having to use a wallet, such as: Pay Bills, CLiQQ Rewards, and the Transaction History.
For the CLiQQ Wallet, branded as Wallet&Pay in my mockup, I made the current balance the biggest font size and importance at the hierarchy. This is then followed by the total accumulated points, and a button to go the transaction history so that the user doesn’t have to go back to the main screen in order to access their previous transactions list. The buttons in this page has also been embiggened, with the Send Money and Request Money highlighted as to slightly nudge the user to use the CLiQQ app as an e-wallet.
For the Pay Bills screen, the pinned billers function would now redirect to a separate page that only showed the specific pinned ones as to not clutter the categories with specific billers in one page. The buttons retain their positioning with the current app, with three buttons per row.
For the CLiQQ Rewards screen, I’ve incorporated a search bar as to let any user find any deals or promotions by keywords should it be necessary. Aside from the card style used here, there are now specific category buttons on the top as to reduce excessive scrolling needed to get the deal desired.
For the Transaction History, I just decided to clean up the formatting of the original a bit and highlight the paid amount.
For the Transaction Slip, I decided to reuse the barcode design found on the main screen - highlighting the barcode’s importance for the bill transaction. Below that, the total amount required has its font sized enlarged and in a bold weight. The transaction status gets the same treatment, albeit in a slightly smaller card. The supporting transaction information is also given its own card for things such as the biller, the transaction type, as well as the reference number. I’ve also given the date of transaction its own separate card, just above the card for the expiry date of the transaction slip should payment not follow through.
The Bills Payment screen for the biller gets a bit of a makeover, the logo of the biller is now shown on the left side of the top portion, with the right side being the biller’s name and its description. The accent colors also return on this screen to act as a divider. The textboxes have been enlarged as for better readability and clarity.
Some closing thoughts
Like I said before, I’m not saying that my redesign mockups are the better version. I think of this as a what-if concept, such as: “What if they incorporated the brand colors more?”, “"What if they made the buttons bigger?”, or maybe “What if they made the textboxes bigger?” It’s a nice thing to ponder, redesigning an app that many people use in paying their bills, getting rewards points, or claiming said rewards, into something more than just another tool to get by. These designs would definitely not win any awards or the sort, but it does bring greater appreciation for a rewards app that was there when I needed to pay for a government service in a pinch.