Booking.com
Localization Routing UI
Designing Booking.com's Localization Team Routing UI
Timebound: 6 months
Role: Product Designer
Tools: Figma, Miro
Note: Due to confidentiality agreements, specific details about the platform and proprietary design elements cannot be shared.
Context
The Routing UI tool project for the Localization Team aimed to create a new user interface for managing task routing. The main goal was to make it easier for non-technical teams to set up and manage routing settings, change routing decisions, and request translations without needing help from engineers. This initiative sought to boost efficiency, minimize delays, and enable operations teams to work independently.
The Problem
Developer Dependency: Operations teams were previously reliant on engineers for routing rule setup, leading to delays.
No UI for Configuration: Without a dedicated UI, configurations had to be made directly in the database, an error-prone process.
Scalability Challenges: As new clients were onboarded, the system struggled to scale to meet growing demands.
Objectives
Autonomy for Operations Teams: Enable non-engineer teams to independently manage routing settings and configurations.
Simplified Decision Making: Streamline the process of adjusting routing decisions without the need for developer support.
Enhanced Translation Requests: Facilitate easier and faster translation requests by operations teams, improving workflow efficiency.
My approach
-
To ensure the new interface was in line with user needs, we conducted extensive interviews with Localization Project Managers.
Key findings revealed:
Difficulty in tracking job progress, assigning tasks, and managing deadlines.
A need for a clearer workflow orchestration tool that simplified routing management.
-
A close partnership with engineers and product owners allowed us to align the design with both technical constraints and business objectives. This collaboration ensured that the user interface would work seamlessly within the backend framework.
-
We conducted a thorough analysis of industry-leading tools such as HubSpot, Marketo, Salesforce, and Zapier to gather insights on creating a fluid, user-friendly experience. These platforms helped shape the UI’s intuitive design and interaction flow.
-
Interactive wireframes and prototypes were developed and tested in multiple rounds with key stakeholders. Each iteration was refined based on feedback from usability testing, ensuring a high level of user satisfaction upon launch.
Solutions
-
To reduce reliance on developers, we created an easy-to-use self-service UI that allowed operations teams to manage routing settings and configurations on their own. This included:
User-Friendly Dashboard: A simple dashboard that showed routing rules, project settings, and active translation streams clearly, helping operations teams understand and manage their tasks.
Step-by-Step Rule Creation: The interface guided users through creating and managing routing rules by selecting conditions, building logic, defining actions, and testing rules before activation.
Error Prevention: To help non-engineer users avoid mistakes, we added real-time input validation, clear error messages, and tooltips that explained technical terms in simple language.
-
We created a simpler interface that makes it easy to adjust routing decisions.
Key features included:
Drag-and-Drop Interface: Users could easily create and change rules by dragging and dropping items, without needing to write complex code or ask developers for help.
Decision Tree Logic: For more complex setups, we provided a visual decision tree allowing users to change conditions and actions easily, making it manageable for non-technical teams.
-
The routing system was built to grow with the organization's increasing number of clients.
Flexible Rule Set: Users could easily add or change rules as needed, making it suitable for new clients, varied workflows, and upcoming product updates.
-
We established a continuous feedback system to adapt the design to user needs:
Usability Testing: We carried out several rounds of testing, gathering insights from operations teams, product owners, and engineers to spot problems and improvement areas. This feedback shaped design changes.
Real-Time User Insights: The interface included tools for users to report issues or suggest features directly on the platform, offering valuable insights into user interactions and potential enhancements.
Iterative Prototyping: We used quick prototyping to explore different design options and adjust them based on actual user behavior instead of assumptions.
Results & Impact
The outcome of the project was a new routing UI that transformed how operations teams managed their workflows. By providing them with a user-friendly interface, we reduced the dependency on developers and empowered the teams to:
Increase Efficiency: Operations teams were able to complete tasks faster. Delays caused by developer dependency were eliminated, speeding up workflows and enabling operations teams to work independently. As a result, turnaround times improved, allowing engineers to concentrate on more complex tasks while operations teams managed daily routing.
Improve Scalability: The system was designed keeping in mind that as the tool gained more clients, the tool could expand without straining engineering resources. It also remained adaptable to future needs, ensuring its long-term effectiveness.
Enhance User Satisfaction: By addressing pain points and simplifying complex processes, user satisfaction improved significantly, as evidenced by positive feedback from LPMs and other key stakeholders.
Challenges & Learnings
-
Challenge: It was hard to understand routing systems.
Learning: Worked with engineers to simplify complex workflows into easy designs for non-technical users while keeping functionality. -
Challenge: Engineers communicated in a difficult technical language.
Learning: Changed my communication style and collaborated closely with the product owner to enhance collaboration. Regular check-ins kept us aligned on design and technical needs. -
Challenge: Limited backend resources required changes to some UI features.
Learning: Focused on key features and made compromises on less important elements to deliver value within constraints.