Concept Modeling For UI


Concept modeling is a visualization that shows the relationships between all elements within a subject region, in an abstract way. The idea is to find connections – both apparent and less apparent – between each relationship of the users in the region. Then, in this case, apply those connections to a user interface. 

Once these relationships are found, they can help designers to identify functional requirements that make the UI cleaner, simpler, and easier to understand. The overall goal is to have a view of what it is, what it does, and who it helps (the users). This process should be used before launch or as a redesign tool to grasp the full picture of a project. 

How it’s done

First, find all of the nouns that associate with the problem, and write them down. Aside from the fact that the concept model process is used for UI, developing the model should not include UI terms or broad concepts. Instead, the purpose is to list all factors that relate back to the users’ problems, and what they wish to achieve. For example, rather than saying “controls,” use specific elements of a UI that the user will go to when interacting with the site, like “products” if it’s offered. So, at this point, re-write or reorganize the words as needed. 

Starting the chart

Once you have all nouns, place them inside boxes, ovals, or whatever fits your needs to begin developing a visual chart. 

Making connections in all possibilities

The next step in the process is to use arrows to relate the nouns with actions. By doing this, the main elements connect to one another. This part of the process requires some deep thinking, as some connections are not going to be obvious, and may help you find more elements or actions than originally anticipated. 

Finding as many connections as possible is a good thing – it will help to have a deep understanding of the relationships that aids in the design for UI. 

Effective examples

Audree Lapierre wrote an article about her own experience creating concept models for a website project that she developed, called Min. She began her process by utilizing the use cases that she’d previously worked on, which made way for prioritized subjects, like “tasks,” and “people.”

After developing a few drafts of the concept model, this is the final version. Lapierre then planned to use this model for the site developers for their data model. 

Another instance of real-world examples is listed within an article written by Shamal Jayawardhana. Jayawardhana created five different examples of conceptual models in order to explain in detail to the readers about how they’re used and how they’re helpful with UI design. 

He began the process by explaining how to create a concept model with Vertabelo, then detailed the five examples with different scenarios:

  1. Simple Employee Management System
  2. Simple Order Management System
  3. Online Shopping App
  4. Simple Library System
  5. Hotel Reservation System
Source – Jayawardhana’s template for the simple order management system

However, instead of filling the concept models out in detail, these five examples are templates that can be used as reference points for his readers. It’s a helpful approach to giving the audience members a better understanding of concept models for different systems, and the possibility of starting from the ones he created. 

Overall, concept modeling is a fun visual process that requires some initial understanding, which evolves into a deep understanding of the relationships between the essential elements in the UI system. I chose to discuss this UX method because of these reasons – and I’ll be implementing this process into my own research for a UX report that I’m currently developing. It’ll be helpful for me to have a better knowledge of who the users are, what their problems are, and how the problems can be resolved through an easy-to-use website. 

Jayawardhana, S. (2021, February 4). 5 examples of Conceptual Data Models. Vertabelo Data Modeler. Retrieved from 

Johnson, J. (2008). Chapter 1: First Principles. In GUI bloopers 2.0: Common user interface design don’t and dos. essay, Elsevier/Morgan Kaufmann. 

Lapierre, A. (2017, July 6). Ui Design process: The concept model. Medium. Retrieved from 

Pannafino, J., & Mcneil, P. (2017). UX Methods : a quick guide to user experience research methods. Cduxp.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s