Making Bill Payments Easier With The Redesigned AXS Payment App — A UX Case Study
How do you improve a recurring experience as inherently undesirable as our payment of bills and loans?
This article is the third entry in a series of retrospectives written to aid my growth as an aspiring UX designer enrolled in General Assembly’s User Experience Design Immersive. I look forward to hearing your thoughts about a mobile payment platform you use often, or any advice on UX Design in general, so do leave a comment in the section below and we’ll connect!
Industry Type: Digital Payment (Mobile)
Team Member(s): Jen, Lynn, and I
Project Duration: 2 weeks
Skills Exercised: Heuristic Evaluation, Content Audit, Competitive Analysis, User Research, Information Architecture, User Flow Mapping, Customer Journey Maps, Wireframes, Prototyping, Usability Testing
What this article covers:
- Introduction
- Discover
- Define
- Design
- Test & Iterate
Introduction
“Paying bills is an unpleasant experience for me. I hate paying bills.”
This was a feedback received during one of our initial user interviews, and our follow-up questions led to this key insight — As consumers (in any shape or form), many Singaporeans will gladly spend money on things they enjoy, but the monthly bill statements that soon follow come as an emotional burden.
This insight neatly framed our design challenge for this project.
How do we improve an experience that is undesirable yet unavoidable?
To fully understand the problem to solve, we first looked at the ways through which Singaporeans have commonly paid their bills. Before AXS launched their first kiosk stations back in 2001, people had to head down to the individual banks and government agencies to pay their credit card and utility bills.
This hassle was removed with the launch of AXS’ kiosk stations. AXS’ partnerships with the aforementioned banks and government agencies offered the masses a one-stop platform on which they could make all their bill, loan, and even fine payments.
Since 2001, AXS has steadily grown its fleet of kiosk stations to over 900 island-wide, with the many services on offer rising to 150. Besides the payment of bills, loans, and fines, people can now also perform transactions for certain airline tickets, school tuition fees, and even public amenity bookings. At the same time, AXS has expanded its platforms to include both web and mobile services in 2013.
However, confronted with the challenges posed by tech disruption, many of AXS’ bank partners began developing their own mobile payment products which come with similar functions. Today, an increasing number of Singaporeans turn to their own bank apps for their bill and loan payments. Banks like DBS even have mobile apps (i.e. DBS Paylah!) which support peer-to-peer transactions and cashless payments for a variety of lifestyle choices.
As a result, AXS’ own services now face the increased pressure of becoming obsolete. It needs to innovate to remain competitive in a society of arguably unlimited choices.
Discover
Brand Audit
With a brief history of AXS established, we dug deeper into its touchpoints and services.
Through the brand audit exercise, we quickly learned 3 lessons:
- AXS’ 3 platforms do not have a consistent interface to provide users with a seamless transition between devices.
- Some of the 150 services offered on the kiosk station are not found on the mobile platform.
- The user experience across the platforms is mainly transactional in nature and it lacks any form of personal connection.
Heuristic Evaluation
Because our end deliverable is a redesigned mobile app, we evaluated the functionality, navigation, and design of the existing AXS Payment app based on the LEMErS Framework:
a. Learnability
b. Efficiency
c. Memorability
d. Error Management
e. Satisfaction
In summary, we found issues with all 5 metrics of the LEMErS Framework, resulting in an unpleasant user experience which worsens the already undesirable activity of bill payments.
Content Inventory
The team then ran a content inventory exercise for the existing app, and combing through its various layers of services validated our earlier evaluation that the app lacks a refined Information Architecture (IA).
For instance, if a user wanted to pay his Housing Development Board (HDB) season parking fees, he would find the same information through the following paths:
- Home>eServices> HDB > Season Parking Charges
- Home>Bills>General>HDB>Season Parking Charges
- Home>Bills>Season Parking>HDB>Season Parking Charges
This confuses the user’s journey when the process of paying bills should be as straightforward as possible.
Brand Positioning
We next compared the branding of AXS with that of other mobile payment companies. The main competitors include DBS Paylah!, SAM by SingPost, PayPal, and GrabPay.
The visualisation of our findings made it clear that the AXS app needed to elevate its security standards, UI design, and usability in order to stay competitive in today’s market.
User Research
With a clear direction in mind, we conducted user interviews with 7 people who are aware of the AXS Payment app. Our questions took into account their living arrangements, pain points faced during a typical bill payment process, and their perception of the AXS app, if any.
Although their responses varied across the board, we could draw 2 main observations from the user interviews:
- Many users own multiple credit cards because of the different incentives offered by the banks. They also prefer to pay their bills in one go instead of doing it separately via the different bank apps.
- The older generation (people in their 60s or older) relies on the physical AXS kiosk stations for bill payments because they are used to the 3-step process of scanning a bill, inserting an ATM card, and paying. They also struggle to catch up with rapid technological advancements.
We then made use of an affinity map to organise and establish the relationships between the gathered data, in order to extract insights which helped framed our problem statements.
Define
User Personas + Customer Journey Maps + Problem Statements
Building on all our findings from the user research phase, we crafted User Personas for the app’s primary, secondary, and tertiary users, along with their respective Customer Journey Maps and Problem Statements:
Primary User Persona — Jordan, the career-driven professional
Secondary User Persona — Anita, the eager millennial
Tertiary User Persona — Roslinah, the patient retiree
Feature Prioritisation (MoSCoW Method)
To avoid Featuritis in our redesign efforts, we made use of the MoSCoW Method to prioritise the features the app must have to address the problems our primary user persona faced:
- A one-stop platform to pay all sorts of bills, loans, and fines — hassle-free way to pay multiple types of bills at once.
- Payment progress notifications — do not want to worry about outstanding payments.
- Enhanced security features (Touch ID and OTP-requirement) — focus on the things that matter (ie. family, friends, and career).
In addition, we felt that the app’s scanning feature should be highlighted further as it enables users to skip the process of keying in account details manually. This again supports our goal of making the app as hassle-free as possible.
Tree Testing + New IA
We also drafted a new Sitemap for the app’s different layers of content. In order to validate our design decisions, we proceeded with a tree testing exercise by crafting 6 tasks which aligned with Jordan’s goals.
We learned that people struggled with minor issues in our Sitemap, namely the location of content (i.e. information for payments to NParks) and definition of terms (i.e. Housing Loans) used. We made further revisions before finalising the IA of the redesigned app.
Design
We translated all our design decisions thus far into wireframes in order to quickly visualise the content hierarchy and flow between the different screens that Jordan would encounter while fulfilling his user needs.
These wireframes served as the foundation on which we built when we designed our first clickable prototype on Sketch and InVision. We repeatedly bounced ideas off each other with regards to how we each felt the screens should look and work. Through several rounds of testing between the 3 of us in the team, we finally produced a version 0.1 of the clickable prototype which we felt was ready to conduct Usability Testing with.
Test & Iterate
We crafted several task scenarios for the Usability Tests based on the user flows that Jordan would take. Unfortunately, the results we received were not as positive as we had hoped, because many users went down an incorrect path to obtain the information they wanted.
Nonetheless, the results also presented with an opportunity for iteration and improvement. We turned to another 2x2 matrix which compared a feature’s importance against its ease of implementation in order to prioritise the changes we had to make while going forward.
Because time was a limited resource, we focused on rectifying only the issues which had the largest impact to us achieving our design goals. These issues ranged from minor ones, such as unclear and inconsistent labelling (points 2 and 4), to more major ones like a missing confirmation page during the payment process (point 9).
Receiving all these user feedback was important as it helped inform the next iteration of our prototype:
Way Forward
Before our project presentation day, we ran the updated prototype through a quick and informal Usability Test session. The feedback we received was that the information on the “Transaction Success” screen relating to the processing time of up to 2 working days on the banks’ and government agencies’ end should be made a lot clearer through a possible use of infographics.
We all agreed it was a noteworthy suggestion which will certainly be included in our next iteration. At the same time, we ought to also consider the other points in the feature prioritisation matrix that were missed out on before conducting a new round of Usability Testing.
Lessons Learnt
A redesign is not necessarily an overhaul
When we were reviewing our redesign efforts, we realised it was not always about adding all the new features we could think of. More than being selective, it was about being discerning enough to tell that the user experience of using the app could be improved simply by enhancing the existing features.
For instance, the existing AXS app already has a scanning feature. However, given that it was like an “express pass” which allowed the user to bypass the hassle of manually keying in his or her account details, it did not make sense that it’s only accessed several navigation levels beyond the landing page.
We thus made the decision to highlight the scanning feature straight from the landing page, giving users the opportunity to complete their payments as easily as possible.
Anticipate. Anticipate. Anticipate.
Working on this project also taught me a great deal about conducting more effective user research and usability tests in order to gain as much insights as possible.
Moreover, it was on the project presentation day itself that I learned, perhaps, the most important lesson yet. Explained by our instructional team (shout-out to Manny!), it was about anticipating tough questions asked by stakeholders when we prepare the slide deck. Given that it was a redesign of an existing app, there is a significant chance that the proposed changes may not sit well with certain stakeholders.
In situations like this, the best remedy would be to ensure that our design decisions were backed up by solid data from user research. It not only shows that you have prepared adequately, but it speaks well of your maturity as a designer. This lesson will stick with me for a long time to come.
Conclusion
This brings me back to very first question I raised at the start of the article:
How do you improve a recurring experience as inherently undesirable as our payment of bills and loans?
I cannot say that I have a definite answer after doing just one project, but I believe it begins by understanding the user’s pain points before attempting to redesign a feature. And that translates to allaying concerns about the app’s security, providing a hassle-free process from start to finish, and taking on the legwork for the user so that they may focus on the things that matter.
Thanks for reading this article! Do leave a comment below and we’ll connect!
