AI Chatbot
Navigating the reporting process in the London Borough of Barking and Dagenham (LBBD) can be frustrating. Commissioned by the Customer Experience Department, I developed an intuitive interface for the LBBD website's AI chatbot. The goal was to replace outdated web forms with a streamlined, easy-to-use interaction.
UX Designer
Conversation Designer
Researcher
3 weeks
Team
Developer
Project Manager
Client
Barking and Dagenham
CX Department
Tools
Figma
Miro
The Problem
The current system for applications and reporting issues is through web forms. The forms use a linear structure that does not adapt to user-specific needs, resulting in a high likelihood of incomplete submissions. To address these issues, an enhanced AI chatbot solution is required to simplify interactions, provide clear guidance and tailor the user journey to individual goals.
The Challenge
How might we simplify the process for residents to report issues or complete applications through a user-friendly digital platform?
Hypothesis
Transforming the web forms into an AI chatbot will make the process more interactive and intuitive, improving user engagement and resulting in a 15% increase in completion rates.
Discover
Web forms
The web forms lack conversational and interaction design. The web form length and generic user flow are not intuitive to the user's response, resulting in a low completion rate of 38%. I prioritised the most frequently used web form for this project, Green Garden Waste Collection.
Green Garden Waste Collection form
User Research
I analysed resident user feedback and identified usability issues such as error handling and mobile responsiveness. This uncovered pain points that impacted completion rates and highlights focus areas to improve user engagement with the AI Chatbot.
Qualitative data from the resident survey
Focus Areas
Accessible Navigation Buttons: Ensure the buttons are large enough for easy interaction on mobile devices.
Minimise Required Fields: Streamline the user flow by only requesting essential information and keep the interaction concise.
Helpful Error Messages: Ensure that error messages are clear with instructions so users can easily amend their input.
Mobile-First Design: Design the chatbot to be mobile-first, ensuring that all elements are responsive and are displayed properly across different screen sizes.
Enhance Field Readability: Ensure fields are legible on small screens, avoiding the need for users to zoom in and out to interact with the chatbot.
Define
User Persona
A user persona was created to define the target resident’s goals such as quick access, simplicity and a short process. This indicated that the AI Chatbot should respond to the resident’s input, displaying only relevant fields to reduce length and maintain engagement, considering their busy lifestyle.
Local resident persona in Miro
User Flow
The user flow provided a clear visual during design sprints with stakeholders and the developer. It identified areas for streamlining such as simplifying the payment process by replacing the portal login with an online payment link. We also discussed API integration to automatically populate fields with resident information from the system.
A section of the user flow from FigJam
Ideation
Sketches
The sketches include alternative placements for the LBBD logo, ensuring clear branding. I’ve also distinguished the residents’ and chatbot’s messages using different icons. The text input bar is clearly defined for easy user interaction.
Initial AI Chatbot sketches
Mid-Fidelity
During a design sprint, I refined the AI chatbot wireframes by incorporating feedback from the developer to enhance the user experience. The key improvements included integrating a postcode finder to reduce errors in address input.
Mid-fidelity wireframes from Figma
Iterations
Stakeholders noted confusion in identifying virtual assistant versus resident messages and the lack of clarity in tracking messages, which could potentially affect completion rates. This feedback prompted refinements to both features and more.
Key iterations with annotation
UI Design Influences
While testing leading chatbots, I identified THREE, Virgin Media and Santander as the most efficient. Responsive design and message tracking were key elements that enhanced the user experience. I applied the features to the AI chatbot to improve application completion rates.
UI Design influences
Error Messages
I enhanced error handling by adding context-specific feedback, guiding users through corrections. Error messages now highlight specific issues, such as invalid postcodes or emails and provide clear instructions.
Error messages for invalid postcode and payment
Prototype
Final Results
The prototype showcases how residents will interact with the AI chatbot, using questions from the web forms for context. The conversational flow guides residents towards their desired outcomes, ensuring clarity and ease.
User Testing
In the first month of the beta phase after transforming the web form into an AI chatbot, the completion rate increased from 38% to 65%. The changes showed a 27% increase in completion rates, which highlights a significant boost in user engagement and task completion.
Takeaways
Accessible Conversational Design: Ensuring accessibility for users with visual impairments with features such as text-to-speech and alternative communication methods.
Service Integration: Ensure secure handling and responsible use of data, providing insights while maintaining privacy.
Next Steps
The project is currently in development.
User Feedback: Conduct a feedback survey to gather insights on user experience and areas for further improvement.
Live-chat Integration: Improve response times by integrating live-chat, enabling seamless transitions between chat and the contact centre for a more personalised experience.
Scale up: Integrate more highly requested web forms into the AI chatbot, streamlining the process so residents can access all services through a single point, reducing the need for multiple touchpoints.