Tag: wireframes

  • Raising the bar for customer-facing support UX

    Raising the bar for customer-facing support UX

    TLDR: An AI-Powered Customer Service Revolution – AI is transforming customer service by offering personalised solutions, and UX plays a crucial role in creating intuitive and engaging CX.

    Revolutionising Customer Service

    AI-Powered Solutions for Financial Institutions

    AI revolutions

    Personalisation

    Discover how AI is transforming customer service in the financial industry. Learn about personalised knowledge bases, integrated chatbots, and unified customer histories that enhance customer satisfaction and operational efficiency.
    To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 6k users

    Imagine a world where customer service is not just efficient but truly personalised.

    The Challenge: In today’s fast-paced digital age, financial institutions face the challenge of providing exceptional customer support while maintaining operational efficiency.

    Traditional customer service UX often falls short in meeting the diverse needs and expectations of modern customers.

    The Solution: This case study explores how AI can revolutionise customer service by creating seamless support and behind-the-scenes tools that put people and businesses in control of their money.

    User research and UX Design

    Ability <> Access <> TIME

    Quick

    Facts

    HIstory

    What the product needs to accomplish.

    Evidence informs that Customer Service Representative (CSR) typically operate on multiple panes of glass. Extracting snippets of information to help customers, within the guardrails of their abilities, their access and a timeframe (a phone call). How can this be combined, for the CSR, and potentially for self-serving customers?

    Three persona-types, three outputs;

    1. Mr ‘Self-service’; They need a tool highlighting quick-and-easy answers to their questions, without having to contact a CSR.

    CSR can also provide support and is able to troubleshoot issues and resolve customer problems to deeper issues.

    2. Mrs ‘To-the-point’; Some customers want only the facts, escalating issues to a human CSR when necessary.

    3. Mr ‘Analytical’; CSRs need to have a complete understanding of a customer’s history in order to provide effective support.

    Developing a user centred mode

    To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 6k users

    Machine learning

    Self-Service

    knowledge Hub

    Chatbot

    Chatbot

    Personalised recommendations, automating routine tasks, (like FAQs) and predictive analytics are just some of the benefits Machine Learning has in the field of UX Customer Service.

    It was clear for this project there was no one silver bullet. Providing a suite of support from self-service to employing Natural Language Processing (NLP) can all contribute to improving the overall customer experience. Understanding the wealth of possibilities Artificial Intelligence can provide, there was a focussed on three key areas: 

    1. Personalised Knowledge Base

    An AI-powered knowledge base that proactively suggests relevant articles or FAQs based on the customer’s specific query. More about ‘Proactive Suggestion’ later.

    2. Integrated Chatbots with Human Handoff

    Allowing the AI to analyse customer sentiment enables the bot and the CSR to tailor their responses to better meet customer needs and improve satisfaction.

    3. Unified Customer History

    A centralised platform that provides agents with a complete view of a customer’s interactions, including past inquiries, support cases, proactively alerts, and account history.

    History

    Trends

    knowledge Hub

    Proactive Suggestion

    AI can anticipate customer needs and offer solutions before the customer even asks through machine learning algorithms (customer’s history, product information and industry trends ) to predict proactively.

    For example: recommending accessories to recently purchased items, offering troubleshooting tips if a customer has contacted support multiple times, etc. 

    Here the AI recognises this customer has recently been the victim of fraud (see Account Overview note). The right sidebar offers a platform for the UI to proactively generate helpful links to the CSR before they have even asked.


    Self service

    conversational UI

    Unified History

    Process and Impact

    Refined wireframes, optimise self-service and conversational AI

    Starting with several wire-framed directions, then through osmosis filtered down concepts to self-service, a conversational UI and omnichannel integration within the form of a centralised platform. Based on experience and number of assumptions, wireframes were generated to bolster clarification.

    Variants evolved in parallel that merged into a winning model for all three proposals;

    Self Service and Hyper-Personalisation 

    Proactively suggestion, relevant articles and FAQs

    A Personalised Knowledge Base empowers customers to self-serve, with dual-function to help CSR agents to provide targeted support. Aligned to business objectives, these external and internal tools thrive on individual customer data, preferences and behaviour.

    A Personalised Knowledge Base empowers customers to self-serve, with dual-function to help CSR agents to provide support.
    The Customer

    Customers are presented with a user-friendly interface to reduce wait times. Empowered customers can self-serve by searching for documents, tutorials (or anything), related to their query. They have prompted categories to help with Discovery and personalised topics that are trending today. 

    On login, the user is greeted with an app-like interface. This contemporary approach guides them through top-level categories, i.e. Personal and Business finance, then using a navigation as a signpost they are able to drill-down on an Account Overview and User Guide. Tailored topics are surfaced (based on search and account history) within the sidebar quick links.

    The interface has push-points throughout all sections both introduce AI recommendations and provide personalised AI financial insight.

    The CSR

    Using the same B2C interface, CSR agents can access and add-to content, generate most frequently asked self-service tutorials and use the Knowledge Base to improve their own skills.

    Conversational Interface with Human Handoff

    Human-AI Hybrid 

    A smooth transition from AI chatbot, with ‘sentiment analysis’ baked-in, to a human agent 

    An AI chatbot that can handle simple inquiries but seamlessly transitions to a human agent when the conversation becomes complex or requires personalised assistance. This hand-over reduces agent workload for routine queries which improves customer satisfaction with faster responses, but also ensures a smooth transition to human support when needed.

    Chatbot Journey

    From Start through Engagement to Conclusion 

    Natural Language Processing (NLP)

    Gauge customer emotions from an AI-Chatbot that uses sentiment analysis baked-in.

    Properly trained, the AI can recognise the underlying intent behind customer queries, even if expressed differently and provide the right hand-off to the right CSR.

    Unified Customer History

    360˚ View

    A centralised platform | An assistant that proactively spot patterns to anticipate customer needs

    A centralised platform that provides agents with a complete view of a customer’s interactions, including past inquiries, support cases, account history and proactively alerts. For example, if a customer is nearing their contract expiration and has a high purchase frequency, the platform could proactively offer renewal terms or upsell opportunities.

    A single platform to access all customer interaction data: 

    • Reduces the need for customers to repeat information 
    • Enables agents to provide personalised and informed assistance
    • Spot patterns and insights that might inform business decisions
    • Anticipate customer needs and provide timely solutions with proactive support
    To respect confidentiality agreements, the branding and specific naming have been modified. This product is currently live and serving 6k users

    Reduce workload

    Data Insight

    Personalisation

    360˚

    Outcomes, split by discipline

    It is clear that AI enhances personalisation, efficiency, and problem-solving. But how can UX leverage these to create a more human experience.

    Business Outcomes:

    • Operational Efficiency: AI streamlines processes and reduces agent workload.
    • Data-Driven Insights: AI provides valuable customer data for informed decisions.
    • Cost Reduction: AI automates tasks and reduces operational costs.

    UX Outcomes:

    • Personalisation: AI can tailor the Self-Service experience, and brings Hyper-Personalisation to individual needs.
    • Seamlessness: AI integrates chatbots and provides a unified customer view.
    • Proactive Support: AI anticipates customer needs to find answers fast and can provide that 360 view at-a-glance.

    UX & AI | Future-proof partners

    Overall, UX and AI empowers businesses to deliver exceptional customer experiences, improve efficiency, and gain that competitive edge.

    Empowering users with the financial tools they deserve. From Mastering Design Theory and Lean Agile, Solve big problems, fast to How delight and speed are rewriting our UX playbooks. See more Case Studies.

    Empowering users with the financial tools they deserve

    • Mastering Design Theory and Lean Agile
    • Solve big problems, fast.
    • How delight and speed are rewriting our UX playbooks

    More Fintech Case Studies

  • A Frictionless Wireframe Onboarding Journey

    A Frictionless Wireframe Onboarding Journey

    TL;DR: Customers faced a confusing onboarding maze. Detailed UX wireframes transformed it into a frictionless journey, getting users invested.

    OUTCOME: Secure, and personalised onboarding process building loyalty from the first click.

    UX Wire-Framing

    Multiple Interactions

    Design Thinking

    Enterprise

    How to hook new customers

    Detailed wireframes mapping a user-centred flow that included clear guidance, robust security, and personalisation resulting in a better customer experience, more efficient development, and strong team alignment..

    Backend to Frontend

    When customers make a product selection there is a lot going on behind the scenes. 

    The desktop new product onboarding experience is a complex animal, a prime candidate to wireframe. Capturing a large selection of unique steps and indicating the interaction design is a Design Thinking challenge and requires enterprise-level wire framing skills

    A Frictionless Wireframe Onboarding Journey
    A Frictionless Wireframe Onboarding Journey
    • Clarity and Understanding A central pillar in UCD
    • Take advantage of existing Design System component reuse 
    • Team alignment (from BAs to Dev to client)

    … let’s dive in


    Defining the Problem

    Security

    Hi-Fidelity

    A Frictionless Wireframe Onboarding Journey

    Imagine a new or existing customer discovering your product

    The onboarding process can often feel like a daunting maze. This is where detailed wireframes step-up, transforming a journey into a smooth and secure experience. Early decisions were made to leverage a pre-existing Design System, so high fidelity wireframes (Hi-Fi) became the way forward with Figma as the wire-framing tool of choice. 

    Development Preparation

    Pre-development tech checks

    Process flow diagrams

    A Frictionless Wireframe Onboarding Journey
    A Frictionless Wireframe Onboarding Journey

    The first goal in a wireframing process is technical. The objective is to integrate a robust data gathering mechanism into the onboarding process to streamline technical development. Understanding the terms and conditions, personal details collection, and email and SMS validation data flows and aligning these all to API calls was top-of-mind. 

    This early technical scoping ensures efficient API integration and data management solutions, so the team can move forward and then collaborate with BAs and then UX.

    Onboarding Flow and Requirement Gathering

    Goals

    Objectives

    Functional requirements

    Shared understanding

    A Frictionless Wireframe Onboarding Journey

    Images are blurred for client confidentiality reasons

    BA Requirements Gathering

    To provide a solid foundation, to limit rework and foster communication between stakeholders (users, developers, designers) a Business Analyst will typically conduct user and stakeholder interviews to understand business goals and success metrics, write user stories and generate Use Case Diagrams indicating functional requirements to create a shared understanding before wireframes begin.

    1 – Guiding the First Steps

    Personal details

    Pre-registration

    A Case Study in Wireframing Success

    The process begins the moment a product ID is entered as the customer clicks a product. These wireframes propose a gentle walk-through, hand-holding the customer and setting clear expectations. As personal details are collected, the system identifies pre-registrations, streamlining the experience. For unrecognised products, the UI gracefully handles the situation, preventing frustration.

    A Case Study in Wireframing Success
    Wireframes: From Investment Pledge (Source of Funds) to National Insurance (NI)

    Behance – A FRICTIONLESS WIREFRAME ONBOARDING JOURNEY

    A Frictionless Wireframe Onboarding Journey

    Fine tune the results

    UAT Testing

    Prototyping

    Sneak preview of the final delivered User Interface (UI) 

    The interface has been altered for client confidentiality reasons 

    The process is still fresh, typically these will go through Usability Testing and Heuristic Evaluation. Prototyping, with QAs on standard, is another option to verify and test stakeholder feedback.

    Conclusion and Impact

    Clarify ambiguity

    trust

    Tailored

    These wireframes don’t just showcase a process; they tell a simple story of a complex customer experience. By prioritising clarity, security, and personalisation, even with a level of ambiguity, this onboarding journey fosters trust and loyalty from the very first click.

    Empowering users with the financial tools they deserve. From Mastering Design Theory and Lean Agile, Solve big problems, fast to How delight and speed are rewriting our UX playbooks. See more Case Studies.

    Empowering users with the financial tools they deserve

    • Mastering Design Theory and Lean Agile
    • Solve big problems, fast.
    • How delight and speed are rewriting our UX playbooks

    More Fintech Case Studies

  • Wire-framing for the larger to the smaller screen

    Wire-framing for the larger to the smaller screen

    TLDR: Following on from my recent ‘How user personas can help crystallise the early stage design process’ post, here the focusses is on realising wireframes and responsively design. This post looks at providing a snapshot of how to visualise the findings and create an experience for both desktop and mobile.

    The Challenge

    The focus here is on strengthening the sales staff understanding, how to cross-sell and provide a tool to effectively push leads through to conversion.

    Primary user goal

    These wireframes concentrate on the lead generation in the automotive industry but these principles are clearly transferable.

    (more…)
  • Wireframing an iPad Casino App

    Wireframing an iPad Casino App

    TLDR: Focusing on planning functionality and layout without design is the most efficient way of concentrating decision markers (especially business or product-owners) to agree on functionality without distraction. Think: function over form.

    Personally I love to use traditional pen and paper for wireframing. How about you?

    First launch feature areas

    This is the main ‘shop window’ to your experience. On first launch, the user to launched in the gambling casino world. Pre-selected games adopt the ‘parallax scrolling’ technique and occupy the prime real estate. There is also functionality to drill down via category types. Account Management and Help are all ‘front-of-store’, as is the ability to push sign up and login promotions.

    CasinoApp_Wireframing3

    (more…)
  • Protected: ‘Cloud Service’ Design and UI – from sketchbook to wireframe to branding

    This content is password-protected. To view it, please enter the password below.