Redesigning the Octopus Card App — UI/UX Case Study

A Series of UI/UX Case Studies of Existing Apps in Hong Kong

Image for post
Image for post

Note: This is just a concept app made in my own spare personal time.

Introduction

Competitors

Image for post
Image for post
Image for post
Image for post

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

Reviews

  1. Octopus Mobile Reader for iOS Users
  2. Feature Request: Add Octopus Card in Apple Pay
  3. Bad UX & Application Bugs
Image for post
Image for post
Image for post
Image for post

Usability Testing

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:

  1. Add your Octopus Card
  2. Top up your Octopus Card
  3. Check your Transaction History
Image for post
Image for post

1. Add your Octopus Card — Results

  • 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

3. Check Transaction History — Results

POSSIBLE SOLUTIONS

1. Add Octopus

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

Solution — I propose to bring these core features up front on the home page.

3. Top Up Octopus Card

None of its available options (like Octopus, Bank, and Cash) allows me to add money right from home.

  1. Octopus — I need to buy an Octopus Mobile Reader.
  2. Bank — I use Hang Seng Bank. They don’t have that available option.
  3. 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

“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

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!

Written by

UI/UX Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store