March 22, 2021

What’s the difference between UI and UX?

UI and UX are two terms that are often used interchangeably and confused for one another, but what do they actually mean? And is there a crossover between them?

These two terms have only grown in use in recent years, thanks largely to the exploding technology sector. This is great news. For organizations, effectively harnessing UX and UI enables them to build products and services that people will actually want to use – and continue using. For users, they’ll have access to products designed for them. 

What is UX? 🤳🎯

User experience (UX as it’s commonly called) refers to the experience that a person has with a product or service. 

We can determine whether a user experience is good or bad based on how easy (or difficult) it is for users to interact with the various elements of a product or service. Is the sign-up flow easy to use? Does the CTA button on the homepage encourage users to click? UX design exists to answer questions like these – and here’s how.

At the core of UX design is user research, which you can use to understand customer pain points and actually build products designed for the people using them. Typically, user research involves the use of a number of different research methods designed to answer specific questions. Card sorting, for example, can show you how people think the information on your website should be arranged.

Designer and information architect Peter Morville came up with the user experience honeycomb, which demonstrates the various components of UX design.

The UX honeycomb. Source.

Don Norman of Nielsen Norman Group defines UX as “[encompassing] all aspects of the end-users interaction with the company, its services, and its products”.

If this seems broad, that’s because it is. UX actually extends beyond just the digital products of an organization and can be used for areas like retail, customer service and more. In fact, there’s actually a growing movement to replace UX with customer experience (CX), as a way of encompassing all of these disparate elements.

What is UI? 🪄📲

User interface (UI), in the most stripped-back definition, is the interface by which a user and a computer system communicate with one another. This includes the touchscreen on your smartphone, the screen on your laptop, your mouse and keyboard and countless other mechanisms.

With this in mind, user interface design is focused on the elements that users will see on these interfaces, such as buttons, text and images. UI design is all about layout, look and feel. The objective of UI design is to visually guide users through an interface so they can complete their task. In a nutshell, you don’t want a user to think too hard about what they’re doing.

Shown here: The user interface of the Tesla Model S. Source.

UI has its origins in the 1980s, when Xerox developed the very first graphical user interface (GUI). Instead of needing to interact with a computer through a programming language, people could now use icons, menus and buttons. The rest, as they say, is history. Apple came along with the Macintosh computer in 1984 (bringing with it the first point and click mouse), and now we’re all carrying smartphones with touch screens that even a baby can operate.

Like UX, UI has grown significantly – going far beyond what you’ll see on a computer screen. Those involved in the field of UI design today will work as much on the interfaces of computer programs and apps as they will on the user interfaces of cars, wearable devices and technologies in the home. If current trends continue, UI design is likely to become an even bigger field in the years ahead.

What’s the difference between UX and UI? 👀

UX and UI are both essential components of a product or service. You can’t have one without the other, and, as we’ve explored, neglecting one could have serious consequences for your product’s success.

The difference between UX and UI is that UX is focused on the experience of using something and UI is focused on the look and feel of the interface. 

“User Experience (UX) and User Interface (UI) are some of the most confused and misused terms in our field. A UI without UX is like a painter slapping paint onto a canvas without thought; while UX without UI is like the frame of a sculpture with no paper mache on it. A great product experience starts with UX followed by UI. Both are essential for the product’s success”. - Rahul Varshney, co-creator of Foster.fm

The difference between UX and UI is that UX is focused on the experience of using something and UI is focused on the look and feel of the interface. 

Or, if you’d prefer a statement from venerable Nielsen Norman Group: “It’s important to distinguish the total user experience from the UI, even though the UI is obviously an extremely important part of the design. As an example, consider a website with movie reviews. Even if the UI for finding a film is perfect, the UX will be poor for a user who wants information about a small independent release if the underlying database only contains movies from the major studios”.

With this in mind, let’s now take a look at the people behind UX and UI. What do the roles look like in these fields? And, more importantly, what do they involve?

UX and UI jobs guide 📱🧑🏻💻

  • Visual designer: This role works with other design roles in the organization (brand, marketing, etc) to ensure designs match brand guidelines. Visual designers also work with UX designers to verify that designs meet accessibility and usability requirements.
  • UX strategist: At the core, a UX strategist should act as a champion of good UX. That is to say, work to ensure the principles of usability and human-centered design are well understood and utilized. They should also assume some of the responsibility of product-market fit, and work with product managers and the ‘business’ side of the organization to mesh business requirements with user requirements.
  • UX designer: The most common UX profession, UX designers should have a strong understanding of the principles of UX design as well as some research ability. Essentially a jack of all trades, the UX designer will float between all stages of the UX lifecycle, helping out with usability tests, putting together prototypes and working with other areas of the organization.
  • Service designer: The service designer looks at the entire end-to-end process and works with other designers, pulling them when required to liaise on visual designs and UI work. In a smaller organization, the responsibilities of this role will typically be absorbed by other roles, but eventually, there comes a time for the service designer. 

Wrap up 🎬

UX and UI as terms are only going to continue to grow, especially as technology and technology companies continue to proliferate across the globe. If you want to make sure that the user experience and user interfaces of your product or service are fit for the people using them, there’s no better place to start than with user research using powerful tools.

Share this article
Author
Optimal
Workshop

Related articles

View all blog articles
Learn more
1 min read

Sachi Taulelei: Odd one out - embracing diversity in design and technology

It’s no secret - New Zealand has a diversity problem in design and technology. 

Throughout her career, Sachi often felt like the odd one out - the only woman, the only Pasifika person, the one who laughed too loud, the one who looked different and sounded different. But as a leader, Sachi has been able to create change.

Sachi Taulelei, Head of Design, ANZ, recently spoke at UX New Zealand, the leading UX and IA conference in New Zealand hosted by Optimal Workshop, on how she is building a diverse team of designers at New Zealand’s largest bank.

In her talk, Sachi shares the challenges she’s faced as a Pasifika woman in design and technology; and how this has shaped her approach to leadership and her drive to create inclusive environments where individuals and teams thrive.

Background on Sachi Taulelei

Sachi is a creative strategist, a design leader, and a recovering people pleaser. She has worked in digital and design for over 25 years, spending most of her career creating and designing digital experiences centered on people.

As a proud Pasifika woman, she has a particular interest in diversity, equity, and inclusion. She has spoken out about the need for more diversity within design and technology and the impact it can have on the technology we create.

Sachi is passionate about giving back - when she's not running after her two kids, you'll find her mentoring Pasifika youth, cheering on young leaders through the Young Enterprise Scheme, judging awards for Women in AI, or volunteering at the local hospice.

Contact Details:

Email: sachi.taulelei@anz.com

LinkedIn: https://www.linkedin.com/in/sachi-taulelei/

Odd one out: embracing diversity in design and technology ✨

Looking and sounding different from her peers, Sachi always felt like she was trying to find her place in the office. She always felt like she didn’t belong. 

Sachi has experienced all forms of racism and discrimination as a result of her heritage. These experiences aren’t spoken about and often go unnoticed by the majority. She has held equivalent jobs to male counterparts but received lower pay, and was advised to change her name from Sachi to Sacha on her job applications to improve her chances.  

Sachi’s response was to work hard and become great at what she does, which was recognized over time. Slowly, she began to rise through the ranks. However, having reached leadership roles, she struggled to be heard and participate, without knowing why. The advice was given freely by managers to “stick at it”, to “grow thicker skin”, and to grow through the “school of hard knocks”. Although this advice worked at face value and she flourished, Sachi began to feel like a fraud and constantly second-guessing herself. She began to “edit” herself to fit into an acceptable mold and, in doing so, felt like she lost part of who she was.

What is success? 🏆🎯💎

Success often comes in the form of our leaders who have already climbed the mountains of achievement. When you see success in this way, as someone who doesn’t fit the mold, there is pressure to conform to get ahead. Using the same tools and advice given to these leaders, she realized, would actually hold her back. 

Realizing true value through our uniqueness 🪐🦋

Sachi recounts the treatment of Japanese-American citizens in the U.S. in the years following Pearl Harbour, where Japanese-American citizens were moved to concentration camps. This happened despite an official report finding conclusively that there was no threat from this population. Even though Germany and Italy were also at war with the U.S., for example, citizens with Italian and German heritage were not treated this way. This caused immeasurable pain, shame, and fear for the victims, and fostered a head-down, work-hard mentality in order to try and forget the treatment they received. This attitude, Sachi believes, was passed down to her from her ancestors who experienced that reality. Sachi explains that while there are many things that can hold someone back in life, creating meaningful change starts with introspection. Often, that requires us to work through fear and shame.

Reflecting on her heritage, which is part Samoan and part Japanese, Sachi started to embrace her unique traits. In her case, she embraced the deep empathy and human compassion from her Japanese side and the deep sense of community and connection from her Samoan side. Her uniqueness is something to celebrate, not to hide behind. 

Becoming a leader and realizing this, Sachi wanted to create a team culture based on equity, openness, and a sense of belonging – all things that Sachi wished for herself on her journey.

Why it matters 💫

Once she understood herself and what she wanted for her team, Sachi set to work on building a new team culture. Sachi breaks down key learnings from how she turned this vision into reality.

Define

Define what diversity means for your team. You need to clearly understand what it is you want to achieve before you can achieve it. For Sachi’s team, they knew that they wanted to create a team that was representative of New Zealand. Sachi knew, for example, that she had a lack of Māori and Pacific representation within the team. Māori and Pasifika represent 25% of the population. So, an effort was made to increase ranks by hiring talent from these cultures. 

Additionally, Sachi focused on creating new role levels - from intern right through to graduates, juniors, and intermediate-level positions. This helped to acknowledge age differences within her team and also helped to manage career progression opportunities.

Effort 

It can be difficult to achieve diversity and inclusion and it requires a lot of work. For example, Sachi learned that posting an ad on job boards and expecting to receive hundreds of Māori and Pasifika applicants wasn’t realistic. Instead, partnerships were built with local design schools, and networking events were consistently attended. Job referrals from within the team were also leveraged, as well as establishing a strong direction for recruitment specialists within the organization.

Sachi also recognized that, as a leader, she needed to be more visible and more vocal about sharing her views of the world and what she was trying to achieve. It was important to be clear about the type of culture she was building within her team so that she could promote it.

In less than a year her team grew (from 11 to 40!) which meant a focus on building an inclusive team culture was required. The central theme throughout this time was, “You have to connect to yourself and your strengths first and foremost, before you can connect with others and as a team”. This meant that the team used tools like the Clifton Strength Finder, in order to learn about themselves and each other. Each designer was then encouraged to delve into their own natural working styles and were taught how to amplify their own strengths through various workshops. This approach also becomes handy when recruiting and strengthening potential weak spots.

Integrity

It’s important to have leaders who care - you can’t do it on your own. There can be pain points on the journey to creating diversity and inclusion, so it’s necessary to have leaders who listen, support, and work through some of the challenges that can arise.

Benefits of diversity and inclusion in design teams 👩🏼🤝👨🏿

Why push for diversity and inclusion? Sachi argues that the benefits are evident in the way that her team designs. 

For example, her team:

  • Insist that research is done with diverse customer groups
  • Advocates for accessibility when no one else will
  • Understand problems from different perspectives before diving into a project

Most importantly, the benefits show up in the way that each other is treated, and the relationships that are built with key stakeholders. Diversity and inclusion are wins for everyone - the team, the organization, and the customer.

Learn more
1 min read

UX research methods for each product phase

What is UX research? 🤔

User experience (UX) research, or user research as it’s commonly referred to, is an important part of the product design process. Primarily, UX research involves using different research methods to gather information about how your users interact with your product. It is an essential part of developing, building and launching a product that truly meets the requirements of your users. 

UX research is essential at all stages of a products' life cycle:

  1. Planning
  2. Building
  3. Introduction
  4. Growth & Maturity

While there is no one single time to conduct UX research it is best-practice to continuously gather information throughout the lifetime of your product. The good news is many of the UX research methods do not fit just one phase either, and can (and should) be used repeatedly. After all, there are always new pieces of functionality to test and new insights to discover. We introduce you to best-practice UX research methods for each lifecycle phase of your product.

1. Product planning phase 🗓️

While the planning phase it is about creating a product that fits your organization, your organization’s needs and meeting a gap in the market it’s also about meeting the needs, desires and requirements of your users. Through UX research you’ll learn which features are necessary to be aligned with your users. And of course, user research lets you test your UX design before you build, saving you time and money.

Qualitative Research Methods

Usability Testing - Observational

One of the best ways to learn about your users and how they interact with your product is to observe them in their own environment. Watch how they accomplish tasks, the order they do things, what frustrates them, and what makes the task easier and/or more enjoyable for your subject. The data can be collated to inform the usability of your product, improving intuitive design, and what resonates with users.

Competitive Analysis

Reviewing products already in the market can be a great start to the planning process. Why are your competitors’ products successful and how well do they behave for users. Learn from their successes, and even better build on where they may not be performing the best and find your niche in the market.

Quantitative Research Methods

Surveys and Questionnaires

Surveys are useful for collecting feedback or understanding attitudes. You can use the learnings from your survey of a subset of users to draw conclusions about a larger population of users.

There are two types of survey questions:

Closed questions are designed to capture quantitative information. Instead of asking users to write out answers, these questions often use multi-choice answers.

Open questions are designed to capture qualitative information such as motivations and context.  Typically, these questions require users to write out an answer in a text field.

2. Product building phase 🧱

Once you've completed your product planning research, you’re ready to begin the build phase for your product. User research studies undertaken during the build phase enable you to validate the UX team’s deliverables before investing in the technical development.

Qualitative Research Methods

Focus groups

Generally involve 5-10 participants and include demographically similar individuals. The study is set up so that members of the group can interact with one another and can be carried out in person or remotely.


Besides learning about the participants’ impressions and perceptions of your product, focus group findings also include what users believe to be a product’s most important features, problems they might encounter while using the product, as well as their experiences with other products, both good and bad.

Quantitative Research Methods

Card sorting gives insight into how users think. Tools like card sorting reveal where your users expect to find certain information or complete specific tasks. This is especially useful for products with complex or multiple navigations and contributes to the creation of an intuitive information architecture and user experience.

Tree testing gives insight into where users expect to find things and where they’re getting lost within your product. Tools like tree testing help you test your information architecture.
Card sorting and tree testing are often used together. Depending on the purpose of your research and where you are at with your product, they can provide a fully rounded view of your information architecture.

3. Product introduction phase 📦

You’ve launched your product, wahoo! And you’re ready for your first real life, real time users. Now it’s time to optimize your product experience. To do this, you’ll need to understand how your new users actually use your product.

Qualitative Research Methods

Usability testing involves testing a product with users. Typically it involves observing users as they try to follow and complete a series of tasks. As a result you can evaluate if the design is intuitive and if there are any usability problems.

User Interviews - A user interview is designed to get a deeper understanding of a particular topic. Unlike a usability test, where you’re more likely to be focused on how people use your product, a user interview is a guided conversation aimed at better understanding your users. This means you’ll be capturing details like their background, pain points, goals and motivations.

Quantitative Research Methods

A/B Testing is a way to compare two versions of a design in order to work out which is more effective. It’s typically used to test two versions of the same webpage, for example, using a different headline, image or call to action to see which one converts more effectively. This method offers a way to validate smaller design choices where you might not have the data to make an informed decision, like the color of a button or the layout of a particular image.

Flick-click testing shows you where people click first when trying to complete a task on a website. In most cases, first-click testing is performed on a very simple wireframe of a website, but it can also be carried out on a live website using a tool like first-time clicking.

4. Growth and maturity phase 🪴

If you’ve reached the growth stage, fantastic news! You’ve built a great product that’s been embraced by your users. Next on your to-do list is growing your product by increasing your user base and then eventually reaching maturity and making a profit on your hard work.

Growing your product involves building new or advanced features to satisfy specific customer segments. As you plan and build these enhancements, go through the same research and testing process you used to create the first release. The same holds true for enhancements as well as a new product build — user research ensures you’re building the right thing in the best way for your customers.

Qualitative research methods

User interviews will focus on how your product is working or if it’s missing any features, enriching your knowledge about your product and users.

It allows you to test your current features, discover new possibilities for additional features and think about discarding  existing ones. If your customers aren’t using certain features, it might be time to stop supporting them to reduce costs and help you grow your profits during the maturity stage.

Quantitative research methods

Surveys and questionnaires can help gather information around which features will work best for your product, enhancing and improving the user experience. 

A/B testing during growth and maturity occurs within your sales and onboarding processes. Making sure you have a smooth onboarding process increases your conversion rate and reduces wasted spend — improving your bottom line.

Wrap up 🌮

UX research testing throughout the lifecycle of your product helps you continuously evolve and develop a product that responds to what really matters - your users.

Talking to, testing, and knowing your users will allow you to push your product in ways that make sense with the data to back up decisions. Go forth and create the product that meets your organizations needs by delivering the very best user experience for your users.

Learn more
1 min read

Product Roadmap Update

At Optimal Workshop, we're dedicated to building the best user research platform to empower you with the tools to better understand your customers and create intuitive digital experiences. We're thrilled to announce some game-changing updates and new products that are on the horizon to help elevate the way you gather insights and keep customers at the heart of everything you do. 

What’s new…

Integration with Figma 🚀

Last month, we joined forces with design powerhouse Figma to launch our integration. You can import images from Figma into Chalkmark (our click-testing tool) in just a few clicks, streamlining your workflows and getting insights to make decisions based on data not hunches and opinions.  

What’s coming next…

Session Replays 🧑‍💻

With session replay you can focus on other tasks while Optimal Workshop automatically captures card sort sessions for you to watch in your own time.  Gain valuable insights into how participants engage and interpret a card sort without the hassle of running moderated sessions. The first iteration of session replays captures the study interactions, and will not include audio or face recording, but this is something we are exploring for future iterations. Session replays will be available in tree testing and click-testing later in 2024.  

Reframer Transcripts 🔍

Say goodbye to juggling note-taking and hello to more efficient ways of working with Transcripts! We're continuing to add more capability to Reframer, our qualitative research tool, to now include the importing of interview transcripts. Save time, reduce human errors and oversights by importing transcripts, tagging and analyzing observations all within Reframer. We’re committed to build on transcripts with video and audio transcription capability in the future,  we’ll keep you in the loop and when to expect those releases. 

Prototype testing 🧪

The team is fizzing to be working on a new Prototype testing product designed to expand your research methods and help test prototypes easily from the Optimal Workshop platform. Testing prototypes early and often is an important step in the design process, saving you time and money before you invest too heavily in the build. We are working with customers and on delivering the first iteration of this exciting new product. Stay tuned for Prototypes coming in the second quarter of 2024.   

Workspaces 🎉

Making Optimal Workshop easier for large organizations to manage teams and collaborate more effectively on projects is a big focus for 2024. Workspaces are the first step towards empowering organizations to better manage multiple teams with projects. Projects will allow greater flexibility on who can see what, encouraging working in the open and collaboration alongside the ability to make projects private. The privacy feature is available on Enterprise plans.

Questions upgrade❓

Our survey product Questions is in for a glow up in 2024 💅. The team are enjoying working with customers, collecting and reviewing feedback on how to improve Questions and will be sharing more on this in the coming months. 

Help us build a better Optimal Workshop

We are looking for new customers to join our research panel to help influence product development. From time to time, you’ll be invited to join us for interviews or surveys, and you’ll be rewarded for your time with a thank-you gift.  If you’d like to join the team, email product@optimalworkshop.com

Seeing is believing

Explore our tools and see how Optimal makes gathering insights simple, powerful, and impactful.