Redesigning the Octopus Card App — UI/UX Case Study
A Series of UI/UX Case Studies of Existing Apps in Hong Kong
Note: This is just a concept app made in my own spare personal time.
Introduction
The Octopus Card is the world’s second reusable contactless stored value card that can make both online and offline payments in Hong Kong. When it first launched in September 1997, it was primarily used to collect fares from the mass transit system. And now you can use the Octopus Card in every nook and cranny of the city from convenience stores, supermarkets, fast food restaurants, vending machines, parking meters, libraries, swimming pools and much more. The reason for its instant success back in the day was that payments were fast and super convenient, and has continued to make strides for widespread usage, which is perfect for the busy and fast pace in Hong Kong.
Competitors
However, in the last 20 years, the Octopus Card has remained stagnant in its technological advancement and new competitors have popped up to challenge its monopoly advantage in the area. Apps such as Alipay, Union Pay, TNG Wallet, WeChat Pay, Apple Pay and PayMe have all offered Hong Kong customers another option to make faster and convenient payments at retail stores.
The Octopus Card company realized that their new competitors have taken a snatch from its market share, that they start to offer apps and services that may try to win back those customers. We know this because the Octopus App shares a surprisingly similar user interface design to Alipay.
App Store Ratings
As I approached the Octopus Card App on the Apple App Store, its average rating was 1.5 stars with 900+ ratings. And on the Google Play Store, its average rating was a tad better coming in at 3.5 stars with 30,000+ ratings.
Reviews
When I read through the negative reviews on the Apple App Store, there is a clear pattern in how these users are complaining about its usabilities and functionalities of its mobile application. Here are the 3 different themes of the reviews:
- Octopus Mobile Reader for iOS Users
- Feature Request: Add Octopus Card in Apple Pay
- Bad UX & Application Bugs
Usability Testing
In order to get further clarification on these points, I decided to ask my colleagues (like around 5 people) around my office who has never heard or never used the app before and try to get their thoughts.
I said to them, “Before you download the Octopus Card App, what do you think you would be able to do on it?”.
To which they reply, “I think the Octopus Card App allows me to check my transaction history and to top-up conveniently on my phone”.
After watching them go through the long registration process of creating an account, they finally arrived at the home page of the app. I then follow up with some very simple tasks to see how they would navigate to that goal like:
- Add your Octopus Card
- Top up your Octopus Card
- Check your Transaction History
1. Add your Octopus Card — Results
- All 5 people were confused about O! ePay and thought the app already added their Octopus Card. Because it had the same ID format.
- 2 people clicked on the QR Code Scanner in an attempt to scan the Octopus Card, but nothing happened.
- 2 people clicked on “top up” next to the Octopus Card icon.
- 1 was able to find it hidden in the “More” tab, under “Manage Octopus”.
- All 5 people didn’t want to finish going through the process of adding their Octopus Card because the last step acts as a barrier that requires them to either buy a Sony Octopus Mobile Reader for HKD$188 or visit an Octopus Card Service Point located at the MTR (train) station. Both are inconvenient options.
2. Top Up your Octopus Card — Results
- All of them were stuck.
3. Check Transaction History — Results
- All of them didn’t know where to check.
POSSIBLE SOLUTIONS
1. Add Octopus
Problem — After the user finished creating an account, it’s not very obvious or clear what their next steps are when they land on the home page. And it’s not very clear where on the app can you add your Octopus Card.
Solution — My solution is instead of presenting the user with the home screen, they must first be asked to add an Octopus Card. I was inspired by Microsoft’s Fluent Design System of its “Connected Animation” to create a continued story from one screen to another. For this design, the same Octopus Card is seen throughout the screens in its end to end user journey.
Since there are 3 colored Octopus Cards for 3 different age groups like students, adults and elderly, I thought of the idea of only showing the colored version after the user finished inputting the Octopus Card Number.
And I also thought about the idea of using the iPhone’s NFC technology after looking at Suica (which is like the Octopus Card version of Japan), which they were able to add a physical card to their Apple Pay through NFC.
2. Manage Multiple Octopus Cards
Problem — Keeping track of multiple Octopus Cards, viewing their current balance, their transaction history, and topping up (for children, domestic helpers or personal use) is the first thing any of the Octopus Card users want to see or do. But the current app hides them all in the “more” tab.
Solution — I propose to bring these core features up front on the home page.
3. Top Up Octopus Card
Problem — Topping up the Octopus Card through the current app is both complicated and a joke. You cannot add money directly to the card because you need to add it to your O! ePay account first, which acts as an extra step towards the end goal.
None of its available options (like Octopus, Bank, and Cash) allows me to add money right from home.
- Octopus — I need to buy an Octopus Mobile Reader.
- Bank — I use Hang Seng Bank. They don’t have that available option.
- Cash — Have to go to 7 Eleven.
Solution — My suggestion is to get rid of O! ePay and replace the options with Apple Pay, Debit/Credit Card and Bank Transfer.
Conclusion
I’ve been using the Octopus Card for more than 20 years and the solutions I have provided is what I believe would make everyone’s lives a lot easier. I included.
“Technology can’t just be something that works, it has to feel like you’re talking to another human being.”
— Adobe’s Wireframe Podcast from Episode 1: Good Design is Human
I really like this quote above and a lot of the apps I see in Hong Kong functionally works but the reason why they all receive a 1-star or 2-star rating is that the UI/UX sucks.
The next step of the design process would be to validate these proposed solutions through user testing, learn what are the problems, and then make more reiterations to further improve the user experience.
#MadeInAdobeXD
The entire Octopus Card app concept was designed in Adobe XD. I had a lot of fun using the Auto-Animate feature which allowed me to create these slick-ass animations in just a few hours. 🤟🏼
Thanks for reading! If you like the article, please give this article 50 👏🏼 which would encourage me to write more case studies.
What other apps in Hong Kong do you want me to write case studies about? Feel free to comment below.
And feel free to hit me up at stevoleung@hotmail.com or connect via LinkedIn or Dribbble. You can also check out my Portfolio Website. Ciao!
