Project Summary

This project was created as the final assignment at IADT. Our goal was to identify and address an issue with the Leap Card app and validate our hypothesis through research. To achieve this, we conducted a competitor analysis and a UX audit. Once our assumption was validated, we proceeded to create three wireframes and conducted A/B testing to validate the suggested new features. Incorporating insights from usability testing, we developed a fourth iteration that reflected the findings from those tests. Despite these improvements, there is still potential for further product mapping and addressing additional user issues and requests.

Research: Identifying the user problem

A mixed-method approach was used in our study of the Leap Card Top Up experience. 20 users were invited to fill out a quantitative survey and 5 users were selected for further study based on their leap card use, transport frequency, and top up frequency. A competitive analysis was conducted to assist in framing the surveys and triangulating future insights.

Qualitative interviews were conducted with the 5 selected users, asking them 10 questions. Insights were categorised as in-scope or out-of-scope and design research was conducted to address the challenges identified. Usability testing was conducted with the 5 users and multiple prototypes, and a final prototype was selected for further testing with an additional 10 users.

Finding and Insights

Our research targeted users of the Leap Card Top Up app, with the criteria of individuals aged 28-35, representing the majority of the Irish workforce (Scriven & Gallagher, 2022).

The results:

• 80% of the participants were iOS users.

• 60% of the participants said that the top-up experience could be redesigned.

• The average rate of the top-up experience was 3 out of 5.

• The majority of users (60%) traveled 5-6 times per week

• Average one-way commute of 20-40 minutes

• Most users (60%) did bi-weekly top-ups, where as other users (40%) did monthly to-ups

• Average top-up was 20-30 euros.

Based on our research, we successfully confirmed that users expressed interest in seeing certain sections of the app undergo a redesign. To delve deeper into this matter, we carefully chose five participants for a qualitative survey, aiming to gain a better understanding of their concerns.

Interview transcripts and insights.

Based on the insights provided in qualitative interviews, we organised our research findings into in-scope and out-of-scope categories. In-scope being items that could be actioned as bad UI or confusing functions. Out-of-scope being suggestions of new features (e.g. new technologies and function issues).

Positive and Negative Insights divided into in-scope and out-of-scope

One issue highlighted was the Top-up wheel function. Users found the UI of the wheel confusing and struggled with adding a custom amount in the original UI. They also had problems with the credit card process.

The out-of-scope findings provided opportunities for future product mapping, including issues with accessibility, inefficiency and a lack of serving intended purpose. Users also identified new out-of-scope features such as low balance notification, auto top-up, stored account on the device, Google/Apple Pay integration and NFC phone tap. They also reported issues with the app being slow, crashing, having a long process, NFC bugs, and a need for a simplified login.

To assess these findings, we conducted a comparative analysis of two other European public transport apps: Oyster, based in London, and GVB, located in Amsterdam.

Oyster:

• Leap Card is the only app that uses the control wheel for price selection

• Long registration process

• Account system (card is not necessary to access app)

• Multiple cards per account

• Oyster crashed during testing

GVB

• GVB works with a ticket system instead of card top-ups

• More features then Leap Card:

  • Public transport times, maps, "my tickets"...

• Long registration process

• Account system (card is not necessary to access app)

• Monthly subscription plans

• Add payment card and use it as transportation card feature

• Tickets for attractions

• Widgets

Since Leap Card is one of the few public transports around Europe where you have to top-up a card instead of purchasing tickets, we analysed a few other financial apps to create insights about the way they portray the "top up" experience.

Financial apps top-up screens:

All applications reviewed in our analysis that work with a top-up feature uses the active numeric keyboard as a standard practice

• Once the user is taken to the top-up screen, the price ticker is already selected and ready

• Not a single app uses the spinning wheel feature to edit the values

• Every single other option would let the user type a custom amount instead of locking in pre-set values

• Revolut gave the user top-up suggestions for quicker access

• Value is the focus of the attention of the screen

For this case study, we decided to focus on the top-up wheel function issues and how we could find new ways to make that step of the process more intuitive for the users.

Design: Iterative approach overview

Based on the findings from our research, we developed three low-fidelity wireframes featuring distinct navigation solutions to address the wheel. These solutions include:

• Replacing the wheel control with a clear custom amount value input

• Providing pre-set suggestions to streamline the top-up process

• Emphasising the added value to the card through the top-up process

• Incorporating an active numeric keyboard for faster top-up

• Implementing a "repeat last top-up" feature

• Prioritising speed, practicality, and intuitive design throughout the user experience.

The goal is to improve the user experience, make the top-up process more efficient and user-friendly and validate through usability testing.

Wireframes

The first wireframe focused on emphasising the input field and providing pre-set values for convenience. The second wireframe included the addition of plus and minus buttons for ease of access, as well as a new repeat top-up feature to improve speed. The third wireframe tested an open numeric keyboard, with pre-set values integrated into the keyboard for added convenience.

These design solutions were created based on the insights gathered during research, and were implemented to improve the overall user experience of the Leap Card Top Up screen.

Prototyping

The prototypes for the Leap Card Top Up screen were designed in Figma, and interactive elements were added to enable testing via Maze. Our goal was to assess user interaction with the new features and gather evidence on their effectiveness.

After collecting insights from the user testing, we conducted an analysis to identify areas of satisfaction and dissatisfaction among users. Based on these insights, we created a fourth iteration of the wireframe, incorporating a combination of features from prototype 1 and 3.

As this was a simulated scenario, we moved directly to creating a high-fidelity prototype to better visualise the final product. We then added this fourth and new option to Maze and conducted a final round of testing with our class at IADT. The evidence collected from this final test was used to evaluate whether the final design met our initial assumptions.

Usability Testing

Five users were tested on three prototypes and then 10 new users were tested on the final fourth prototype.
Through an A/B testing format, we were able to evaluate which new suggested features had the best reflection on our users experience.

Prototype 1

Prototype 1 tasks included adding 12 euros in the custom amount field and quick-adding 15 euros in the new UI buttons. Users were then asked to rate the experience out of 5.

Prototype 2

Prototype 2 tasks included increasing the top-up amount with plus (+) and minus (-) buttons added to the UI, and selecting the repeat last transaction button. Users were then asked to rate the experience out of 5.

Prototype 3

Prototype 3 tasks included selecting the quick-add top-up amounts that were built into the automatic keyboard. Users were then asked to rate the experience out of 5.

Prototype 4

Prototype 4 tasks included selecting the quick-add top-up amount buttons and adding a custom amount with the automatic keyboard. Users were then asked to rate the experience out of 5 and providing open feedback.

Usability Testing Findings

Prototype 1

• Task 1 usability resulting in an overall score of 66, 49.1% misclick, average duration of 16.7 seconds, an average success of 57.1%, and an average bounce of 14.3%

• Task 2 usability resulted in an overall score of 100, a misclick rate of 0%, an average duration of 3.3 seconds, an average success of 100%, and an average bounce of 0.

Users rated the experience a 4.5 out of 5. Task 1 signalled that the custom top-up interactions needs further design and that the quick add button interaction was a success.

Prototype 2

• Task 1 usability resulting in an overall score of 40, a misclick rate of 74.6%, average duration of 8.2 seconds, an average success of 40.0%, and an average bounce of 40.0%

• Task 2 usability resulted in an overall score of 0, a misclick rate of 96%, an average duration of 0.0 seconds, an average success of 0.0%, and an average bounce of 100.0%

Users rated the experience a 2.8 out of 5.

Task 1 signalled that the plus and minus buttons in the UI were not intuitive to the users and the experience requires a redesign. Task 2's Repeat Last Transaction failed due to a prototype bug. Users could not end the task. However, we assume as button selection with successful in prototype 1, that users would be able to successfully select the repeat last transaction

Prototype 3

• Task 1 usability resulting in an overall score of 99, a misclick rate of 9.1%, average duration of 5.9 seconds, an average success of 100%, and an average bounce of 0%

Users rated the experience a 4.8 out of 5.

The task signalled that the open numeric keyboard UI was a successful design feature and the placement of quick top up inside of keyboard needs redesign.

Prototype 4

• Task 1 usability resulting in an overall score of 60, a misclick rate of 7.0%, average duration of 36.8 seconds, an average success of 33.3%, and an average bounce of 0%.

• Task 2 usability resulting in an overall score of 54, a misclick rate of 3.0%, average duration 5.7s, an average success of 8.3%, and an average bounce of 0%.

Users rated the experience a 4.8 out of 5.

Users were tested live, the novelty of the group activity of using the testing tool was fun and potentially distracted the users while they engaged collectively while playing with the app. We assume that this novelty created slightly lower responses in quantitative data and some users not following instructions as they were socialising. The feedback from the users voted the experience to be excellent, easy to understand and intuitive.

Conclusion

In conclusion, the usability testing results revealed that 60% of the interviewed participants preferred prototype 1, while 40% preferred prototype 3. Prototype 2 received no preference from users. User feedback indicated that they appreciated the clean user interface, the ease of inputting custom amounts, and the familiar feel of the prototypes.

Additionally, the pre-selected values reduced friction and made the experience more intuitive. Our team observations also indicated that the opened numeric keyboard and quick selection buttons of prototype 1 were more successful. As a result, we decided to combine the successful features of prototype 1 and 3 to create a fourth version as tested above.

Reflection

Based on our research, we successfully validated the need for improvement in the Leap Card top-up experience. Leveraging the feedback from our participants during usability testing, we were able to create an enhanced user experience for the product. However, there is still opportunity for further improvements not only in the top-up experience but also in other features and sections of the app.