COCO

The project's goal is to enhance J.P. Morgan's compliance-focused chatbot platform by updating the UI and improving the UX, aligning with the new application objectives to better suit users' needs. This involves comprehensive research, stakeholder collaboration, and leveraging an established design system. A notable challenge was the existing UI's inability to seamlessly integrate with multiple applications and effectively handle users' task requests within the platform. This limitation necessitated an overhaul of the user interface and backend architecture to enable smooth integration and efficient task processing.

ROLE: LEAD DESIGNER

  • The CO CO application is an upgraded chatbot platform within J.P. Morgan, prioritizing an improved user experience it aims to streamline compliance-related processes and facilitate seamless communication between users, the compliance team followed by the ability to carry out tasks from one central application.

  • J.P. Morgan identified critical challenges within their existing chatbot platform. These challenges included a misalignment with user needs, workflow inefficiencies, lack of user-centric research, integration obstacles.

  • The need was to comprehensively upgrade the chatbot platform to address these problems and enhance its effectiveness and usability.

  • User-Centric Research: Conduct comprehensive research to understand user pain points, objectives, and desired outcomes.

    Persona Development: Create user personas based on research findings to keep user needs at the forefront of decision-making.

    User Journey Mapping: Map out the user journey to identify specific pain points and workflow inefficiencies.

    Data Analysis: Analyze existing chatbot platform data to identify patterns and areas for improvement.

    Setting Measurable Goals: Define clear, measurable, achievable, relevant, and time-bound (SMART) goals that address identified problems.

    Agile Methodology: Adopt an agile approach for iterative development and continuous improvement based on user feedback and changing requirements.

    Design Thinking: Incorporate design thinking principles to ensure user-centric and empathetic solutions through cross-functional collaboration.

    Prototyping and Testing: Use prototyping tools for UI creation and user testing to gather feedback and refine solutions.

    Continuous Improvement: Plan for continuous improvement cycles post-implementation to address any remaining issues and evolving user needs.

    Feedback Loops: Establish feedback loops with end users and stakeholders to gather ongoing insights, ensuring the platform remains responsive to changing requirements.

PROBLEM

  • The chatbot platform lacked alignment with the specific needs and requirements of the users. The tech team had focused more on functionality without adequately prioritizing the user experience and preferences.

  • The existing platform was not efficient in facilitating user workflows. Users experienced delays and inefficiencies in completing tasks, requiring a streamlined and accelerated workflow process.

  • The absence of prior research and measurable goals indicated a gap in understanding user preferences and setting clear objectives. This lack of a structured approach hindered the effective design and development of the chatbot platform.

  • The existing platform UI faced difficulties in integrating multiple applications and advanced technologies. This limited its capabilities and hindered the platform's potential for providing enhanced services.

  • Users were dependent on staff assistance due to limitations in the chatbot's self-service capabilities. There was a need to enhance the platform to allow users to effectively utilize it without frequent intervention.

  • Conduct comprehensive user research, including in-depth interviews with product leads, technical teams, and end users to identify their pain points, objectives, and desired outcomes.

  • Createed user personas based on the research findings to represent different user groups within the organization. These personas helped in keeping user needs at the forefront of decision-making.

  • Mapped out the user journey to identify pain points and areas of inefficiency in current workflows to pinpoint specific problems.

  • Analysed data from the existing chatbot platform, including user interactions, feedback, and task completion rates, to identify patterns and areas where the platform is falling short.

  • Engaged with key stakeholders, including product leads and technical teams, to gather insights into the strategic vision for the chatbot platform and to align on goals and priorities.

  • Compared the existing chatbot platform with industry best practices and standards to identify deficiencies and areas where improvements can be made.

  • Defined clear, measurable goals that address the identified problems.

DEFINING
THE PROBLEM

  • Adopted an agile methodology to guide the project effectively. This approach allowed for iterative development and continuous improvement based on user feedback and changing requirements.

  • Incorporated design thinking principles into the strategy to ensure that solutions are user-centric and empathetic. Encouraging cross-functional collaboration to generate creative solutions.

  • Use prototyping tools like Figma to create UI prototypes and conduct preliminary user tests. Gathering user feedback early in the design phase to refine the solutions.

  • If necessary, consider strategic shifts like the integration of "Microsoft Teams" as the platform for the chatbot. Evaluate the potential benefits and challenges associated with such shifts.

  • Planned for continuous improvement cycles after the initial implementation to address any remaining issues and to keep the platform aligned with evolving user needs.

  • Established feedback loops with end users and stakeholders to gather ongoing feedback and insights, ensuring that the platform remains responsive to changing requirements.

OKR’S

  • Goal: Achieve a 20% increase in user satisfaction ratings through post-implementation surveys and feedback analysis.

    Metrics: Pre and post-implementation user satisfaction surveys, user feedback and comments on the chatbot platform.

  • Goal: Reduce average user interaction time by 15% to expedite workflow processes.

    Metrics: Time taken per interaction before and after the upgrade, task completion rates.

  • Goal: Decrease the need for staff intervention by 25% through improved user self-service capabilities.

    Metrics: Number of interactions requiring staff assistance before and after the upgrade, user-reported need for assistance.

  • Goal: Successfully integrate at least 3 additional applications into the chatbot platform to expand functionality and capabilities.

    Metrics: Number of integrated applications, functionality achieved through integration.

  • Goal: Achieve a 25% improvement in usability scores based on usability testing and heuristic evaluations.



    Metrics: Pre and post-upgrade usability scores, feedback from usability testing.

  • Goal: Achieve a 30% increase in user adoption rates within the first three months of implementation.


    Metrics: Number of active users, user engagement rates, and user onboarding data.

  • Goal: Conduct at least three rounds of iterative improvements based on user feedback to enhance the platform's functionality and design.

    Metrics: Number of iterations, feedback analysis, and subsequent changes.

Established UI Design System:

The design phase leveraged J.P. Morgan's established UI design system (Connect). By anchoring the design in this system, the project ensured adherence to the bank's brand guidelines and consistency in design elements across the chatbot platform.

Color Compliance and Brand Consistency:

Colors were chosen in line with J.P. Morgan's brand palette to create a cohesive and recognizable look, reinforcing the bank's brand identity within the chatbot platform.


Robust Foundational Framework:

The design phase focused on building a robust foundational framework for the chatbot platform. This included defining a structured architecture, design patterns, and interaction models that would serve as the base for the platform. A strong foundation ensured scalability, maintainability, and ease of future enhancements.

INITIAL DESIGN

Visual Identity Symbol:

Introduced a novel visual identity symbol was a significant aspect of the design phase. This symbol was carefully designed to represent AI and information transparency across diverse applications.

Representation of AI:

The symbol evokes the essence of artificial intelligence within the platform using clear lines, shape shifting motion and glass morphism to signify advanced technology and automation, reinforcing the presence and utilization of AI.

Enhancing Platform Appeal:

The novel visual identity symbol and the overall design choices were made with the intent to enhance the platform's appeal. A visually appealing design captures users' attention, making the platform more engaging and memorable, ultimately contributing to a positive user experience.

HAND OVER

The project's impact is unfolding progressively. Anticipated outcomes encompass a significantly improved UX, streamlined workflows, and enhanced compliance procedures. This will be achieved through the thoughtful redesign of the UI, keeping UX principles at the forefront of the transformation.

  • I provided all of the necessary design files, including source files and exportable assets, organized in a clear and accessible structure. This included components, screens, icons, images, and any other visual elements required for development.

  • Detailed design specifications were documented to guide the development team in implementing the design accurately.

    This covered:

    Colors: Specific color codes (hex, RGB, or other standards) for all UI elements were specified.

    Typography: Font styles, sizes, weights, and line heights to be used were detailed.

    Layouts: Grid systems, spacing, and alignment guidelines for different screen sizes were defined.

    Interactions: Micro-interactions, animations, and transitions were described.

    Iconography: The usage and variations of icons in the UI were outlined.

  • A comprehensive design style guide was provided, outlining design principles, patterns, and best practices to maintain consistency across the product. This included guidance on user flows, common UI components, and any specific design conventions.

    Annotations and Notes: Annotations were added directly to the design files or in a separate document to explain specific design decisions, interactions, or functionalities. Any design elements that required further context for implementation were clarified.

    Interactive Prototypes: Interactive prototypes were created to showcase the intended user experience and user flows. These prototypes served as a valuable reference for the development team to understand the expected behavior and interactions.

  • Meetings and Discussions: Regular meetings were organized between myself and the development teams to discuss the handover process. Any questions, concerns, or clarifications that the development team had regarding the designs and specifications were addressed.

    Feedback Loop: An iterative feedback loop was established between myself and the development teams to address any issues or updates that arose during the development phase.

  • Compromise on Animations: To comply with the requirement for minimal animations, I significantly reduced the use of dynamic transitions. Animations were utilized sparingly and only when essential for functionality or to enhance the user experience in a subtle manner, ensuring they did not overwhelm the interface.

    Compromise for Accessibility Compliance: In order to align with the organization's accessibility regulations, the design was meticulously crafted to prioritize inclusivity. This encompassed careful selection of color contrasts, appropriate font sizes, comprehensive keyboard navigation, and other accessible features, guaranteeing that the product remains accessible and usable for all users.

    Compromise for a Less Dynamic UI and Restricted Components: The UI design was intentionally simplified and made less dynamic to meet the specified criteria. This entailed minimizing the use of dynamic components, layouts, and transitions. The approach favored a more static and straightforward design to adhere to the stipulated guidelines while maintaining functionality and usability.

    Compromise on Micro-Interactions: Given the need for a less creative UI, micro-interactions were restrained in terms of scope and complexity. The design team strategically limited the usage of elaborate micro-interactions. Instead, basic and essential micro-interactions were incorporated, preserving usability and functionality within the defined guidelines.