tick@lab Template Editor

Reducing administrative burden with smart form automation

Paper forms have always been a required but disorganized part of documenting animal research. As research moves toward digital systems, electronic forms are becoming the new standard. Our team set out to design a template editor that makes it easy to create and customize digital forms using a simple drag-and-drop interface—removing the barrier for those who don’t know XML (Extensible Markup Language).

Our team was small, made up of two designers (including myself), a product manager, and a software engineer. Despite our size, we were responsible for the entire flow of the template editor. We focused on building a tool that mirrored the logic of XML creation while also supporting multiple languages to meet the needs of our global customers.

See how the Template Editor works

TIMELINE:

6 months,
Launched in Q3 2024

TEAM:

Director of Design
Product Manager
Software Engineer

ROLE:

Product Designer

Not everyone knows XML

Current customers struggle to create templates via XML due to a lack of technical skills. Many have been requesting a WYSIWYG (what-you-see-is-what-you-get) editor for years to make this process easier and more visual.

Before and after pic showing XML code script and how it became a digital form

Taking away time from doing research

Customers wanted a simple, modern, and efficient way to build templates for their research. They needed flexibility to rearrange form inputs and the ability to import or export XSD files for sharing and future editing. These forms would be uploaded onto the application to help with daily documentation such as animal health observations, treatments, and room logs.

However, creating these templates often became a time-consuming task. Users without strong technical backgrounds struggled the most, spending extra time to format and structure their forms, while those familiar with XML could work much faster. This gap pulled valuable time away from actual research.

From XML to Drag and Drop

Building Blocks at Your Fingertips

Users can choose from a set of pre-defined elements in the left panel and simply drag and drop them onto the form. They can also reorder elements to fit their workflow and needs.

To make the experience more accessible for non-technical users, we collaborated with product to rename certain components to sound less technical (e.g., changing “Delimiter” to “Divider”). This helped users who weren’t familiar with XML feel more confident as they built their templates.

We also included tooltips that described each component to ensure that users clearly understood which elements to use based on their template.

The editor is a blank slate with elements you can choose on the left

User dragging the Text Field (Small) element over the form right before it is placed

User dropped the element onto the form and now it is editable

Users can drag and drop elements from the left panel to add them to their forms

Customizing Each Component with Ease

Each element has its own settings on the right panel that users can tailor to their needs. We wanted to make sure every possible setting was visible, including simple on/off choices, without overwhelming the user.

In early versions, all fields were stacked on top of each other, which made the panel feel cluttered. We explored using tabs, but some elements would have needed multiple tabs, and that layout didn’t fit well within the panel.

We eventually chose an accordion design, which kept things simple and easy to use. Users could expand only the sections they wanted to edit and collapse the rest, helping them stay focused on what mattered most.

Before and after images of how the element settings transformed

Design Once, Translate Easily

Many teams work in multiple languages, so our template editor needed a way to handle translations without duplicating work. On the top-right navigation bar, users can choose their preferred language using a language selector. Each element also includes its own small dropdown, allowing users to enter a translated name for that specific element.

For example, a user could start building their form in English, then switch the element language to French and enter the French names. When the overall language is changed in the top-right selector, every translated field across the form updates instantly—making it easy to build templates that support multiple languages.

One of our biggest design challenges was how to select and view languages. We explored options like country flags, best placement, and icons, but each came with accessibility and their relative issues. Through research we decided to use a simple globe icon paired with the language name, which proved to be the most universal and widely recognized approach.

The element is in English and the label is entered Housing Assignment

The element is in French and the label is entered Affectation de logement

The overall form language was switched from English to French and now you see all the French labels entered on your elements

Elements had both English and French labels created so
changing the form language showcased how they both appeared.

Our Impact

The template editor was well received by customers, as it has been a feature they have been requesting for years. While formal metrics have not been established, our primary goals were to improve usability and increase efficiency in template creation.

Following the release, we gathered feedback from customers using the template editor in other projects. They consistently shared that it was much easier to use than coding templates in XML and that they could now create multiple templates in the time it previously took to make one.

~80%

Improvement in Usability

Users reported that the template editor is much easier to use than coding templates manually.

3-5x

Increase in Efficiency

Users can now create multiple templates in the same time it previously took to build one manually via XML.

Final Thoughts

The template editor was an exciting project that taught us a lot about designing for global users and the unique challenges that come with it. This was also one of the first projects at tick@lab to include UX design from the start, shipping with a modernized interface.

It was incredibly rewarding to hear positive feedback from users, especially during sessions where they were eager share their thoughts. I’m very grateful to have been part of tick@lab’s first design team, helping implement their vision and support researchers in their daily work.