A tree-based UX planning approach in 5 simple steps

1. Plan your application’s hierarchy

When I build a new application, I always start by drawing a tree illustration that shows each page and its drill-downs. The leaf nodes in such a tree should be the UI elements.

Drawing the application tree allows you to better understand your application, but more importantly, it allows you to identify hierarchical patterns in your application. For example, you might find that every page has a header, a footer and navigation.

Full website view (Home Page, About Us and Contact us), this was done in draw.io.

A closer look at the homepage component: Illustration.

2. Merge and split the components in order to subjectively optimize your tree

Merge: If you have two components that have the same information, the same actions or lead to the same result — merge them.

Split: I tend to use this rule of thumb: whenever I can split a component without harming the user’s accessibility to necessary information or actions I do it. Therefore, I try to split each component to sub-components in order to eliminate unnecessary information (that when accumulated it frustrates the user).

Step 2: Homepage component: I have split the header. Note that the navigation could be further split to <ul /> and <li /> elements.

3. Prioritize your components in each page

You should go from bottom to top in each component of your hierarchy’s tree discussed above, and for each child components in a given node:

a. delete components that the user doesn’t really need as it will only confuse him/her.

I have removed the data component inside the header as it is not necessary

b. draw a simple illustration of how the component will look while taking into consideration prioritization (importance of each component) and relationships (whether a certain component relies on another component).

We start from bottom to top, after completing the navigation and the logo we go to the header, this illustration displays the header planning stage.

4. Color similar child components

Some of the child components are “global” and are used in different pages. I suggest you color these components or mark them in a special visual sign. For example, color the navigation node (in case it is a “global” component) in green.

Afterwards, you keep an illustration of its children in a new tree diagram. you can eliminate the child nodes of each colored element and instead add a reference (pointer) to the new created diagram.

5. Ensure leaf nodes are well defined

Check all the leaf notes created, and validate that each one consists of a clear UI element (if you have yet to define your UI elements then Html DOM elements). Make sure that you have defined all its states (active, focus, clicked, loading etc..) and all the possible actions it can perform.

What did we achieve?

In this simple process we were able to achieve several — yet very crucial and important — results:

1. Clear and simple hierarchical understanding of our application.
2. Well defined pages.
3. App simplicity: By eliminating and merging elements.
4. Component reusability planning.
5. State definition for all the UI elements in our application.

What’s next?

The next step(actually this step should be continuous and done also during building the tree above) in any stage should always be to validate the value proposition to the users. try to find creative ways to test your hypothesis on real users: Did you prioritize correctly? Did you eliminate important components? Did you over-split or over-merge?

Keep improving the tree-based diagram according to the user's needs until you (and the users) are satisfied with the results.

The next step would be building a mockup. You will be amazed to see how building a mockup when you have a tree-based app planning would be 10x faster.