TFI Leap Card

Project Overview

The aim of this project was to redesign a mobile app, to create a better user experience. With 1.96 million apps available on the Apple App Store and 2.7 million apps available on the Google Play Store, there were plenty of options to choose from.

According to Nielsen (2016), the average mobile phone user spends more than two hours a month using travel apps. This is why it made sense to choose from this category. The choices were narrowed down to Dublin Bus, FREE NOW, Irish Rail and Leap Card. Through informal research via conversations with friends and family, it was unanimous that the Leap Card app was poorly rated and would benefit from a redesign.

For this project, the five-stage Design Thinking framework developed by Stanford d. School was adopted (Raz, 2018). These five stages are Empathise, Define, Ideate, Prototype and Test, which will be referred to throughout.
‍

Define

The define stage of Design Thinking, involves stating the users’ needs and problems. The team came up with individual problem statements and a decision was made to choose the problem statement that best encompassed the frustrations of each of our personas. The problem statement was:

‍How might we create a system which gives users more control over managing and paying for public transport?

‍

Ideate

Visual Design
‍The next step was to design wireframes for our flows. Below is the initial wireframe for my groups section of the app.
‍

Following on from this, it was time to move to Figma for our first iteration.
‍

Unfortunately when it came to merging our designs, it was evident we all had different design ideas (as seen below). A major downfall for our team was not choosing a design system and colour palette prior to starting the designing process. If we were to complete this project again, this decision would be one of the first to be made.
‍

For the design system, we decided on Material Design. Material Design is known for subtle skeuomorphism, which sets it apart from flat design and makes it more intuitive for many users. Although there are plenty of pros to Material Design, I believed there was a limit to the effectiveness of our Leap Card branding due to this design system. Furthermore, I felt our design was somehow associated with Google.

Additionally, some team members wanted an interface similar to the Revolut app. I noted that although Revolut is a well-designed app, we should not be trying to replicate a banking app. I felt in our first iteration, a lot of aspects came directly from Revolut, which were not always relevant to us and might have hindered our creativity.

For our colour palette, we wanted to maintain some of the original colours of the current Leap Card app to maintain the brand image. There were a lot of variations in opacity in some designs, which would have majorly impacted the accessibility of the app. It was integral to me to incorporate contrast in my designs, for better readability.

Regarding the tone of voice of our app, we decided on a friendly and personable tone, to build trust with the user and create a more authentic feel. The current app’s tone of voice seemed robotic and had almost an unnatural way of speaking.

Once these decisions were made, the team worked very efficiently to make changes. This was one of our main strengths as a team. There was daily communication and team spirit was strong. Our designs became more consistent in the second iteration. It was important at this point, to assess our designs with some of the fundamental principles of design, including, contrast, balance, emphasis, proportion, hierarchy, white space, and unity.

‍

Prototype

Test

Testing is the fifth stage in the Design Thinking process. Usability testing is vital to determine and assess the usability of the app. It is important to note all functionality issues that arise, along with any additional pitfalls to help with the next iteration of the prototype with the end goal of improving the user experience.

Each team member listed the tasks they required of the participant and the script was then written accordingly. A semi-structured interview was decided upon for the usability tests, as it is considered most useful when looking to gather more information about a particular problem, area or experience. Portigal (2013), states that a drawback of conducting semi-structured interviews is that is can be hard to tally data points across a sample, in an objective manner. For this project, we knew we were conducting three user interviews in the two-hour period; so although we were aware of this drawback, we were confident it wouldn’t really affect our data gathering.

The think aloud method was adopted during testing. This enabled us to observe the user with ease. The testing took place over Microsoft Teams, due to Covid-19 regulations. Naturally with this method, there were Internet issues and some delay in communication. Had this testing been in-person, this issue would have been eliminated. We had two note-takers and one interviewer. This allowed for one of our team members to take part in other groups’ usability testing.

Participants were asked to sign a consent form, which allowed us to record the testing. The recordings proved very helpful for all team members to listen to the user feedback again, especially if something was missed. We also designed asked participants to fill in a System Usability Scale (SUS). This was a reliable tool for measuring the usability of the app.

One of the most significant changes made after testing was the home screen. This was not my initial screen to design but I decided to redesign this, after taking the user feedback on board. I believe the changes I made significantly improved the overall look of the app, mainly in terms of accessibility. The floating navigation bar was changed. Users also commented on the opacity of the buttons, so I changed these to be more uniform. Additionally, one user commented that they expected that actions relating to the Leap Card should be grouped together, which is why I grouped the top up, auto top-up and freeze card options together in the top half of the screen. We received much more positive feedback after this redesign.
‍

Below are some additional changes I made to my designs after the first round of user testing.
‍

Overall, our user testing provided us with invaluable feedback on our designs. It is so integral as a designer to accept all user feedback provided and make changes accordingly. It is easy to overlook aspects of your own designs, so it is important to remember that you are not designing the app for yourself, you are designing it for the end user. Testing provides the perfect opportunity for this.

‍

Reflection

On reflection, our collaboration improved immensely midway through the project. There was constant communication via WhatsApp and weekly video calls to discuss any design issues or feedback from user testing. Prior to this, there was a lot of indecisiveness and time wasting, focusing on the more minute issues, instead of focusing on the bigger picture. For example, there was an hour long discussion regarding font style and font sizes. We each improved our Figma skills. Our problem-solving abilities became more apparent throughout the project.​

The main lesson learned from this project was the importance of using the same design file from the very beginning. When it came to combining our first iterations into the group Figma file, it was obvious we had very conflicting design ideas. Undoubtedly, it was very helpful to have used Material Design as it kept a consistent style, but at times I felt the incorrect components might have been used.

In summary, if we were to carry out this project again, we would agree on a design system as soon as possible, make quicker decisions overall and spend less time on the minor issues. If we had more time, we would have conducted more usability testing.

I felt that we added real value to the Leap Card app that could be implemented by TFI. Overall, the user testing proved very effective — feedback was carefully noted and relevant changes were implemented in a timely manner. The team worked exceptionally well together, particularly in the second half of the project. I would be delighted if we were to work together on a future project.

‍