The difference between UX Design and UI Design

DesertTech e-commerce home page design

These days it seems like everyone‘s calling themselves UI/UX Designers but do they really understand what that means? There are a lot of UX Designers that get started with a background of graphic design (brochures, small websites, business cards) and move into UX Design.

Graphic design is a great prerequisite when moving into UX but not necesserily required. You see, UX is all about (as the name explains) the User’s Experience. You can have a very attractive app that a user just doesn’t get.

Alternatively, there are very hideous looking apps and sites that have a great User Experience. Take for example. A new user can go onto the site with the idea they want to find an Apple Watch Series 1, in Utah, for less than $160 and in less than 60 seconds, they will find it.

What Does UX Design Look Like?

UX Design — Designing enough to discover behaviors to pivot to a great user experience

The above image shows a new e-commerce website we are building for DesertTech. Before we begin the pretty stuff, we simply link up rectangles and text so we can interview DesertTech’s target audience and gain insight on what they like, what confuses them, and what features they’d like to see.

Designing this way gives us the advantage to be nimble and pivot drastically with changes without sacrificing time on the colors, images, layout and all other aspects of design.

What Does UI Design Look Like?

UI Design — Slapping pretty pixels on the shell after you’ve already confirmed your users are going to enjoy the experience.

User Interface Design, as shown in the image above, is the phase where we think about the colors, layout, images, and styles. The asthetics of a site can be a key player in getting a user excited about discovering the experience and sticking around long enough to enjoy the hard work you put into UX.

We begin UI only when we’ve confirmed that our app or website has a great navigation and user experience. This empowers us to design faster ship a product that has a great UI/UX balance.

While finding someone with both UI and UX experience can be great. It’s not required. There are a many companies that have both UX and UI positions that work together without one or the other needing core strengths in both.

So What is the Difference Between a User Experience and a User Interface?

The image above (left) shows what our prototypes look like as we’re solving for UX problems. If we were to begin designing with higher fidelity UI on the right during this stage, a lot of work would go into pixels that would quickly be discarded afterwards. That’s lots of wasted time and effort.

To the right, we can finally think about all design layouts, patterns, styles and all other things that make up the asthetics.

The video below will show you a quick glimpse into our process for designing the home and product page. I’ve sped this video from 1hr 20 min down to 3 minutes for those that are in a rush ;)

Design process for DesertTech e-commerce home and product page.

So there you have it! Be sure to post comments below if you need further explanation. I’d be happy to chat!