Understanding UX and UI Design in Mobile App Development

UX and UI often get mentioned in the same breath, like salt and pepper or Key and Peele.

And like those famous pairings, the user experience (UX) and the user interface (UI) are separate elements that work closely together to create a pleasing, easy-to-use mobile app. Careful planning of the UX and UI is especially vital to cross-platform app development, where one app has to look and function the same on both Android and iOS devices.

So, what’s the difference between the two? UX design is the process of creating a meaningful process or journey for an app’s users. UX designers focus on the app’s purpose and functionality. Think of it as the app’s skeleton.

The UI is the skin. UI designers focus on an app’s visual style and the “look and feel” of the application. They bring the app to life and make it look attractive.

This article takes an in-depth look at the role of UX and UI design in mobile app development.

What does UX design involve?

To give you an overview of how UX designers create a mobile app’s “skeleton,” let’s use an eCommerce mobile app as an example.

If you have used an app from Amazon, Best Buy, Target, or similar businesses, you have some inkling of the features and functionalities involved. The user needs to be able to search for a particular item or category, browse items, view a product’s details, and so on.

Not only must UX designers create a seamless overall experience, but they also need to design each function’s flow.

Let’s say we want to redesign the item detail page for our eCommerce app. This page appears if the user clicks on one product to learn more about it. It is loaded up with content and features.

Where does the UX designer even begin to redesign this page? There are so many components. There’s the product image, the carousel and the zoom functionality, product details, customer reviews, recommended products, and more. If cross-platform app development is involved, that can introduce even more complexity.

When faced with a complex feature like this, a UX designer uses one of a few different design processes to wrap their head around it and prioritize tasks. One of the more widely used methods is the Double Diamond process. That link will take you to the Fountain Institute’s Double Diamond deep dive, but let’s look at what it looks like in the context of UX design.

This is the Double Diamond. You can probably tell how it got its name.

The diamond on the left is the problem space, devoted to finding and defining the problem to be solved. The diamond on the right is the solution space, where we develop an answer or way to fix the problem.

Discover Phase

The first step is to go wide and explore the problem space a little bit more. This is the Discover phase, where the UX designer asks a lot of questions like:

• What are the user and business problems?
• What works well?
• What isn’t working well?

In this phase, the UX designer will also look at qualitative and quantitative data. Qualitative data can be user research or survey results that reveal the key pain points our targeted customers experience when they use other similar apps.

Quantitative data is any metric that helps us understand how the current design is performing. In our example, one key metric is the number of customers who add a particular item to their cart after looking at its item detail page. Another metric might be the number of people who add the recommended products from this item detail page. What is the conversion rate?

A competitive analysis can also add valuable information to the mix. The UX designer might spend a few hours looking at several different competitive eCommerce apps and note any themes or strategies they can adopt and improve. The goal isn’t to mimic competitors but to find a way to outcompete them.

Define Phase

With a better understanding of the problem space, the UX designer narrows the focus and the Define phase begins.

In this phase, they combine their findings and insights from the competitive analysis and user research to prioritize which tasks they will work on. This phase involves collaboration with the product manager, data scientists, and software engineers to determine feature prioritization and product requirements.

The UX designer will make a list of work items and then collaborate with the team to prioritize tasks based on their highest impact. At this point, they will also estimate the “size” of each task, considering the amount of time, effort, and resources needed to complete it.

Develop Phase

In the Develop phase, the UX designer starts exploring design solutions for the tasks the team has agreed to work on in the sprint.

For our item detail page, the designer might develop different ways to increase the purchase rate of recommended items. Instead of displaying recommended items in a horizontal scroll, they might explore a grid layout or a tabbed view.

In other words, the UX designer is discovering and exploring again, only with a narrower focus on a particular part of the problem to be solved.

Deliver Phase

The final phase is the most time-consuming. It involves narrowing and refining these ideas to determine which one the engineering team will build. The designer will use a UX design app like Figma to model and test the UX.

The Deliver phase involves a few rounds of concept or usability testing with a group of users. The goal is to ensure that the design solutions will have the desired impact—that they actually solve the problem.

Based on that feedback, the UX designer will iterate on and share their designs with the stakeholders and larger project team. The stakeholders can then provide feedback on how the proposed designs will impact the business. The development team can assess feasibility, technology needs, and the impact on the production schedule.

At the end of this process, one or two designs will launch. If one design clearly outperforms the rest in testing, that will be the focus of the development effort. If two designs test equally well, the product owner might want to release both and A/B test them in real-world conditions.

What about UI design?

Now that we’ve seen how the UX designer creates the skeleton of the app, let’s turn our attention to the skin—the domain of the UI designer.

UI designers have a strong understanding of visual design principles like visual hierarchy, usability, heuristics, color, and typography. Like UX designers, they base their design decisions on user research and data.

UX and UI designers work closely together, so there’s often much overlap between them. Some companies combine the roles so that the same person designs the UX and UI. They even use many of the same tools; Figma, for example, is both a UI and a UX design app.

For that reason, many UI design tasks happen concurrently with UX design. Projects don’t often go through UX design and then get handed off to the UI designer, in other words.

Before discussing the stages of UI design, remember that the process rarely happens sequentially. For example, UI designers may be asked to take the wireframes from Stage 2 and create a Stage 6 prototype. The process flow depends on the project requirements, schedule, and budget.

Stage 1: Sketching

After defining the problem to be solved and identifying the constraints, requirements, and features, the UI designer is ready to determine how to visually represent the components, state changes, and interactions.

The Sketching stage is a quick, low-cost, and low-commitment way to begin designing the user interface. It is a way to get rough concepts and ideas on paper or a screen. The purpose is to kickstart the design.

Sketching helps to clarify and define layout features and allows for rapid iteration on ideas. It also helps the designer visualize how screens might look on different device sizes and contexts.

Stage 2: Wireframing

Wireframes represent the user interface before visual design principles are applied. They allow the designer to see and share the interface’s general layout and elements.

The purpose of this stage is to visualize the general layout, build trust with stakeholders, and flesh out ideas before getting too deep into the design. They use placeholder text and images. Because of this, wireframes are a fast and cheap way to explore initial ideas in more depth.

Stage 3: Component Design

Component design involves the look of buttons and badges, tables, lists, cards, forms, and any other elements the mobile app requires.

At this stage, the designer begins working with the app’s final text and images. The purpose is to plan for usability, uncover accessibility and responsiveness problems, and translate ideas into consistent elements that can be shared with the development team.

Stage 4: User Flows and Task Flows

In this stage, the UI designer decides how users get from one screen to another. What happens when they click this button? What happens if they don’t fill in a required form field? In cross-platform app development, how will the app flow differently on Android devices vs. Apple?

Planning these flows requires understanding and matching users’ behavior with how the app behaves. Or, in other words, making sure the app works the way they expect it to work.

UI designers must think through all possible pathways and responses the interface will provide. Designers can represent this in several ways. They might add arrows to the wireframes to turn them into wireflows. They may use flow charts and conditional statements.

The purpose of this stage is to expose all navigation routes so the team can check for gaps in the flows and visualize entry, exit, and decision points for the user journey.

Stage 5: Mock-up Designs

The design mock-up should show all elements precisely as they appear in the final product—text, images, buttons, colors, etc.

In this stage, the UI designer perfects the mobile app’s appearance. They create a consistent typography, select or create final images, and add final copy.

Then, the designer presents the mock-up to the key stakeholders for approval. Inevitably, the stakeholders will ask for tweaks or changes, so the mock-up may go through a few iterations before it receives final approval.

Stage 6: Prototyping

The prototype takes the mock-up a step further. Prototypes allow the stakeholders to see how the app will look and function. Again, this is especially crucial in cross-platform app development.

The UI designer creates the prototype using software like Adobe XD, Figma, or a dedicated prototyping tool. These tools allow the prototype to simulate user interactions with the product, linking together all of the screens and flows to emulate how the final product will work as closely as possible.

Prototypes help ensure all features and functions look, work, and flow as intended. Once the stakeholders sign off on the prototype, the software engineers begin development.

Summing It All Up

That was a detailed look at the similarities and differences between UX designers and UI designers. If your eyes are crossing, just remember this:

• UX designers are the architects of the experience. They research user needs and behaviors to design a product that is intuitive, efficient, and enjoyable to use. They consider the entire user journey, from initial interaction to accomplishing a goal.

• UI designers take the blueprint created by the UX designer and give it a visual form. They focus on the look and feel of the interface, using visual design principles to make it attractive, clear, and engaging.

• The key difference is that UX design is about the why and how of user interaction, while UI design is about the what. UX focuses on functionality and usability, while UI focuses on aesthetics and visual communication.

There is overlap, however. Both UX and UI designers need to understand the target user and how they will interact with the product. They often collaborate throughout the design process; some designers may possess skills from both areas. This collaboration is particularly important in cross-platform app development.