UX vs. UI: What's the Difference?

How we make design decisions significantly impacts our ability to create user experiences that not only delight users visually but also provide the simplest path to user goals—getting users in and out and on their way.

In the most general terms, UX Design (User Experience Design) is the process by which user needs are identified and verified.

UI Design (User Interface Design) is a combination of the aesthetic look and feel combined with interaction design, or how a human interacts and engages with an application as well as feedback and cues provided back to them that signify when a particular action has taken place.

The UX Design Process

At Ventive, there are a variety of UX Design tools we use to ascertain user needs. These needs are derived from two main target audiences:

1) Project Stakeholders of the software application and most importantly…

2) The Actual Users (Customers) of the application

Stakeholder Interviews

At the inception of a project, we work through a discovery phase, in which we conduct stakeholder interviews. We gather all wants and needs, feature sets, tool requirements, visual brand identity guidelines, and more to find out specifics on what needs to be included in an application. Once we get a lay of the land, we move into doing user interviews, research on user analytics, wireframing, and prototype testing.

User Interviews and Personas

During the User Interview process, we ask all kinds of questions about how users are expected to interact with a product, including:

1) What are you looking to achieve?

2) What is most important to you?

3) What things are least important or would deviate from what you’re trying to achieve?

4) Are you able to easily find what you’re looking for?

These are all examples of questions asked during the User Interview process. The interview process can be completed by conducting in-person interviews, monitoring on-site user behavior, or by conducting online surveys.

Through this process, we get to the heart of user needs and validate assumptions down to the most apparent needs through aggregated similarities and differences amongst user responses. This allows us to garner what is most important from a customer perspective, so we can base further design decisions directly from this data.

To further understand the target audience, Personas may be created as well. As defined by usability.gov, “the purpose of Personas is to create reliable and realistic representations of your key audience segments for reference. These representations should be based on qualitative and some quantitative user research and web analytics. Personas are only as good as the research behind them.”

Here's an example Persona:

Analytics Research

If you’re looking to improve upon an existing website or online application, chances are good that you’ll have data analysis software installed (i.e. Google Analytics), which tracks and captures a multitude of user and content data over time.

From this data we’re able to drill down and see the pages users view most often, spikes in traffic to certain content, devices most users are viewing the content from (desktop or mobile devices), demographic insights, user journeys taken through a site to get to their destination (or potentially not get to their destination), and much more.

We may also install Heat Map software, such as Hotjar, to track user interaction. In the graphic below, you can see the hotter, or redder areas are what users are clicking on most over a defined time period. The blue areas signify items and areas of the layout that are less important to users:

Information Architecture, Wireframes, and Prototyping

After gathering and cross-examining user data from interviews and analytics, strategies are formed, hierarchies of information are established, and user journeys are mapped. An information architecture (IA) is then created, which lists out content sections in a hierarchical form. This may also be referred to as a sitemap.

From the information architecture, wireframes are created. Wireframes show the structure of content and are generally a combination of gray boxes, placeholder content, outlines, and navigation that show the overall blueprint of the application. This will be used as the basis for visual (UI) design.

Depending on project budget and timeline constraints, we highly recommend utilizing Prototyping Software, such as InVision to give stakeholders a “live” experience with the application or website.

In this way, we (as well as stakeholders and users) can test and see in real-time if user needs are better met and whether the most important content is easy to find. If not, it gives the opportunity to tweak and modify layout in order to retest and satisfy user goals without the need to visually redesign or re-code elements.

Once the wireframes and/or prototypes have been validated as fulfilling user needs and goals, UX Design findings and deliverables are then consolidated and utilized in UI Design to create meaningful visuals based on UX research.

The UI Design Process

The intersection of stakeholder and user needs have been ascertained. Content strategies are in place. Wireframes and prototypes have been established. A complete design blueprint is ready to build.

Now, it’s time to create the look and feel of the application through the use of typography, color, photography, graphical and written content. Branding guidelines are used to match overall look and feel, provide tone, and to convey the emotion set forth by the brand.

User interactions and micro-interactions are designed, furthering emphasis on visual hierarchy, user cues, and visual (sometimes auditory) feedback.

It is important to note that all design decisions are based upon findings from the UX Design process combined with brand—knowing that style-wise, the visual design must also fit the needs of the user, allow them to find content, and interact with the software in the simplest way possible with the fewest number of clicks.

UI Design can go through several revisions and iterations in and of itself in order to satisfy UX Design goals and brand guidelines. This is all part of the collaborative design process.

At the end of the UI Design process, final designs are packaged and shipped to development for implementation.

Wrap Up

In the overall process of building software applications, whether it be a mobile app, responsive website, or desktop application, UI Design is born out of UX Design. UX is invariably the most important step not to skip in order to achieve the most user-centric experience possible.

Both UX and UI Design are an ongoing process through the lifespan of applications, meshing together for continuous improvements that further narrow in on user goals and needs. Together, they create a powerful and necessary partnership in the role of web and application design.

“I strive for two things in design: simplicity and clarity. Great design is born of those two things.”

- Lindon Leader, renowned designer behind the FedEx logo

Find out what Ventive can do for you in the areas of UX and UI Design and more. Contact Us today!

‍