Outcomes from testing - ( View Prototype )

• On the first app sign screen, some participants were unsure if they should check their phone before clicking on "Continue".
• Once on the initiated/2nd screen, most participants understood they had to check their phone with the authentication.
• When getting to the approval screen, most participants were able to identify the actions associated with the CTA's
• When clicking the 'I don't recognise this' CTA, participants were concerned that their card would be instantly blocked and worried about accidentally pressing it and not being able to use their card
• Participants appreciated the ability to switch to another verification method when the selected one was not working as expected.

The in-branch gorilla sessions were typically very short, and we could only go through the full prototype with a few customers. However, these sessions were beneficial to gather insights on:

• The general perception of the Banks safety against Fraud
• How customers who are not regular Internet Banking users might be affected by SCA and what additional challenges they might face
• Many of the customers who visited the branch were non-native English speakers - While the current experience requires little instruction and decision making, 2FA adds a layer of complexity that might be particularly challenging for people with low confidence online, literacy level or English proficiency

Recommendations

1. Review the copy to make it clearer that users need to check their mobile app only after clicking 'continue.'
2. Introduction of an animation that suggests the verification process is now shifting from desktop to mobile. (Users might need to do this on mobile, but in that case, they already have their phone in front of them).
3. Ensure that the verification process is easy to follow and understand for all customers.

‍

Define

The discovery research phase played a pivotal role in our design process. By meticulously analysing the results, we gained valuable insights into the areas that required improvement and iteration in the overall design. The data collected from user testing and interviews provided a clear roadmap for enhancing the user experience. This data-driven approach ensures our design decisions are rooted in user needs and preferences. My next crucial task was to develop the next iteration of the design, which would be subjected to another round of research and testing. This iterative approach is fundamental to user-centred design, ensuring we address issues identified in the initial rounds and continuously refine the product based on user feedback.

I created a custom animation to address one of the key pain points identified in the research—users' confusion about when to open the mobile banking app. This animation was designed to provide a clear visual cue, guiding users on when and how to launch the app. The animation was crafted to be intuitive, engaging, and aligned with the brand's visual language.

In addition to this, I developed a more comprehensive animation for the Mobile Banking App itself. This animation served a dual purpose: it visually represented the end-to-end journey of the user's interaction with the app. It tied together various user experience elements into a cohesive narrative. Both animations were meticulously created using Adobe After Effects.

Once the animations were perfected, I exported them as Lottie files. Lottie is an open-source animation file format that allows for small file sizes and high-quality animations that can be easily implemented across different platforms. Using Lottie, I ensured that the UI developers could seamlessly integrate these animations into the desktop and Mobile Banking Apps, maintaining consistent quality and performance across devices.

The next critical step in refining the user experience was a collaborative effort with our Copy Writer. Together, we meticulously reviewed and refined the wording used throughout the interface. This collaborative process, involving multiple rounds of revisions, A/B testing of different phrasings, and seeking feedback from other team members, ensured that the copy was as effective as possible. Our goal was to ensure that all instructions were clear and concise and easy to follow for users of all levels of technical proficiency. We paid special attention to eliminating jargon, using active voice, and breaking down complex processes into simple, actionable steps.This collaborative process involved multiple rounds of revisions, A/B testing of different phrasings, and seeking feedback from other team members to ensure the copy was as effective as possible.

Combining refined visual cues through animation with clear, user-friendly copy, we aimed to create a more intuitive and engaging user experience. This holistic approach to improving both the visual and textual elements of the interface demonstrates our commitment to creating a product that meets user needs and provides a delightful and seamless interaction.

Develop

‍
It was finally time to launch our eCommerce journey, diving deeper into customer behavior and evaluating the performance of our user experience with a broader audience. This crucial step would allow us to gather real-world data, validate our assumptions, and pave the way for future improvements.

I meticulously prepared all necessary assets and documentation for the development team:
Prototype handover:

• Prototype handover: I transferred the carefully crafted prototype to our skilled UI developer. This prototype served as a comprehensive visual and interactive guide, detailing every screen, interaction, and transition in the user journey.
• Animation files: I provided Lottie files for all custom animations. These lightweight, scalable vector animations would ensure smooth, engaging interactions across various devices and screen sizes, enhancing the overall user experience.
• Tagging specification: I developed a detailed tagging spec outlining every trackable user interaction. This document would guide the implementation of analytics, allowing us to collect granular data on user behaviour, including:
  • Click-through rates on specific elements
  • Time spent on each screen
  • Conversion funnels and drop-off points
  • Usage patterns of various features

‍

The collected data would be instrumental in identifying pain points, optimising the user flow, and uncovering new opportunities for feature development or refinement in subsequent iterations.
For this initial implementation, we adopted a phased rollout strategy:

• Subset deployment: We chose to launch the eCommerce journey for a carefully selected subset of card brands. This approach would allow us to:
  • Minimise potential risks associated with a full-scale launch
  • Gather focused feedback from a specific user segment
  • Identify and address any unforeseen issues before wider deployment
• Gradual expansion: Following the success of the initial subset, we planned a strategic ramp-up to include the remaining brands. This gradual rollout would enable us to:
  • Scale our infrastructure and support systems appropriately
  • Refine our processes based on early learnings
  • Tailor the experience for different brand demographics if necessary
• Continuous monitoring and optimisation: Throughout the phased rollout, we would:
  • Closely monitor key performance indicators (KPIs) and user feedback
  • Conduct A/B tests on critical elements to optimise conversion rates
  • Make data-driven decisions for immediate tweaks and long-term strategy.

This methodical approach to launching our eCommerce journey would provide valuable insights, allowing us to iterate rapidly and create a more refined, user-centric experience in future versions.

‍