DesignHow UI & UX are Different, and Why You Need Both

Anything with a digital user interface was (hopefully) designed by a UX and UI designer. Whether it be an airline ticketing kiosk or parking meter, if it has a digital interface someone designed it.

Whether or not they took into consideration the user’s experience to seamlessly, successfully and even happily interacting with the interface is another thing. That’s User Experience design. Do they overlap? Absolutely. Do those that practice in the space come from varied backgrounds like Graphic design, Technical communications, psychology, fine arts, even library sciences? (yes I said library sciences. Hello Information Architecture).  You bet.

As a web designer and developer (before there was a formal title called UI/UX), I focused on the cool factor. The pretty stuff as clients called it. I wasn’t thinking much of how to get the user to complete tasks or even encouraging them to do so if the company had a specified goal for the site other than glorified brochureware. Back then, circa 1998, it was all about taking a company’s print marketing and slapping it online as their website. It was all about the company, not the visitor. About Us pages were often listed first and then a stale long boring form for Contact Us rounded out the experience. It was pages filled with lots and lots of content and not many, if any, prompts to get the user to engage or complete a specific task.

Enter User Experience. The field itself and even the name is still in its infancy of being understood. Companies are just beginning to realize the need to embrace and institutionalize the trade for their digital touchpoints.  From a client’s perspective, the role still has a lot of confusion around it that often has to be explained and a value proposition given before you’re even get an opportunity to show the client what they could achieve with a good User experience incorporated into their digital business goals. Or, they expect a UX designer to be a front end developer as well. I’ve often seen job posts that trickle in from recruiters for a UX designer only to read the description and realize what the client really wants is a front end developer. It’s our job to enlighten them as to what UX really is.

I’ve often heard from clients either “we have marketing and graphic designers, we don’t need a UX person on the project” or “What is user experience? That sounds expensive. I already know what I want the site to do, I just need you to make it look good” *sigh* . The better half of my career has been spent proving and explaining to clients why they need to think about the user’s experience on their website or mobile app and not just make it look cool.

After all, if the interface you’re designing doesn’t work to guide users to increase your bottom line and business goals in black and white, it’s certainly not going to do so in pretty branded colors.

A user experience practitioner’s tool belt includes ideation sessions that happen before any beautifully designed mockup should be seen. I’m guilty of being raised as a traditional graphic designer and we all love to jump into <insert design tool> to start showing off how amazing we can make something look for the client. But what happens is that we miss the opportunity to find out if that amazing looking design motivates the user or allows them to achieve their tasks and goals in a simple, intuitive way. A great looking design shouldn’t get in the way of the user’s intended experience. It should facilitate, almost invisibly, to guide the user seamlessly through the intended tasks.

So what’s in that tool belt for a UX designer as opposed to a UI designer?

For starters, it should be you, (the UX designer, Usability Analyst, UX Strategist, now transitioning into Customer Experience (CE) and Customer Interface (CI) designer, <insert latest name for this role>), and the client(s) discovering what the goals are for their app or website. What do they want their USERS to achieve, not necessarily what they want their business to achieve; which is most likely to make money. We get that part. But nudging a client to take the outside into perspective and put their feet into the shoes of the user to empathize with the users is where a UX person should shine in their role.  Empathy for the user is the biggest skill set that sets a UX designer apart from a UI designer. It’s too easy to let the client steer the ship and dictate to you that they know what their users want. But the client is NOT their users. You only know what the user wants by…shocker….asking them! If you do that well and you get what motivates and detracts users in their customer journey with your company from the get-go, the rest of the design and development process should fall into place. That’s in a perfect project of course which doesn’t exist.

UX is not UI

When you start digging with an empathetic view for the intended users other tools will be used to define and solidify the clients goals. Personas emerge as you research the target audience for that business. Is the digital solution meant to serve all their customers or would it be better to narrow in and focus on one of their key personas? Casting too wide of a net to do everything for everybody create an information architecture nightmare with complex requirements to meet everyone’s needs. When you try to solve all the detailed needs for all the users, you end up overcomplicating the main need for the majority of the users. Uber picks you up. That’s all they do. They don’t also ask you if you want to stop for dinner and recommend good restaurants on your route (although that might be nice). But nice to haves should be put on the back burner in favor of the core solution and key business goals that motivate and delight your target audience. Your digital experience can always be expanded upon if done right, but your users won’t come back if you don’t meet their core needs as to why they came to your site in the first place. The UX designer’s motto after all is KISS. Keep It Simple (Stupid)!

From Personas, customer journeys can be created to show the existing experience and all the touch points the user has with the company or product. This is not just touch points online, but a UX person needs to research how customer service handles calls, how emails are responded to, how sales personnel sell to customers. All the touch points need to be mapped, and the motivation, distractors or deterrents those customers have become part of the guiding principles for the digital experience.

So you’ve got the business goals, the user’s goals, the personas and the journey mapping completed. Other tools? Competitive analysis, what are the competitors in this space doing? Heuristic evaluations of existing digital assets like what their existing website or app offers today. What does the existing website or app doing right? What is it not doing right? How can we enhance it to get it right?

With all these tools, you should have built a solid foundation to begin the architecture of the website or app you are creating. Much like building a home, you don’t start with carpeting selection, paint colors or fabric designs, (UI design) you start with the foundation (UX design).

The blueprint begins (wireframes) for the user flows. Screen flows are designed based on user tasks. Here’s where the UX and UI role overlap. If the roles are separate, the UX person can hand off all the assets from the tools mentioned above to the UI person.  But often, the UX person creates the wireframes because they’ve had the first hand knowledge of conducting all the research and know how to motivate the user through an experience.

So you’re lucky enough to get the requirements and wireframes buttoned up without countless cycles and changes from stakeholders. The wireframes have been usability tested and guide your users through their journey to complete their goals? Great!


NOW you’re ready for UI design.

UX and UI DifferenceSource:

As mentioned, if the user can’t figure out the task in black and white lines (wireframe), they probably won’t figure it out in color and pretty pictures. Color has its place strategically, but should not be solely relied upon to guide a user in their goals. A beautiful mockup won’t solve problems of convenience and simplicity.

The UI tools: Visual design, Style guides, branding, typography, photography and colors enter in after wireframes are tested and validated with users in the wild by a usability analyst. (And hopefully again after the final branded designs are done and changes from the first round of testing were applied.)

UI Design encompasses what I’ve been beaten into succumbing to it being called: the pretty stuff. Yeah yeah, it’s MORE than that, but that’s how your clients view it. It’s your job to enlighten them with WHY you choose the color blue for a banking website or WHY orange and red are appetizing colors for their new restaurant. THIS is the traditional role of the graphic designer in print design…translated to the digital space.

Branding comes in and colors are chosen not just because they are in the branding style guide (if the client even has one), but because they call attention to the user to say “hey look at me over here”. They call more attention to strategically placed elements like buttons and CTA’s (calls to action) that the UX designer placed in the wireframes.

Perhaps there’s a large banner advertising a new product on the site. The UX designer will have carved out the location of the banner, but the UI designer designs it to razzle dazzle the user when they see it and hopefully, if we did our job right, motivate them to click and buy the product without even having to think about the process you so seamlessly designed.


reflect/reinforce the title/main content points of the article.