Overview
Discovery
Define
Ideation
Prototype
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 webforms with a streamlined, easy-to-use interaction.
Roles
& Timeline
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 GOSS webforms. 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 through a user-friendly digital platwebform?
Goss Webform
The GOSS webforms lack conversational and interaction design. The webform length and generic user flow are not intuitive to the user's response, resulting in incomplete submissions.
Green Garden Waste Collection form
User Research
I analysed qualitative user feedback from their resident survey and identified usability issues such as error handling and mobile responsiveness, which highlighted key pain points. I chose to focus on the most frequently used webform called Green Garden Waste Collection. The insights guided my design decisions.
Qualitative data from the resident survey
Focus Areas
Accessible Navigation Buttons: Make buttons 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 the chatbot to be mobile-first, ensuring that all elements are responsive and are display properly across different screen sizes.
Enhance Field Readability: Ensure fields are appropriately scaled and text is legible on small screens, avoiding the need for users to zoom in and out to interact with the chatbot.
Define
User Persona
I created a user persona to further define the pain points and goals of the target audience when interacting with the council's webforms. This persona highlights key issues such as a lack of mobile optimisation, unclear error messages and length. By focusing on the persona's motivations and goals the design can be tailored to provide a more user-friendly experience.
Local resident persona in Miro
User Flow
It was essential to collaborate with stakeholders to gather the business requirements and establish clear user goals. The user flow shows how the user would interact with the AI chatbot and complete their goals. I also reviewed the user flow with developers to ensure API integration.
User flow from FigJam
Ideation
Sketches
The low fidelity wireframes include alternative placements for the LBBD logo, ensuring clear branding. I’ve also distinguished the resident’s and AI bot’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 engineers to enhance the user experience. The key improvements included integrating an address lookup filter to reduce errors in address input and streamlining the newsletter subscription process by embedding it directly within the chatbot.
Mid-fidelity wireframes from Figma
Error Messages
In the mid-fidelity wireframes, 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 GOSS webforms for context. The conversational flow guides residents towards their desired outcomes, ensuring clarity and ease.
Reflection
This project has deepened my curiosity about the future of AI and its potential to transform how we interact with technology. API integration and conversational design can automate everyday tasks and streamline the user journey.
Takeaways
Accessible Conversation Design: Ensuring accessibility for users with visual impairments is 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 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 webforms into the AI chatbot, streamlining the process so residents can access all services through a single point, reducing the need for multiple touchpoints.