From 2013 to 2017, I was the primary Interaction Designer/UX Specialist on Capevo XForm, later KMD XForm, a standard platform toolset for creating and operating advanced government-grade web form solutions.
Challenge
How could we enable non-technical people to change user-facing form texts such as labels and headings without having to edit source code? 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.
One of the first conceptual wireframes.
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.
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.
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.
The final KMD XForm TextManager design with one text per row: text keys and two translations side-by-side.
