Fintech Dello Banking App - New Way to Empower Life
Develop AI Ambassador design system for consistent, accessible user experiences across varied using scenarios and client preferences.
Company
Booking Corp.
Date
Role
Banking
Challenges
Since its 2016 launch, AI Ambassador has grown its feature set and UI components, but without a concurrent design system.
Some designers created new components on their own without sharing, causing duplication of work. Developers, designers, and project managers interpret the product design differently, leading to communication confusion among teams and significant product inconsistency.
The Pilot
I organized a small product workshop in early 2022, inviting core members from engineering, design, sales & business teams, and senior management to discuss the current challenges of the product and identify areas for improvement.
Following the workshop, my team audited the existing UI and synthesized insights from other cross-team discussions and onsite observation to inform our next steps:
1
Identify and Create Reusable Components and Patterns
Gathering commonly used components and patterns from the existing UI will allow us to create a reusable pattern and component library. This will facilitate more efficient collaboration among team members and ensure a uniform user experience across different versions of AI Ambassador.
2
Put Accessibility and Inclusivity into Consideration
We observed a broader user group for AI Ambassador than initially anticipated, from young kids to the elderly. Additionally, some clients from the public sector require AI ambassadors to meet specific accessibility standards.
3
Unify the naming of componenets and patterns
Throughtout all the crossteam workshop and discussions, we all agreed that the absence of a universal naming of componenets and patterns brings huge frictions in product development.
The New Design: Prioritizing Accessibility, Inclusivity, and Consistency
The AI Ambassador is marketed to offer a range of variations for different use cases and devices. Consequently, the new AI Ambassador design system should ensure a consistent and accessible user experience across various screen sizes, from tablets to very large touch screens, and interaction modes ranging from a movable bot to large touchscreen kiosks in buildings.
Old Design
New Design
This showcases the redesigned portrait large touchscreen version of AI Ambassador. Based on our research findings, addressing user fatigue was a key consideration in designing for large touchscreens. Therefore, the UI layout was redesigned to minimize physical effort for users when scanning and interacting with the large display of AI Ambassador.
We referenced various wayfinding and signage consultancies and experimented with internal testing. This led to the development of a style guide with a font scale system ensuring legibility and readability at various distances. One reference was the widely successful "Legible London" wayfinding project.
All reusable components and patterns from existing UI designs were refined and documented in the new AI Ambassador Design System, each assigned a name. This creates a single source of truth for AI Ambassador design development, offering a unified language and defined standards across the company.
Our team has developed an admin panel that complements the front-facing AI Ambassador, enabling clients to configure AI conversations and system settings.
The UI of the AI Ambassador's Admin Panel is based on a design system also used by our Admin Panel Style Products.You can learn more about this design system in my AI Voicebot project.
Outcome
A Scalable Design System Growth with the Team and the Product
Since the launch of AI Ambassador Design System, it helps to maintain the efficiency of the development process of the AI Ambassador and gradually build. Here're some of the findings we summed up:
Our team keeps maintain and contributes to the design system alongside the product growth. 25 new main components were added in Figma after the launching of design system.
Bridge the gap between design and development
Developers have a clearer understanding of how elements should look and function without constant clarification. Designers, developers and project managers have common vocabularies and it reduces confusion and misinterpretation.
Designed Expereince well translated and solve real user problem
In 2023, one of our clients conducted internal research on Asiabots's AI Ambassador and found that over 90% of their staff agreed the AI Ambassador alleviates frontline pressure, particularly in handling visitor inquiries and providing health information. They are also willing to expand its use within their organization.
Compactly Built for Large Project Collaborations
With the highly customizable nature of the AI Ambassador, the design system helps the business and project management team to clearly explain the modes of application of components to clients from large organizations and reduce miscommunication with
