UX & UI Designers: Two Sides of the Same Coin

A project is only as good as the teamwork that goes into it.  Ironically though, good teamwork also involves understanding when to let people work in isolation.  In this article, we at Team Codesign explore the roles of our UX (User Experience) & UI (User Interface) designers; where they need to work in tandem, where they don’t and how this helps enhance our end results.  

Why UX & UI Need to Work in Tandem?

To understand this, we must first understand what the two roles entail. At a very basic level, a UX designer defines the experience a user will have while interacting with a digital product. For this, a UX designer must understand how and why a user behaves in a particular way.

A UI designer on the other hand is primarily focused on the visual appearance of the product. What kind of buttons to use, how to spread out the content, the colours and layout applied and so on and so forth. All these aspects improve a user’s experience with a product.

Overall UX and UI work in tandem because their end goals are the same i.e. - to encourage people to use the product. Therefore, the visual elements created by a UI designer must be enticing enough for users to interact with. And the experience of interacting with these elements must be comfortable. Let’s explore the design process in detail to understand where exactly these roles come into play.

The role of UX & UI within the Design Process

1. Laying the Foundation (Understanding Requirements)

Before beginning a project, the entire team needs to understand the context of its existence. i.e. – Why the product is being created or modified and what problems it seeks to solve. Once the team has a fair idea of the basic requirements of the project, the UX designer delves further.

Using multiple tools a UX designer will conduct research, analyze competition, and study the market. All this culminates into a document called a Research Presentation.

Using the research presentation, the UX designer creates yet another crucial piece of information i.e. – A User Persona. User Personas are well-researched, reliable representations of one’s potential target audience. They describe the ideal user in terms of demographics, background, personal interests, motivations etc. This information helps lay the foundation for an end product that is tailored for the customer.

2. Planning the Execution (Information Architecture –IA & User Flows)

With a good understanding of the end user, the UX designer begins creating an Information Architecture (IA) or in other words, begins organizing or structuring the information one is presenting.

When a user visits a website or an app, it is important for them to not only see relevant information but also be able to find new information easily. IA gives content a context by using the principles of cognitive psychology to define the hierarchy of content and the navigation process i.e. - Defining the structure of content and the path a user may take through it.

The navigation process is then detailed out in a User Flow. A User Flow is a visual representation of the path a user takes through an application. Drawing this out helps a UX designer understand where exactly a user may face obstacles while using the app. It also helps make the app more intuitive by highlighting the essential steps needed for the app to fulfil its purpose.  

3. Laying Down the Laws (Interaction Design (IxD))

As the name suggests, Interaction Design (IxD) is a specialized field. Interaction design is a part of UX design that focuses solely on the user’s interaction with the product i.e. – It details out the process of interaction as opposed to the entire experience. It is in this phase that UX & UI designers work in tandem. Though the exact steps vary across projects, these are a few ways to implement IxD.

1. Sketching

Sketching is a quick and efficient way to communicate ideas. The design team roughly sketches out their ideas individually and then brainstorm over them collectively. Once everyone is in agreement on the most feasible idea, they begin refining it.

2. Wireframing

Wireframes are skeletal outlines of a product. They are built on the basis of the sketches. They indicate the layout and structure of every page of the app or website. They also indicate aspects such as the size & placement of elements and the purpose of each element. They help both visual designers & developers understand what is needed of them.

3. High Fidelity Wireframing or Prototyping

A prototype is a simulation of the end product. It helps test the product before investing too many resources into it. It interconnects the wireframes created and displays the interaction between them. With this visual representation, it becomes easier to anticipate a user’s possible pain points. Fidelity refers to the amount of detail in the prototype. A high-fidelity prototype will represent all the above aspects including the information architecture, user flow, visual style, navigation systems and so on.

4. Styling the Product (Stylescapes & Mockups)

With an understanding of how the product will work, the UI designers take over. They begin by creating a design system or a Stylescape.  A Stylescape is an in-depth look at the visual direction the UI designer wishes to take. It defines colours, typography, image styles and so on. A Stylescape displays the look and feel of the brand in various situations, without creating multiple collaterals.

Based on the Stylescape, the UI designer creates a mockup. A mockup is a design diagram that looks as close to the final product as possible, without being interactive. A mock up helps finalise the appearance of the end product.

With the design final, the UI team hands over the product to the developers via a Design Specifications document. This explains in detail the reasoning and requirements from every UI element within the app.

The process of UX & UI collaboration does not end here. On the contrary, as the team nears completion of the project, every member needs to be more involved. As you can see, UX design is a highly collaborative process. While UX design goes beyond UI design, the two cannot function without each other. In fact, UI design is one aspect of UX design, albeit a crucial one.

At Team Codesign we strongly believe in playing on the strengths of our team members to achieve the best results as a group. To this end, our team members are well-versed with the secret behind great UX. After all, UX & UI designers are two sides of the same coin.

‍