Open to work I'm available for new UX design positions and projects — either remote/hybrid or located near Aarhus, Denmark.
How I can help Download resume Get in touch

KMD XForm TextManager

KMD XForm Responsive Editor buried user-facing text in HTML, making editing difficult.

After research with professional translators and concept development, I designed an Excel-style interface that made text editing and translation straightforward and accessible, with markdown support and previews.

  • Tags

  • Product

    KMD XForm

  • Domain

    B2B SaaS — forms and self-service

  • Design task

    New editor for managing translated texts in forms

  • My role

    UX Designer

  • Years

    2016

Challenge

The KMD XForm Responsive Editor is a powerful yet quite technical tool where the user-facing texts are buried deep in HTML code. So, we needed a way to extract this content and present it in a less daunting UI suited for easy text editing and translation between languages.

Process

I interviewed professional translators to find out how they worked and researched market-leading translation software. I did a number of conceptual wireframes to explore different workflows and app layouts. Through a number of iterations consulting with developers and my product manager, we reached a viable design. Then I created a production-ready custom UI framework for the new app to hand over to developers. During agile implementation I continuously collaborated with developers to resolve any issues found.

Outcome

A brand new web app with a table-like UI familiar from Microsoft Excel thus understandable for non-technical people. The app supported markdown syntax including previewing, for simple, yet powerful basic text formatting.

The final KMD XForm TextManager design with one text per row: text keys and two translations side-by-side.
The final KMD XForm TextManager design with one text per row: text keys and two translations side-by-side.
One of the first conceptual wireframes.
One of the first conceptual wireframes.
Exploring a concept with a text navigation on the left and the translations on the right.
Exploring a concept with a text navigation on the left and the translations on the right.
Investigating one large 'spreadsheet canvas' of translations with both vertical and horizontal scrolling. This was judged too cumbersome to navigate.
Investigating one large 'spreadsheet canvas' of translations with both vertical and horizontal scrolling. This was judged too cumbersome to navigate.
Wireframe flows for how language 'layers' are added to individual forms.
Wireframe flows for how language 'layers' are added to individual forms.
Mockup of how language texts and {{ keys }} could be handled in the source code in KMD XForm Responsive editor.
Mockup of how language texts and {{ keys }} could be handled in the source code in KMD XForm Responsive editor.
I created custom flexbox-based HTML/CSS frameworks to have full control of the look and feel of the app and to ease the lives of developers.
I created custom flexbox-based HTML/CSS frameworks to have full control of the look and feel of the app and to ease the lives of developers.
Open to work I'm available for new UX design positions and projects — either remote/hybrid or located near Aarhus, Denmark.
How I can help Download resume Get in touch

Related cases

View all portfolio entries