UX, UI and coding: the Unicycle-Riding, Juggling Accountant

I am constantly being recruited to do “UX and wireframes and some coding”.

To me, asking for someone well versed in user experience (UX), user interface (UI) and coding is like saying you want an awesome accountant to take care of some complicated tax matters who’s also a professional unicycling juggler most of the year – it’s just too much for any one person to do all these things truly excellently. Certainly someone can do these two things, but I would argue not as excellently as someone who concentrates their efforts into doing one thing really well. In short, the constant education, skill refinement and research necessary in the UX/UI arena verses the coding fields don’t overlap.

UX and UI Roles

Most of the time a UX designer specializes in a range of user-centered activities. I do contract UX and UI design in Denver and here’s how I usually see the roles break down*:

A Research and Strategy UXer includes being responsible for user research, market research and strategy documents, personas use cases and other documents relating to the customer and his needs (and often user testing of various prototypes after they’re developed). This designer has to be up on the latest cognitive science, psychology and sociology in motivation and behavior as well as be able to understand and evaluate the myriad of usability tests (and why each one should be administered and when).  He should understand and be skilled in ethnography. The researcher has to understand the company, the competitors, the users and the marketplace in order to position the product correctly. He has to understand what the customers are saying and doing and most importantly understand what really motivates them and how the product fits into this.

If you’re lucky the UX person does the user interface, too, but this means they’re also up on the latest best practices in mobile app or website development – exactly how to put the information on the screen in exactly what place to make the user’s path clear and simple. These conventions are changing fast because mobile is introducing new ways of navigating a space and website design follows as it can; for this reason, the UX (or UI) has to be reading articles and books almost constantly. The UI uses the UXer’s personas and user flows to chart a path that the customer will take and then designs interactions based on the best way to help the user get done what they need to. He will often be in charge of the Information Architecture. The UI should have deep experience in static wireframe tools such as Illustrator/Photoshop and also tools to make clickable prototypes – Axure, Balsalmiq, etc. He must know all the rules and regulations of this field (usually called ‘human interface guidelines’) and design wireframes according to these rules for each specific device.

Other ‘Design’ Roles

There are other people who help with the process of creating an app or website:

The visual designer is in charge of seeing that the site is beautiful, clear, and conforms to brand standards. There are many classical art and design conventions as well as current trends to consider; for this reason the visual designer should be very well trained in traditional art/layout/typography as well as an ongoing student of the latest visual trends. The research UXer is of value to the visual designer because of his understanding of the user’s mental model of how the site should work – the visual designer can align the visuals to semiotically reinforce this model.

Content strategist is the visual storyteller, putting images and words together so that the company has a unified, cohesive presence across all their sites (virtual and real-world). In my experience these people are often copywriters, but this is the least of their abilities if they’re any good. They work closely with the Strategy UXer to make sure the message they’re creating will easily align with the message the user wants to hear.

Programming Roles

Front-end developer programs in HTML and CSS. They often are proficient in jQuery and other programming languages like this.  They take the wireframes from the UI and program the base structure, overlaying the visual design over the top. The good programmers strike me as somewhat like poets; their writing is clear and concise and easy to read and it flows well – truly, it’s quite beautiful! But this mastery comes at a price: the good developer is an ongoing student of his trade and there is always more to learn about programming. HTML5 and CSS3 are amazing game changers… if your front end dev has done his homework and knows how to use it to the best advantage!

Programmers use languages beyond HTML and CSS – Ruby on Rails, or Twitter Bootstrap, or Net Object. They function very much like the Front-End developer and have the same responsibility to keep up with innovations in their chosen code.

Back-end developer takes care of the deep programming behind a site – SQL/database, Java, and server concerns. These guys make the site function. The UX who deals with interaction comes to these guys to make sure what they want to do is possible.

Apples and Oranges (or juggling and accounting)

Of course these roles overlap and shift, but I think you can see that UX, with all its user-centered skills and necessary knowledge, is not quite an obvious overlap for the front-end programmer and his need to stay abreast of changes/upgrades in current languages and developments in new ones.

In a Nutshell…

So when you say you want a UXer who wireframes and codes, I think 1. You might not understand what you’re asking for / what you really need or 2. You’re trying to save money by hiring someone who’ll do everything.  You can find people who say they do UX, UI and code, sure – but to me this means you’re the type of business who might trust a professional unicycling juggler with your accounting.


* ’He’ is meant here as an impersonal pronoun in the absence of a true impersonal pronoun in the English language.

For an opinion from a programmer/UXer, see Lukas Mathis’ article ‘Designers are not Programmers’