When I was in France with my family on holiday, I started thinking (unlike most romantic comedies) about UX tools and had an urge to build something. It had be build-able without internet and not get me into too much trouble for ‘always being behind my computer’. So I decided to build a simple proof of concept program that explores the concept of UX source files.

Why we need UX source files

Perhaps relevant to mention that for a while now, I no longer ‘draw squares for a living’, I’m now paid to write code. That code explains how a program should work in a human readable way. Other software turns that source code into a program. I believe we need something like that for UX.

UX designers use lots of files. Photoshop files, Word files, Axure files, etc. Or they use an online account from a company that may or may not exist 3 years from now. These closed file types and accounts don’t feel very comfortable to use. I prefer an open alternative.

You could say the functional design document is the text based source for the UX design, but there is no software that turns that document into the different assets you need to explore and communicate your design.

The goal is to have files that read like functional design documents, but are much more powerful. They can be easily modified with tools and be used to generate all the assets you need in your process (wire-frames, presentations, etc). Let’s call them .ux files for now.

These files are:

Text based

Human readable

Written using rules that allow you to easily express and connect different aspects of your design.

With these files you can:

Easily share, thus prevent vendor lock-in.

Generate documentation and other artifacts like prototypes.

Make use of existing tools for text manipulation, like text editors and version control.

Current languages don’t qualify for these files. How do you write a user scenario in HTML? And how do you link a persona to a user scenario in a .doc file.? My prototype can be seen as a first sketch of a language for .ux files.

The .ux proof of concept

I made a small tool for UX designers. At the moment it can create create source files for wire-frames; you provide text input, and it returns a text-based wire-frame. Then there are some commands to manipulate your wire-frame and you can view the source file with the command /uxw-source .

Now let’s do some updates.

I started with these text renderings of the wire-frames, perhaps nice for the front-end developer to add at in the source code. But if you may also want an image for a presentation or to print out to sketch on.

You can also take the source with you. The source code is more readable as the commands I entered. At the top is the layout, and below are the details (attributes) of the blocks.

You can try it out

Feel free to play around. The core rules for creating a wire-frame are that the , splits blocks horizontally, and - and lines split blocks vertically. For more help, type /ux-help in Slack. It only does wire-frames for now, but the whole point would be that it eventually could cover all aspects UX design.

Click the button below to add the slack bot to your team, this will bring you to the permissions screen of Slack if you’re logged in:

The potential

While the prototype only covers a basic form of wire-frames, here you can see how a .ux file for a small UX project could look like that covers more UX design aspects:

True UX tool

// This document describes different aspects (goals, personas, scenarios, wire-frames) of the UX design of the "True UX tool" project. # Goals

// can be linked to user scenarios // Each line is a goal. "Use" is name, the rest description.

Use; Stimulate usage of slack bot

Follow; Stimulate people to "Follow" on Medium

Feedback; Stimulate feedback on .ux language, and tool in general # Personas ## Persona: Mike

25 male UX designer at a big company who would like to contribute to the field of UX design.



## Persona: Anne

33 female works at JetBrains, has time to do research at her job



# Scenarios ## Scenario: Get feedback // A scenario is always from the perspective of a persona

persona = Mike // A scenario is always related to at least one goal

goals = Use, Feedback // Each line is a step in the scenario

Browses Medium looking for new UX articles

Reads article 'A True UX tool'

Clicks link at end of article to 'Creating a true UX tool'

Clicks link to (at moment non-existing) website

Wire-frame:Home; learns about goals, is interested to learn more

Wire-frame:Home; clicks 'About us'

Wire-frame:About us; reads and wants to get involved

Sends email, based on contact in footer

Sends persona:Anne a link to the articles. # Wire-frames ## Wire-frame: Home

menu

content

footer



### Details

// Set extra attributes to components of wire-frame mentioned above content; note"Explains core mission above the fold"



## Wire-frame: About us

menu

content

footer



### Details

content; note"Tells who we are, what we do, etc"



## Details

// Details for level ##, both "Home" and "About us" footer; height=3 note"should include social media links"

content; height=8

You can imagine that you could use it to generate flow charts, component documentation, clickable prototypes, a presentation on different flavors for a specific component, etc.

What I learned by building the slack bot so far:

There should be a difference between the language for creating and manipulating .ux files and the source files themselves. Commands should be short and easy to type, like footer;w8h1 for a footer that’s 8 columns wide and has height of 1. But in a source file you’d like to read footer; width=8 height=1 .

for a footer that’s 8 columns wide and has height of 1. But in a source file you’d like to read . It’s fast. Even now, there are use-cases where this prototype can be faster to use than sketching it on paper, or using paint.

Text based input doesn’t make sense for everything. So yes, while /uxw-rename works, it would be nice to double click on a block to change the text. I’ll probably make a GUI prototype later.

works, it would be nice to double click on a block to change the text. I’ll probably make a GUI prototype later. I’d like the source code to use Mark Down symbols in a way that it would look good in a markdown reader.

For me, the usage of .ux files makes sense. It provides a standard on how to describe different aspects of UX design and it allows for tools to be created that make use of them.

It’s hard to judge the real value without feedback from real users and without expanding the tool into more aspects of UX design. So it would be great if you could help me out by checking out the slack bot and letting me know how it could be improved by writing a comment.

Next up, I’ll be exploring a feature described in my first article:

Make it easy to create rich persona’s and customer journeys

Update: The next article is over here , newsletter sign-up and feedback form here.