UX Design vs UI Design with example apps

Every time I introduce myself as a designer, most people assume that I can create a poster, an app or a website for them. What they usually expect from me is high fidelity mockups depicting the end to end flow of what they have in mind. I can’t help but notice the disappointment on their faces when I inform them that I am not that type of a designer. I can’t use Photoshop or Illustrator to save my life! However, this doesn’t mean I am not a designer. Somehow along the way, we coined so many labels to describe designers resulting in a lot of confusion. One of the most confusing terms are the terms of UI designer and UX designer. If you look at job postings, you will be forgiven for thinking that it is a term you can use interchangeably. Unfortunately, that is not the case. Nowadays, a lot of job postings refer to a UI/UX designer but the job description mostly refers to what a UI designer does.

In this blog post, I will:

  1. Attempt to define what UX design and UI design is and outline the differences
  2. Outline the skills necessary for each role
  3. Talk about the outputs from each role
  4. Provide a short guide to help you decide what you should focus on

By the end of the post, you should have a clear idea of the difference between the two, how to prepare and apply for the respective roles, and be in a position to call out job postings that use the term UI/UX erroneously.

Let us start with simple definitions

UX design is an abbreviation for user experience design and it refers to everything you need to know, think about, and do to make sure that you are launching the right product/service for the right people.  Its application is multifaceted as it is not limited to tech products. You can use the process to design non-digital products and services. At the centre of the UX design process is the end-user. We first start by understanding the needs, constraints, and aspirations of end-users before thinking about business goals and the required technology. The outcome of the UX design process is a working solution solving a problem faced by a specific set of end-users. This can be a program/intervention, a physical product, a service, or a combination of a couple of these. For the purpose of this article, I will focus on the application of UX design in creating digital products such as mobile apps and web platforms.

UI design on the other hand is an abbreviation for user interface design and it refers to the creation of the different touchpoints users interact with when using a digital product. Unlike UX design, UI Design is strictly a digital term. UI designers are at times referred to as Graphics designers. The key difference between a UI Designer and a Graphics Designer is how their outputs are used. UI Designers focus on creating customer touchpoints for digital products. This can be in the form of high fidelity wireframes for mobile, desktop, tablet, handheld devices, and web apps. Graphic Designers on the other hand focus more on developing brand kits, billboards, posters, and other types of marketing and communication collateral. For the purpose of this article, I will focus on how UI designers create touchpoints for digital products.

UX Design vs UI Design

First, it is important to understand that UX design and UI design go hand in hand. You can’t choose one over the other if you want to build successful products and services. A simple way to differentiate the two is to look at UX design as the full process we go through to create products while UI design is part of the UX process and is the stage at which we create the interfaces end users will interact with to accomplish tasks. Confusing? Let me expound further using an example that is easy to relate to.

Let us assume that a local bank is looking to leverage technology to better serve their customers and we run the consulting firm contracted to work with the bank on this challenge. If we were to use the traditional software development approach, this would be implemented roughly as follows:

  1. The customer will give us a list of features their team has crafted based on their understanding of the problem. This usually from the terms of reference in the call for applications. We would probably have a kick-off meeting to align on timelines, milestones, and key outputs
  2. We will go through a wireframing exercise to further flesh this out. The outcome will probably be low fidelity sketches to help us get feedback before we commit to designing the high fidelity versions
  3. We will then spend time working on the high fidelity mockups using our favourite design software. During this stage, we will still be getting feedback from the client and making the necessary modifications
  4. When all the screens are ready, we will hand them over to the development team. Most, if not all our work, is done at this point. Occasionally, the development team might request a few modifications but beyond that, we have done our job
  5. The development team implements the app and it is launched

The design role during this process is the traditional UI design role. The UI Designer will develop low fidelity wireframes then high fidelity wireframes. He/She will spend most of the time sketching using tools such as pen & paper or digital equivalents such as Balsamiq. When designing the high fidelity wireframes the UI Designer can use the Adobe Suite (Illustrator or Photoshop), Sketch, or one of the newer design tools such as Figma. The UI Designer will mostly interact with the client and the internal project team during the duration of the project.

Now if we were to approach this as a firm that has UX design expertise, the project activities will be significantly different.

  1. We will still start with the project briefing and kick-off meeting to align on objectives and expected outputs. This will also be the time to review challenges faced by the bank’s customers based on the bank’s understanding
  2. Once we have a good understanding of the challenge the bank is facing and we have access to the research material they have generated, the UX Designer will spend time reviewing the information and where necessary conduct desktop research
  3. Many times, desktop research and literature review is not sufficient and so at this point, we would propose that we carry out a qualitative research study involving a segment of their customers. This can be a field study, a focus group discussion, or even a co-creation workshop. This step will help us better understand the needs, constraints, and aspirations of the bank’s customers in relation to finances. We can’t solely rely on the knowledge the bank staff have as most of the times their experiences are very different from that of their customers
  4. From the UX research study, we will generate new insights that will help us develop a better solution. The insights will not only touch on challenges faced by customers when using the bank’s digital channels. We will also learn about brand perception, experience in the banking hall, and the general customer experience. This is quite a lot to unpack. Typically, at this point, we will run a design sprint. Apart from ensuring the bank is on board, the session will help us ideate and prototype. During the ideation session, we will review what we learned and generate as many ideas as possible. The ideas will not be limited to ones that leverage technology. However, we will probably prototype and test a digital one. We might for example choose to rework the onboarding process for the bank’s app and test it with real users (usability testing). The prototype will most likely be a high fidelity prototype that is either clickable or something we can load up on a tool like Invision to make it interactive for the usability test
  5. Based on the feedback we get from test participants, we will proceed to design the end to end screens for the app. We will then hand this over to the development team
  6. As the development team implements the app, we will be planning usability tests and refining the UI based on user feedback

This sounds way more complicated than the previous approach. Fortunately, extensive research has demonstrated that it is a better process for solving problems (To learn more read the McKinsey report – The Business value of design). The designer(s) on this project have done way more than user interface design. Apart from designing the UI, they have conducted research, facilitated design workshops, developed prototypes, tested the solution with the end-users, and created the end to end user interface. At this point, I think it is very important to point out that all this will probably not be done by one person but instead 2 to 3. One of them might be a UI Designer. Some of the tools used include traditional pen and paper/Balsamiq, design feedback tools such as Invision, traditional UI design tools such as Photoshop and Illustrator. Some of the outputs generated by UX Designers include customer journey maps, user personas, low/high fidelity prototypes and design research reports. Compared to a UI Designer, a UX Designer spends a lot of time interacting with end users and other stakeholders.

What should I focus on?

It depends on what you are passionate about? However, irrespective of your passion, to be an effective and impactful designer you have to learn how to interact better with end users. Products and services designed with the users at the centre have better chance of success.

Below is an outline of the different options when it comes to careers in design.

  • UI Designerfocus is on developing user interfaces primarily for digital products. He/She is at times referred to as a Graphics designer
  • UX Researcherspecialises in the research component of the design. Spends a lot of time out in the field talking to users and understanding the needs, constraints, and the environment the problem occurs. He/She also does extensive testing with the end users and collects feedback that the development team can use to improve the product
  • UX/UI Designera combination of a UI Designer and a UX Researcher. He/She can use tools like Photoshop and Sketch to design UI, comfortable leaving the office to conduct research, good at prototyping (low fidelity and high fidelity), comfortable with user testing
  • Front-end DesignerThe combination of HTML, CSS, JavaScript, Sketch/Photoshop, and prototyping tools
  • Front-end Developerless of design (Sketch/Photoshop) and more of HTML, CSS, Javascript, React, Angular, and integrating with APIs
  • Design Facilitatorfacilitates design thinking workshops such as design sprints, co-creation workshops, and ideation workshops
  • Communications Designer can take the strategy of an organisation, program, or a product and design visuals that clearly communicate the value and purpose to the relevant audiences. Such designers typically work closely with leadership teams on projects that have a longer term impact on an organisation
  • Experience Designera combination of business knowledge, technical knowledge, and UX. Can help conceptualise, develop, and take products to market. Such a person is less technical and has more coordination, growth hacking, and user research skills.

As I mentioned earlier, what you choose to focus on entirely depends on your passion. Some designers prefer to reduce the level of interaction and coordination with stakeholders in order to focus on designing UI components. Others find joy in these interactions and prefer spending time in the field. Both create immense value and can progress well in their careers.

For designers leaning more towards UI design, you will probably start off as a junior UI designer to mid level UI designer and once you have more experience you can become a communications designer. If at some point you start coding, your path might shift towards the direction of a front end designer and front end developer.

If you lean more towards the research aspect, you will probably start out as a junior UX researcher to a mid level UX researcher. At some point, you will have enough experience to facilitate workshops allowing you to say you are a sprint master. If you show more interest in how businesses run you will eventually end up as an Experience Designer and maybe way later a product manager.

In conclusion

Irrespective of the choice you go with, a career in design will allow you to leave a huge impact wherever you work. It increasingly becomes clear that as designers, we need to get better at interacting with users. This will help you build impactful products and services while enjoying what you do.

Cover photo: Photo by Tran Mau Tri Tam on Unsplash

You May Also Like