By Dexter LesacaOctober 1, 2014

Understanding UX Design & Front-End Development

"What exactly is UX?" I get this question a lot. It is a prevailing question that eludes many, including UX designers themselves. Let's try to clear up some of the vagueness around UX, shall we?

What is UX Design?

The Wikipedia definition of UX:

User experience design (UXD or UED) is the process of enhancing customer satisfaction and loyalty by improving the usability, ease of use, and pleasure provided in the interaction between the customer and the product…
—Wikipedia

A UX Designer’s skills revolve around understanding who the user is, how the user thinks, and what the user needs.

UX Roles

There are six major roles that fall under the umbrella of User Experience:

  • User Researcher

  • Content Strategist

  • Information Architect

  • Interaction Designer

  • Visual Designer

  • Front-End Developer

These roles can be, and often are, assigned to individual members of a team. It is more common, though, to find a UX practitioner assuming several of these responsibilities simultaneously.

For instance, an Interaction Designer will also act as a Visual Designer; a Content Strategist will also act as an Information Architect, etc.

User Researcher

A User Researcher employs various methods and tools to gain a deep understanding of the user’s needs. To gather information about the user that will help inform development decisions, a User Researcher will conduct interviews, analyze survey data, and even examine subjects in the field.

Content Strategist

A Content Strategist focuses the planning, creation, delivery, and governance of content. In short, a content strategist guarantees that the content is useful and consumable. They ensure that content is well structured and easily found. The Content Strategist’s domain is not limited to copy. Their job is to consider all forms of media associated with a given project.

Information Architect

An Information Architect organizes content in a way that is navigable and accessible. They will create user flow charts that reflect every possible action that a user may take when moving through their product. They will also create wireframes that show the skeletal structure of each view.

I like to use the “If this were a house” analogy to further explain UX roles:

If this were a house… An information architect would ensure that the master bedroom could accommodate a double bed, two bedside tables, and a large wardrobe; that the kitchen is next to the dining room; and that the only bathroom is not in the garage!

Interaction Designer

An Interaction Designer determines what controls, mechanisms, and processes will be required for a user to partake of an application’s functionality. The designer will decide which interaction components are best-suited for each task. Should we use a drop-down menu, or are radio buttons more appropriate? And what process will that control be attached to? Interaction designers will define the outcome of every user action and how to properly communicate that to the user.

If this were a house… An Interaction Designer would ensure that the cold water tap is always on the right, the stairs have banisters, and the light switches are on the correct side of doors.

Visual Designer

A Visual Designer creates the aesthetics of the product. The designer will develop the aesthetic from scratch or from a company’s brand guidelines. They will use design tools such as Photoshop or Illustrator to compose mock-ups of the application that can later be translated into the product.

They build a color system, establish typographic rules, and use graphic design principles to give the application a cohesive appearance. A good design can lend greatly to the user experience by increasing the product’s ability to connect with the user on a personal and emotional level. Going back to our house analogy, people find it more difficult to stay in a sparsely decorated room with stark white walls than one that is decorated with pictures or paintings.

If this were a house… A Visual Designer would have a role that is similar to that of an interior designer—€”choosing the carpets, curtains, and furniture so they coordinate well, are in keeping with the character of the house, and satisfy the homeowner’s personal taste.

The Front-End Developer

The world of Front-End Development can be defined as anything related to building client-side applications that are viewed in the web browser. You’ll be working on everything a User encounters. The front end is going to be the first thing that a user will see and interact with, so performance is paramount.

As a Front-End Developer, you’ll ensure that this crucial component is built with maintainability, scalability, and performance in mind.

The Stack

The holy trinity of the front end consists of:

  • HTML (Structure)

  • CSS (Presentation)

  • JavaScript (Interaction)

This is the core of front-end technology. You are responsible, as an aspiring developer, to produce carefully written code. Many devs are familiar with these languages; few have mastered them. What separates a front-end developer from someone who just knows, is the ability to employ best practices and techniques.

I think of it like this: Most people can turn on a stove, start cooking, and season a dish to taste. A chef on the other hand has a deep understanding as to why he does what he does. The chef uses his knowledge and technique—utilizing the right tool at the right time—to craft an exceptional dish. Likewise, if HTML, CSS, and JS are the ingredients to an application, it’s going to take a front-end developer’s knowledge of best practices, technique in execution, and ability to discern the right tool for the job to deliver an exceptional application.

Additionally, front-end developers will need to have at least some knowledge of how to interface with back-end environments (Ruby on Rails, Node.js, .NET, etc.). They may not possess expertise in those back-end technologies, but having enough familiarity with that area of a project to work productively with the rest of the development team is a valuable trait.

UX Flavored Front-End Development

As you may have gathered, being a UX designer doesn’t necessarily mean that you will write code at all. UX is a process, using various methods and tools to craft a product that makes sense to the user. Anything can be “UX’d”: phones, stores, toys, and—in our case—web applications. Likewise, being a front-end developer doesn’t mean that you are necessarily UX-inclined, but you know how to build the product to specification. So how do they fit together? UX and front-end development share one big component: The User. UX and front-end development are great together. They belong together, making beautiful, awesome, usable, digital babies together. At Code Fellows, we aim to marry the two.

Our Front-End UX Design & Development Accelerator is divided into 80 percent Front-End Development, 20 percent User Experience Design. During the course, we spend most of our time writing code, because, let’s face it, we’re a code school. We approach front-end development from a UX design standpoint. Our curriculum is tailored to teach the ins and outs of the front-end stack and best practices in developing web applications. Our students ultimately learn to become the lynchpin that bridges the gap between designers and developers, ensuring quality in one of the most important aspects of any web application.