Ethoca integration
NewDay, for Aqua, NewPay, Partnership with John Lewis, Argo
11/2022 - 12/2023
User Research / User Experience / User Interface
This initiative is a mandated business requirement from Mastercard, necessitating a collaborative integration effort with Ethoca. The primary goal is to enhance transaction information through real-time data provision, expediting the identification and resolution of fraud in digital commerce.
Current design limitations hinder the effective display of supplementary information, leading to customer feedback citing perceived clarity issues. Consequently, the project outlines a strategic plan for a partial UI update, with a dedicated focus on optimizing the overall user experience. The comprehensive project scope includes end-to-end user journey mapping, UX research, user testing, component design, and the establishment of a design system.
Figma | UserTesting | Miro
Background
As the Senior Product Designer, I spearheaded 2 squads focused on core experience and partnership. Collaborating closely with Product Managers, I shaped project direction, roadmap, and led a team comprising a Junior Product Owner, Front-end Engineers, and shared resources from Data Scientists and Back-end Engineers. I facilitated dialogues with technical representatives from Ethoca, in-house Legal teams, and Marketing researchers.
Objective and Goal
The primary objective is to significantly enhance customers' experience by providing a deeper understanding of their daily purchases. This initiative aims to increase portal engagements and foster customer loyalty through improved financial management. The overarching goal is to enhance the general user experience performance, ensuring a more intuitive and satisfying interaction for users.
This initiative seeks to create benefits for customer support agents by reducing inquiries related to transactions. A key focus is to decrease the number of misunderstood disputes and empower agents to swiftly identify the correct transactions during customer calls. The overarching aim is to alleviate the workload on customer agents by providing clearer self-help actions, thereby enhancing efficiency in customer support processes.
Challenges
-
Upon auditing the current design, several issues were identified. The design is burdened with dense text and lacks adequate spacing, resulting in a visually disorganized appearance due to frequent content expansion. Additional challenges include an overly long transaction history, duplicated information, and unclear terms in the copy.
-
Testing and internal assessments highlight the necessity for heightened flexibility, simplicity, and clarity in the design. Recommendations involve integrating more visual elements and colors for clearer indications, alongside features aimed at facilitating budgeting. Customer feedback emphasizes recurring issues such as unrecognized transactions, dispute status checks, and lapses in payment for subscribed services.
-
The project faces formidable challenges, notably a constrained schedule compounded by delays owing to pre-existing capacity shortages. Amidst ongoing system migrations, the imperative is to institute minimal changes, preserving the user experience with the old design. Furthermore, an obsolete and unusable design system mandates the recreation of a new system before project initiation.
Research and Insights
The initial phase consisted of three main steps: Understanding, Validation, and Direction.
Understanding:
I organized a stakeholder workshop to understand diverse perspectives. Collaborating with different departments, we gained insights into stakeholder needs. Additionally, I discussed technical limitations with engineers to align design aspirations with capabilities. Customer surveys and feedback sessions with agents provided valuable insights into user preferences.
Validation
Following the understanding phase, I conducted in-depth interviews with 10 customers from different brands. Combining their insights with actual data, we validated assumptions and ensured alignment with user needs. Collaborating with the product team and customers, we refined our design direction and acceptance criteria.
Direction
With validated insights, I defined a clear design direction and established acceptance criteria. Creating wireframes and prototypes, I facilitated feedback sessions with stakeholders and technical teams. Finalizing ideas, I prepared for usability testing on Usertesting.com, ensuring the designs met user expectations.
An interesting contradiction emerged:
From a business perspective, the product team wanted to showcase as much information as Ethoca provided to avoid any unclearity and cover diverse customer needs. However, customers from different partnership brands had their own priorities and importance regarding information hierarchy, which contradicted the product team’s expectations. After discussions, I fought for an extension of the project and reprioritized some design refinements for the next quarter to maximize the engineering capacity for the project.
Be agile.
Implemented a feature flag system to tailor information display for individual brands, as per insights gathered from the initial survey. Additionally, adopted a collapsible design to incorporate supplementary information requested by the product team.
2 designs were chosen for development into high-fidelity prototypes, a decision unanimously supported by the team. Collaborating closely with the content designer and legal team to ensure the final content met both regulatory requirements and user expectations.
Our design approach struck a harmonious balance, seamlessly integrating with the mobile app while maintaining consistency across diverse brand guidelines. This pragmatic approach garnered widespread acclaim and ensured alignment with the overarching project objectives.
Project Timeline
Final Design and Further Testing
A simplified drawer was introduced for a smoother mobile-friendly experience, streamlining expanding interaction to reduce the need for responsive design. Additionally, new components were designed to lay the groundwork for future system redesigns. Further testing was conducted, receiving positive feedback on the smooth transition and refreshing feel of the interface. Notably, 96% of participants found the information provided useful, albeit with slight variations across diverse demographics.
Production and QA
Despite minimizing changes, production spanned over six sprints. Quality assurance took roughly a month, primarily due to backend mapping delays and necessary tech updates. Noteworthy enhancements included the introduction of new asset colors aligned with mobile libraries and improved accessibility standards, achieving AAA compliance.
Measure
To measure the effectiveness of the design implementation and its impact on user experience, several metrics and methods were employed:
-
Surveys were conducted at the three- and six-month marks post-launch to gather direct feedback from users regarding their satisfaction, ease of use, and any areas for improvement.
-
Click rates were monitored to assess user engagement with different elements of the interface, such as the simplified drawer and expanding interactions. This helped gauge the effectiveness of design changes in facilitating user interaction.
-
A Google Analytics tracking dashboard was utilized to monitor various events and actions taken by users within the interface. This provided valuable insights into user behavior, including navigation patterns, page views, and interactions with specific features.
-
Before rolling out the design to all brands, it underwent testing and debugging on several brands as part of the quality assurance process. This iterative approach allowed for refinement and optimization based on feedback and performance metrics before wider implementation.
Results
-
Significant progress has been achieved in streamlining customer support, with a remarkable 67% reduction in inquiries from customer agents regarding transactions compared to the same period last year. This achievement reflects the effectiveness of the implemented changes in addressing agents' concerns and enhancing transaction-related clarity.
-
The project has successfully reduced disputed transaction requests by an impressive 24%. This reduction indicates a substantial improvement in transaction-related communication, resulting in fewer instances of misunderstandings or discrepancies that typically lead to disputes.
-
An overwhelming 97% of interviewed customers have expressed agreement that the new design has substantially improved visuality and readability. This resounding endorsement from customers indicates the success of the project in meeting user expectations and enhancing the overall user experience.
-
Furthermore, the project was completed two months ahead of the original deadline, demonstrating exceptional teamwork and efficiency. This early completion not only showcases the dedication and collaboration within the team but also underscores the successful implementation of the project's objectives.
For further details, kindly reach out!
In compliance with Non-disclosure Agreements, specifics regarding projects or related information can only be disclosed during interviews or upon inquiry. Your understanding in this matter is greatly appreciated.