Snapper Mobile
Enhancing the mobile top-up experience
Snapper Mobile App streamlines and secures the process of reloading transport cards directly from users' phones, eliminating the inconvenience, infrastructure, and overhead associated with traditional top-up methods.
We aimed to overcome challenges from the previous Android app by crafting an intuitive, user-friendly, and visually appealing experience for the iPhone version. The goal was to simplify and enhance the top-up process, requiring a streamlined design process and a shared visual direction among team members.
Results
Increase in revenue within the first three months
Increase in user adoption, surpassing other channels
Increase in top-up speed compared to Android
Problem statement
Users experienced frustrations with the outdated Android app, particularly regarding difficulties in card scanning, a non-seamless top-up process, and limited transaction information. The project aimed to address these pain points and introduce a reliable and accessible solution for iOS users. This presented an opportunity to improve on the Android app, cater to long-awaited iPhone users, and strengthen relationships with stakeholders.
Measure of success
User satisfaction
Conduct user surveys or feedback sessions to measure overall satisfaction with the redesigned app. Track user ratings and reviews on app stores for positive feedback and improvements.
Usability metrics
Monitor improvements in the ease of card scanning, top-up process, and transaction information accessibility. Track the time users spend navigating the app, aiming for a reduction in completion time for key tasks.
Successful top-ups
Monitor the success rate of completed transactions, focusing on the reliability of the top-up process. Track any reduction in transaction errors or failures compared to the previous app version.
What we found
The user research was drilled into the Android app which involved quantitative analysis, feedback from internal customer team, reviews, competitor analysis, and information architecture evaluation. There were key challenges of....
Issues scanning cards with NFC due to recognition difficulties.
Topping up was not as seamless and quick as desired.
Post-topping up confusion, where users often overlooked the need to rescan the card for recent purchases.
Limited availability of transaction information.
This deep understanding of what users want and need became the foundation for the design, therefore this influenced us to create user-friendly solutions.
Key features
Our insights have guided us in crafting design features centred around user stories. The primary goal is to streamline the user journey, directly addressing pain points identified through our research.
Read card to check balance
As a customer, I want to check my card balance easily to ensure I have sufficient funds for travel.
Reload top-up
As a user, I want to reload my Snapper card through a secure and user-friendly process to ensure I always have funds for my travels.
Save & manage credit card
As a user, I want the option to save my credit card details for faster future payments, providing a convenient and efficient experience.
View card information
As a user, I want access to my card details and transactions to stay informed about my card, including trip histories, card type, and passes.
Collect pending items
As a customer, I want the ability to collect recent top-ups by scanning my card again, ensuring a seamless process for accessing my pending items.
Iterative design and user testing solutions
Ideation
The design process began with ideation, sketching, and low-fidelity wireframes. Iterations refined the app layout, ensuring it aligned with iOS Human Interface Guidelines.
Testing
Usability tests and user feedback informed iterative changes, focusing on improving card scanning, top-up visibility, user guidance, and the scanning of new cards. Continuous testing refined the app's usability and addressed user concerns.
Challenges
iOS design standards
Aligning the app with iOS design standards required learning and implementing the iOS Human Interface Guidelines. This involved adjusting components to achieve a native feel, enhancing user familiarity, and ensuring a seamless experience consistent with Apple's design principles.
Working remotely
During the COVID pandemic lockdown, we initiated this project remotely, facing challenges in communication and team alignment. To overcome this, we implemented an open call platform, enabling spontaneous discussions and ensuring efficient communication without scheduled meetings.
Streamlining user experience
The visual design strategy seamlessly blended with the established brand identity, embodying a simple yet modern look. We prioritised user experience by selecting UI elements to minimise cognitive load and enhance user enjoyment. Incorporating familiar iOS components ensured easy navigation. Our goal was to create a fast, convenient, and user-friendly app that meets on-the-go needs, combining aesthetics with functionality to elevate the overall user experience and connect with our audience.
Accessing card details becomes easy with NFC technology, enabling users to effortlessly scan their Snapper card for quick access. Additionally, users can perform several actions like checking their balance, topping up, viewing detailed card information and more. This simplified process improves user convenience and efficiency by eliminating manual input and reducing the time needed for managing card-related tasks.
Users enjoy convenient purchasing options, such as quick top-up and buying travel passes, which make managing transactions seamless. With saved credit card details, payments are instant and secure. This simplified process boosts user convenience and speeds up transactions. Moreover, topping up is effortless—users just need to scan their Snapper card to collect the top-up, ensuring a smooth and efficient experience from start to finish.
Easily access detailed card information, all conveniently displayed at a glance. This intuitive feature gives users a quick overview of their card's and activity, enabling informed decision-making and efficient management of card usage.
I played a crucial part in creating a collaborative design system in our team, making sure it followed the established Human Interface Guidelines and included elements that match our brand identity. By blending native iOS design principles with our brand's style, this system ensures consistency and improves user experience across different platforms. Using consistent design components, we achieved better alignment and teamwork, which led to more efficient project timelines. This unified approach has streamlined our workflow, helping us deliver high-quality designs more effectively.
Key takeaways
User feedback is powerful
User feedback is crucial for shaping successful products. By actively listening to user preferences and making iterative adjustments, we can create designs that resonate with the audience, ensuring the final product meets user expectations and is both effective and user-friendly.
Aligning with the iOS guide
This experience significantly improved my UI design skills within the iOS framework through iterative design processes, deepening my understanding of technical aspects tied to UI decisions. This hands-on experience allowed me to create visually appealing designs optimised for the platform, blending feasibility with aesthetics effectively.
Next steps
For further improvements, I would say the focus is on enhancing user experience by introducing a dark mode option and incorporating additional features. These features include real-time information on chosen transport options, such as viewing schedules and the location of buses. Convenience is a priority with features like displaying previous balance for offline purposes, adding widgets for quick access or actions, and the option to permanently store the card within the app. Additionally, users will have the ability to use the app for all transportation needs, eliminating the need for a physical card.
More projects
Mosaiq Insights
