top of page
  • Writer's pictureJayendra More

The UI vs UX Debate: Demystifying the Differences — Part Two

UI vs UX is an old subject and an ever-going topic of conversation among everyone, let’s continue our discussion on UI vs UX from our first blog. We covered the basics of UI/UX in the first blog, where we started with our Five W’s framework and understood the meaning of the first 2 W’s (What & Why), covered 5 elements of UX, Elements in the skeleton, Why do UI/UX matter in the previous blog. We will cover the When, Where and Who of the UI/UX in this blog. So let’s begin.


UI vs UX
source: uxdesigninstitute

When Does UI/UX Come into the picture?


Product Path
Source: Kellogg PGPM

Now, we are onto the third one, When. When does UI/UX come into the product or feature life cycle? It is easier to say always, but I think it’s especially important at the beginning and the end of the product/feature design cycle. In the beginning, we do want UX designers to talk with the product's potential users, to see what people need, and to observe the user behaviour so that we can make a product that people want in the first place. Once done with this then we will be handing this over to our UI designer to create the interface that the users then will use. We would also require them at the end once the feature is designed and it is really important, let me explain why. So once the product team has ideated a feature and the engineering team has built a beautiful system or process or program or product or feature, you’re going to want to have users test what has been built, so that you can learn and continue to iterate and understand whether you have matched the requirements of the end users. There is this beautifully written book called Lean UX, one of the great books and a highly recommend one for those who are going to work in a tech company or are currently working in one. We understand from this book,

The Lean UX Cycle there are three different parts or stages of this Lean UX cycle.

1. Thinking

2. Making

3. Checking


Lean UX Cycle
Source: Kellogg PGPM

1. Thinking

We have the Thinking first — here all of the research happens, mental models are built here and the ideation is done in this stage of the Lean UX. All the things and stuff that we want to be at the centre and front as a product team are highlighted here.


2. Making

Once all the requirements are clear the design team will start making, and the design team will build the prototypes, the wireframes, and all other kinds of stuff. And so, this is the beginning that we mentioned. The design needs to be front and centre and have a voice in the room along with the product team. Then once the designers have created those wireframes and that high-fidelity prototype, we will then hand it over to the product engineering team and they’re going to be building the product/feature that the designers have created.


3. Checking

Once the engineering team have received the feature to develop, they will start coding & developing the feature/product, and they will be bug testing the developed feature/product and all other stuff that is involved in the development and release phase of the product/feature. Once the team has built the product/feature, we want users to try it out, UI/UX designers are going to be back in the picture again, checking to see how it works in the real world. The product and engineering team will be doing A/B testing, they will be dogfooding with other people at their organization, maybe using special software so that they can see how, and where people are clicking on the app, they will be looking at reviews, they will be testing it with users, and so as a UI/UX professional, it is really important at this moment that you’re getting that feedback so that you can go through this process, again and again, to continue to iterate and hone in on what they’ve designed.

So, in conclusion, this is the when and it was a bit of a freebie because UI/IX always should be in the picture, you always need a designer in the product development cycle. But I say it’s really important at the beginning and end so that you can make sure that you continue to get that user feedback to build a great product.


Where Does UI/UX Happen?

Now next in our list of five Ws, it’s where does UI/UX take place? So let’s begin with keeping our focus more on the UI and the complete process of designing, the user interface design, you’ll probably start a low-fidelity prototype in drawing form.

So, the designer may use a sharpie and post-it notes. The designer could have a Sketchbook, they are just trying to get the thoughts in their mind out on paper to visibly show the other designers and engineering team that they’re working with to get feedback, and then as the designer becomes more confident in the design, they’ll want to build a higher-fidelity prototype. And so, the designer might use a wireframing tool such as

Balsamiq(tool), and then eventually a prototyping tool that looks a lot more like a real product/feature in real life. And once this is done, the designer could use Figma(tool), he could use Sketch(tool), he could use Adobe Creative Cloud(tool). We at our company use Figma. They have nice collaboration features and it’s all in the Cloud– so easy to collaborate with team members. Alternatively, let’s just say you want to build a really simple website. You may want to just use a website builder. You can use WordPress(tool),

Wix(tool), and Squarespace Inc.(tool). But those are ways that you can also create a straightforward user interface with tools that are already built in for you to play with.



Prototyping Techniques
The general flow of feature ideation to handover to developers is shown below (Source: Kellogg PGPM)

User Experience Analysis UX designer is more focused on user experience, he is more focused on the product experience that is being delivered to the users. A lot of research & analysis goes into a UX job. Three things go into user experience analysis.

1. Qualitative Research Being a UX designer, you’re required to do more qualitative research, you’re probably going to want to meet with real users. And so, this could be a focus group, 8–10 people that you get into a room. It could be a one-on-one interview. You could do this over Zoom(tool)or a phone call. You also maybe want to just observe people in the natural environment using things. For example, if you were designing a playground, maybe you want to watch children. Let’s say, you were designing an app, you may want to watch people use the app live and see where their fingers go and their eyes are. So, that’s qualitative.

2. Quantitative Research Next, let’s say quantitative. And so, this is going to be when you want to get more data at scale. So, first, desktop research. You can use stuff that already exists, and that somebody already put together to save you a ton of time and hassle. For example, management consulting firms often have reports that exist like BCG or McKinsey. It’s great to look at a white paper to get more familiar with the topic that you’re studying. The census is great, and Wikipedia is great. And so, all these things are stats that already exist and that you can incorporate into your thinking. You can also create a survey, and so which can be 8–10 questions. You can use SurveyMonkey(tool). You can use a Google Form(tool), and you can send it out to a lot more people at once. You can shoot emails to 500 people that have used your product before and are loyal users. You can get their thoughts and feedback as you’re designing

3. Synthesis Let’s imagine you have gotten all this great qualitative research, all this great quantitative research, and now you need to use it for something. And that process, we call synthesis. But, usually, in synthesis you’re taking all these things that you found, all the facts, the stats, the quotes from those interviews, and you’re going to want to put those into themes. And technically, we usually do that. We use sticky notes, actually, and that’s where we put a lot of our findings, and we cluster them together in a more virtual environment. You may use Google Docs. You may use a product like a Miro(tool) or a Mural(tool), but you must use these things that you learned when you’re designing.

So, just to recap, where things happen depends a little bit on if you are more focused on the UI side or the UX. If you’re focused on UI, you might start by drawing and then you’ll probably use some type of prototyping software. If you’re focused more on UX, you will be talking with users in some form or fashion or sending out surveys either via email or the mail depending on your demographic. And so, that is where this part takes place.

Where things happen depends on if you are focused on UI or UX. - UI: Drawing and then using a type of prototyping software - UX: Interacting with users or sending out surveys

Who works in UI/UX? Right now, we are at the fifth W, and we’re going to go over who works in UI and UX. Now that we’ve done talking about all of the magic that happens within the user interface and user experience, let’s see who does these roles in the real world.

Responsibilities of a User Interaction Designer: Example 1. Collaborate with product managers, engineers, and cross-functional stakeholders to understand requirements and provide creative, thoughtful solutions 2. Integrate user feedback and business requirements into ongoing product experience updates 3. Communicate the user experience at various stages of the design process with wireframes, flow diagrams, storyboards, mockups, and/or high-fidelity prototypes 4. Advocate for the prioritization of design-centred changes, refinements, and improvements

Responsibilities of a UX Researcher: Example 1. Conduct independent research on multiple aspects of products and experiences 2. Collect and analyze user behaviour through lab studies, field visits, ethnography, surveys, benchmark studies, server logs, and online experiments (A/B testing) 3. Work with designers, product managers, engineers, and other UXRs to prioritize research opportunities in a fast-paced, rapidly changing environment 4. Understand and incorporate complex technical and business requirements into research 5. Advocate research findings to diverse audiences through written reports and in-person presentations So, as you can see, the UI designer has to focus a little bit more on the technical aspects of the design. So, the wireframes, the buttons, the flows, the prototypes. The user experience researcher needs to focus a little bit more on the user and the people, and they’ll be conducting those qualitative and quantitative research methods out in the field. We’ve covered the five Ws, and I hope now you have a better understanding of what UI and UX are in the tech field.

 

I hope that this article helps you understand UI & UX along with their importance and the elements attached to them. Please share your thoughts on the topic in the comments. If you enjoyed this article, please follow me here on Medium for more stories about Product Design and other Product Management related topics.


I am always open to having a healthy conversation over a cup of coffee. Connect on LinkedIn here, Twitter here

2 views0 comments

תגובות


bottom of page