TICK@LAB / TEMPLATE EDITOR / PRODUCT DESIGN

Build the form. Skip the XML.

A visual template editor that helps research teams create the forms they need, without needing to write code first.

PRODUCT DESIGN / TWO DESIGNERS, PRODUCT & ENGINEERING / 6 MONTHS / LAUNCHED Q3 2024

Shipped tick@lab Template Editor with an element palette, form canvas and field settings

01 / THE CHALLENGE

Creating a form shouldn’t require a coding detour.

Researcers use tick@lab templates to document tasks like animal health observations, treatments, and room logs. Creating those templates meant working with XML and XSD, which put a technical hurdle in front of people who simply needed a form. Customers wanted a visual way to build and update their templates.

01 / THE CHALLENGE

Creating a form shouldn’t require a coding detour.

Researcers use tick@lab templates to document tasks like animal health observations, treatments, and room logs. Creating those templates meant working with XML and XSD, which put a technical hurdle in front of people who simply needed a form. Customers wanted a visual way to build and update their templates.

02 / MY CONTRIBUTION

Turning technical requirements into a visual workflow.

I partnered with my manager to design the template editor, refine its workflows, and resolve edge cases with product and engineering.

02 / MY CONTRIBUTION

Turning technical requirements into a visual workflow.

I partnered with my manager to design the template editor, refine its workflows, and resolve edge cases with product and engineering.

03 / FROM CODE TO CANVAS

Choose it. Drag it. Make it yours.

We replaced code-first template creation with a toolbox of predefined elements, a form canvas, and a settings panel. People could add and reorder fields visually and adjust the details. We also renamed technical labels like “Delimiter” with “Divider” and added tooltipsso any users can utilize components without having to look up the meaning of the component. Templates could still be imported and exported as XSD, keeping them shareable and editable within existing workflows.

Choose a predefined element from the editor palette

01 / CHOOSE AN ELEMENT

Start with familiar building blocks instead of a blank XML file.

Dragging a text field from the palette onto the form canvas

02 / DRAG INTO PLACE

Add fields where they belong and reorder them as the form takes shape.

Selected form field with editable settings in the right panel

03 / EDIT THE DETAILS

Set labels, attributes, and restrictions without leaving the editor.

04 / MANAGING COMPLEXITY

All the settings. Less of the clutter.

Showing every setting at once made the panel feel crowded. Tabs helped group the fields, but became less useful when an element had lots of properties. We landed on collapsible accordions for Element, Attributes, and Restrictions, so people could open what they needed and hide the rest away.

Earlier stacked and tabbed settings layouts

EARLIER / STACKED FIELDS & TABS

Grouping helped, but a long list of properties still competed for attention.

Accordion settings shown expanded and collapsed

REFINED / EXPAND ONLY WHAT YOU NEED

Collapsible sections kept the available controls without showing them all at once.

05 / DESIGNING FOR MULTIPLE LANGUAGES

One template. More than one language.

The editor needed to work for teams using different languages. We separated translating a field from switching the whole template: a field-level language selector lets people enter translated labels, while the global selector changes the language shown across the form. We chose a globe and language names rather than country flags, because a language isn’t tied to just one country.

Entering a French translation for a field while the template remains in English

01 / ADD THE FIELD TRANSLATION

Enter the translated label in the field’s settings without changing the rest of the form.

Global French language selection displays translated labels throughout the form

02 / SWITCH THE TEMPLATE LANGUAGE

Use the global selector to see the translated labels together in the form.

06 / WHAT CHANGED

Less time building forms. More time using them.

80%

ESTIMATED USABILITY IMPROVEMENT

Compared with creating templates in XML.

3–5×

ESTIMATED EFFICIENCY GAIN

For template creation with the visual editor.

After launch, teams described the editor as easier to use and faster than writing XML.

07 / LOOKING BACK

Simpler doesn’t mean less capable.

This project was about making a technical task approachable without taking away the controls people needed. The small decisions mattered: clearer labels, settings that stayed out of the way, and language controls with distinct jobs.

Try the Template Editor