What Are the LEGO Bricks of Enterprise UX Design?

Fundamental Elements and Principles of Information Organization

I recently worked on a customer project that used Fiori Design in its final deliverables. Fiori, an instructional design guideline for people who want to design and develop applications that will live in an SAP environment, provides components and UI elements for building apps.

After finishing the project, I decided to take a look at other existing guidelines for designers, just to explore the differences. I looked at Google’s Material Design Guidelines, as well as Apple’s, IBM’s, and Salesforce’s guidelines. I like Material Design a lot because it felt vibrant and refreshing after my research. I also like the metaphor of material as their supporting theory:

“A material metaphor is the unifying theory of a rationalized space and a system of motion. The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.” — Material Design Guidelines

One of the smart things about the Material Design Guidelines, is that it defines, and only defines, the most fundamental elements of visual language, like colors, shapes, motions, etc. Using these Guidelines is like using LEGO bricks: they look simple, but they can be used to build anything and everything! The concept feels like a limitation for the purpose of imagination.

So, I decided to apply the Material Design Guidelines to our existing business application design and compare it with the Fiori Design we created. The outcome was very interesting…

At first glance, I prefer Version 2, which follows the Material Design Guidelines. However, when I sit down and try to digest the content from a user’s perspective, I prefer Version 1, because it is easier to consume.

Perhaps the differences between the two versions exist because consumer apps and enterprise apps are slightly different from each other. The primary purpose of a consumer app is to engage users through the content, while enterprise apps are intended to help users navigate information and to walk them through tasks. That’s not to say that engagement is unimportant in enterprise apps, or that information is not important in consumer apps. The emphasis is simply different…and therefore the design principle is different.

Regardless, all application design requires some sort of information organization. Similar to the fundamental visual elements in material design (like color, shape, motion, etc.), almost everything in enterprise information can be boiled down to numbers (nodes). Enterprise applications perform in ways that allow users to manipulate numbers and get their jobs done. That makes me think…

What are the fundamental principles of Information Organization?

*Here I use information organization instead of Information Architecture to differentiate from app (or web) structure design. I am talking more about the relationships among information (nodes.)

Looking back at the projects I have worked on, I feel that there are three fundamental relationships used for organizing information: Sequence, Hierarchy, and Clustering. Through these three basic relationships among numbers (nodes), designers can pretty much do everything.

Sequence is about the order of information nodes: steps 1, 2 and 3. We often see this in sequential business flows. Hierarchy appears more in organization charts and navigations: level 1, 2 and 3. When we want to display a group of information, Clustering is a better way for digesting: group 1, 2, and 3. With these fundamental relationships, the simplest information (nodes) will be connected together for users to make decisions and finish their tasks.

I think this is an interesting perspective when we look at enterprise applications and design enterprise apps. But…

How does this help with our design?

Here’s one example: designing a financial enterprise app with the primary purpose to organize numbers from each department in order to let the managers know how the company is performing. The first level of organization should be Clustering data by department. Based on the purpose of this app, designers understand the logic, and can expect users think the same way.

After seeing the numbers, a user may want to order things for his/her company, depending on how he/she intends to use the purchase application. Now, the Sequence should be the primary relationship. It might look like the image below. Then, maybe underneath step 1, there is more information to fill out. Clustering can again be used to organize the information.

This exercise can be continued until the design is finished. After organizing all of the information, which performs like the logic structure of the application, other visual elements, such as colors, shades, and interactions, can be applied to reinforce the organization.

This method can also be used to decide whether or not information on a page is well organized- sometimes designers mismatch the relationships and confuse users. Imagine that users are looking at this screen:

How might users process information and make decisions with this screen? Some might argue that people can learn after using it for a while, but why don’t we just make it more intuitive?

I think another fundamental element could be the Actions, like filtering, jumping, drilling down, editing, etc. Perhaps I will discuss the way that these actions perform in information re-organization in my next article. These are just a few considerations that I learned from using different design guidelines. I still need to conduct more tests to ground my theory.

Before that, I want to know, what do you think?