Simulation Builder - Editor
Lead Designer, TaTio Ltd.
Background
The Simulation Editor was designed to empower product owners to create, customise, and deploy hiring simulations effortlessly—without relying on developers or designers. This tool provides an intuitive interface where users add pre-defined components, configure advanced conditions, and preview their simulations in real-time.
Target Audience
Product Owners
Problem Statement
Creating hiring simulations was once a slow, manual, and resource-heavy process. Building a simulation required a long characterisation phase, multiple teams (designers, developers, product managers), and months of effort. The rigid structure meant limited flexibility, making adjustments for different roles or scenarios difficult and costly..
The Core Challenges
Time-Consuming – Each simulation had to be manually built from scratch, requiring a long characterisation process that could take months to complete.
-
High Cost & Resource-Intensive – The process involved multiple teams, including developers, designers, and product managers, significantly driving up costs.
-
Lack of Flexibility – Simulations were built with fixed flows, meaning they couldn’t easily be adjusted for different roles or hiring needs without redoing major parts of the work.
-
Limited Iteration & Experimentation – Since changes required developer involvement, hiring teams could not test and iterate on their simulations efficiently.
Opportunity
We needed to eliminate the manual simulation creation process by designing a flexible, scalable, no-code Simulation Builder. This would empower hiring teams to:
-
Create, modify, and customise simulations independently without technical expertise.
-
Drastically reduce development time and costs by providing a self-serve, no-code platform.
-
Enable rapid iteration so hiring teams can effortlessly adapt simulations to different use cases.
My Role - Solo Lead Designer
As the lead designer, I oversaw the development of all the user experience and interface aspects.
Challenges
1. Complexity vs Usability: Balancing the need for robust functionality with an interface simple enough for non-technical users.
Solution: Focused on minimalistic design, logical workflows, and clear onboarding to keep the experience straightforward.
2. Scaling for Diverse Needs: Ensuring the editor could handle different industries and simulation types without becoming overly complex.
Solution: Modular design allowed users to select only the components relevant to their specific needs.
3. Technical Constraints: Integrating the editor into existing systems without disrupting workflows.
Solution: Close collaboration with developers ensured integration and scalable architecture.
Goals
• Simplify the simulation-building process with an intuitive editor interface.
• Reduce simulation production time from months to days.
• Enable advanced customisation (e.g., validation and scoring) while maintaining ease of use.
• Ensure the tool scales for various sectors and hiring needs.
Research & Insights: Understanding User Needs
To ensure the process was user-centred, I conducted the following:
-
User interviews with product owners and simulation builders to understand the pain points of the manual process.
-
Usability testing on early prototypes, identifying pain points in
-
Competitive benchmarking of no-code and low-code builders to understand best practices in UX UI design
Key Findings
-
Users wanted full control – users wanted to create and adjust every part of a simulation without waiting for engineering support.
-
Flexibility was key – Users needed the ability to customise workflows rather than being locked into predefined structures.
-
Real-time feedback was missing – Users often didn’t realise they had misconfigured a step until they tested the full simulation.
Design Process
After gathering research insights, I iterated through multiple design versions, refining usability, efficiency, and flexibility.
Version 1: Basic Editor
Key Features:
-
Introduced a basic system with a limited number of components (text, buttons, simple tasks).
-
Allowed users to rearrange steps but had no real-time validation or error prevention.
-
Menus were rigid, requiring users to navigate to separate sections for configurations.
Limitations:
-
Could not handle complex hiring scenarios.
-
No conditional flows or branching logic.
Main Iteration 2: Complex Components & Logic
Key Upgrades:
-
Added communication panes & chat interactions, making simulations more interactive.
-
Introduced variations and conditions, allowing users to customise paths based on candidate responses.
-
Improved responsiveness, making it smoother and easier to use.
-
The editor environment UI was developed dramatically
Impact:
-
Enabled more realistic, job-specific scenarios.
-
Users can now set up conditional flows independently.
Main Iteration 3: Complex Components & Logic
Key Upgrades:
-
Replaced old side menus with floating configurators, allowing users to edit elements inline without navigating away.
-
Introduced real-time preview mode, allowing users to see changes instantly.
-
Simplified UI navigation, reducing clicks needed to configure simulations.
Impact:
-
Faster workflow—users can now edit directly in the workspace instead of switching between menus.
-
A lower learning curve, making the tool more accessible for non-technical users.
-
More intuitive design, reducing setup time by 30%.
User Testing & Refinement
• Conducted usability tests with real users to uncover pain points.
• Refined the interface based on feedback, ensuring that even non-technical users could navigate it seamlessly.
• Improved workflows to reduce the number of steps required to create and deploy a simulation.
Final Key Features
1. Drag-and-Drop Interface - Visually arrange text, videos, and tasks. No technical knowledge is required to build fully functional simulations.
2. Real-Time Validation - allows users to create smart and targeted scenarios by setting conditional logic and validation rules.
3. Condition and Scoring Configuration - admins can set detailed conditions and scoring rules, ensuring simulations are tailored to specific job requirements and provide meaningful evaluation metrics.
4. Instant Preview Mode - users can preview their simulations as they build them, allowing for quick adjustments and ensuring the end product aligns with their expectations.
Problem Solved
The solution incorporated a drag-and-drop interface to simplify simulation creation. It included diverse components, a validation area, and advanced functionalities for setting conditions and calculating scores.
Adding snapping guides and tooltips
Outcomes and Impact
-
Reduced Production Time: Reduced simulation creation time from 3–5 months to just 2–5 days.
-
Enhanced Functionality: Provided a wide array of tools and features for building complex simulations.
-
Advanced Customisation: Implemented advanced condition settings and score calculation capabilities.
-
Increased Efficiency: Smoothed workflows and an intuitive interface boosted productivity.
-
User Satisfaction: Positive feedback highlighted increased efficiency and ease of use, demonstrating the tool's impact on simulation development.
-
Business Impact: Enabled the company to scale simulation offerings across multiple sectors, driving growth and increasing client satisfaction.
