Why UX Precedes UI


The tug of war between UX and UI is unfathomable and there are countless blogs on how UX and UI are different from each other. In this article, we attempt to share the justifications on why UX precedes UI and what we do at Lollypop as a part of the UX process; the basics or the ground rules that never change. However, we firmly believe that UX and UI are two sides of one coin; absolutely incomplete without each other.

User Experience (UX) is primarily about problem solving, defining user goals, user journeys. It answers all the questions related to what, why, when, who and how. And, User Interface (UI) mainly involves the appearance, visual language and a medium of interaction of the product.

UX process underlines its importance

It is fun to observe how each step in the UX process is intertwined with the success of businesses. This process is critical and involves seeking answers from each stakeholder, combining the varied perspectives and needs into one coherent solution that solves the problem in the best possible way.

Below are the thumb rules:


This is the basic and most important of all. Because, honestly this is the stage when we meet, interact, search and research on the concepts, businesses, competitors, industries and of course our users. Here, we learn and gather as much as we can through use of questionnaires, interviews, in-person meeting, web search etc.; the techniques can be innumerable but goal is just one to understand the vision of founder and align it with the needs of the users.

It’s extremely fundamental to understand what problem the product is trying to solve and understand user’s perspective on the kind of solution they are searching for. This initial phase majorly revolves around brainstorming which focuses on the complexity of the design, the technologies and the platforms on which the design will be implemented.

In the example below, we conducted an in-depth research of all the stakeholders to gather so much related information as possible to build an application that would be able to provide a real solution. We used multiple techniques because the depth of the project and complexity was huge.

Mapping data to knowledge

The research grants the team of UX designers with sufficient data.  But this voluminous data needs to be sorted & classified to convert them into knowledge so that meaningful inferences can be made for a clear direction of “what” is needed and “why”.  All the web users have different objectives and they are directed to one common point from various sources and thus, their level of knowledge and engagement differs. The UX team then takes up the responsibility of mapping these inbound user journeys and goals into lead conversion funnels that adds value to the lives of the users while benefitting the business.

For a clearer visualisation, we have shared the user journey of one of our clients who are giant players in the B2B market. The data to be mapped and presented was exuberantly huge and to map them into knowledge was definitely a challenging task. With proper card sorting, quick rough sketching and lots of brainstorming, it was easier for us to sort the journey of each category of the target audience and make sensible, strategical and visually appealing data presentation.

Looking at the bigger picture – vision is broken into individual goals

Here, we explore the underlying possibilities of the varying actions that the users will be performing within the product. This, for instance, could range anywhere between the count of the lead submissions, purchase completions, or anything and everything and these actions are referred to as goals. Or it could possibly mean desirable actions which include clicking through a specific link or visiting a particular page and these when combined support the accomplishment of “goals”. Finally, we have the web metrics data that helps us to track whether the desired action has been taken or not and this ultimately, helps our UX team to identify any potential issues. The importance of data and metrics cannot be stressed upon enough. Our aim is to serve the community as a whole by incubating the best possible solution to solve their problems.


Wireframes help us to connect the different visual aspects of the site with the information architecture. This is also the stage where we implement user testing to avoid any kind of misunderstandings that might arise at the last moment. Wireframes are intended to help create an actual appearance and feel of the final working model of the product. We present this to our clients and try to acquire maximum feedback to understand what is missing and how best it could be customized to fit in their needs.

User testing

Like anyone else, we do not want our users to dislike our product post-launch. So, user testing is one of the most important phases in the UX process cycle we follow at Lollypop. Prototypes are presented to the users. This helps us to validate and enhance our ideas and work on improvising the product further.


User Experience lays down the foundation and when strategically combined with UI, masterpieces are created. Basically, it could be split into 3 stages:

Useful: The product solves the user’s problem!

Usable: The flow of the product needs to be intuitive so that the users can understand and utilize the product for solving their problem.

Delightful: The users enjoy the product and they come back every time!


We would love to hear from you and we appreciate the good and the bad.