UML for designers: UX deliverables for complex applications | by Olesia Vdovenko | Aug, 2022

While working with complex applications it might be hard to use standard deliverables that we learned from our training. Diving into UML (Unified Modeling Language) might be of help. UML is generally used in software engineering to visualize the design of a system, usually concerning structural parts. Tools like Miro, Lucidchart, and most other tools to create charts have UML standards as a backbone for building diagrams. UML is a powerful standardized visual language from which a lot of our deliverables came anyway or at least were inspired by.

Why would we want to learn more about UML:

• UML helps with defining the structure of the system, something that’s also a big part of UX.
• As a long-standing discipline, UML has a lot of knowledge to offer.
• UML has clearly set standards that might help you with defining those for your team.
• Improve your logical thinking and gain more knowledge about the technical side of design.

In the end, if you using parts of it, it’s better to know where it is coming from. Similarly, I suggest learning more about flow charts and the standards they have.

With IA we don’t have specific rules or restraints in regards to how it should be presented. I’m talking here about Informational architecture, which is just a set of entities and data that we are trying to organize and work with. Since every project is unique, I wanted to introduce some techniques we can use from UML to address our needs. Also, this is not only restricted to IA I’m just using it as a sample.

Showing data for the list item separately from the item itself

When we have a page with a list of objects and the object itself, usually, there is no need to specify data for them separately. For example, with a simple contact page, a contact in a list might only have a name, but the object on its own will have a name, comments, two phone numbers, etc. Since it’s fairly simple we don’t need to specify this. But there might be much more complex cases in that case we might have to specify that information.

Reasons for that might be:

• Communicating our ideas.
• Defining from the start the priority information the user needs to see on a list.
• Maintaining consistency between different objects with similar properties.

Usually, I would use just “list” in the end or plural of the noun, but we can do it with 1,0..*, * (1 , 0..n , n) how UML does it.

While the UML version is more about relationships within classes we can use it to identify data for lists and data for single entity.

Going into details might need another approach

With complex applications, a thing that you might struggle with is the amount of data. A lot of data can make it harder to comprehend information. For such cases dividing data and generalizing it can be a good idea. UML has several different ways of approaching visualization of the system, including generalizing and showing additional data in different places and ways. For example, an object diagram shows the interaction between objects at some point, during run time, while a class diagram will show what the objects in a system consist of. So don’t be intimidated by data and try to find the most efficient way to represent it.

Take advantage of the interactive abilities of current tools

Not related to UML but the other way in which you might want to simplify your data is by using the interactive capabilities of the tools you are using.

Some tools have the ability to expand collapse information :

In some tools you are able to create links to the content:

In the miro, you can create a separate frame for the additional information, so that you can copy a link to that frame and use it to connect the additional diagram to the main.

We should take advantage of how interactive tools are these days and use them to improve our presentation and reading of information.

Journey map is a useful tool that lets you gather the most information about the user in one place. Template for journey map usually looks like this

But we know that some systems might require more information. We can find very different types of journey maps on the internet with different information added to them. In some cases, there is a need to show the real-world objects in the process (an easy example that comes to mind is a physical document), and some might need additional users. We can show additional users separately but if the work of one user affects the experience of the other we would want to see it in the journey map or different deliverables.

I suggest studying and taking inspiration from the sequence diagram. I like how it shows connectivity and exchanging of information, while also showing the duration of the processes. Showing the duration of the process (approximately) might be a good idea to define priorities and see the processes of the user more clearly.

Maybe creating a separate diagram that shows the task duration breakdown could also be beneficial for us to understand user’s interaction with the system.

Additionally, UML could teach you about layering data. There are a lot of samples regarding this in UML.

Usually, with classes, UML manages to show a lot of information in a relatively small space. When thinking about your deliverables or just any documentation it’s useful to think if we can show data differently not just simply stating it.

While studying any topic, joining any profession it is a good idea to learn its origin. While you don’t have to become a developer or UML specialist, you can use resources to get the basics. All of the suggestions I provided here might be used for different purposes and in different documentation. The usefulness that you might find in UML is proof of the layers of technical knowledge a UX designer needs to be ready to learn. I recommend checking out this video overview of UML diagrams.