top of page

Project Title

Company Organization Chart

Overview

Design a company organization chart that can fit entirely on a screen while maintaining usability.

My Role

Research and Design
Initial Research

After meeting with the project manager to discuss the goal of this page, we landed on these key points for the project:

  • Present a traditional organization chart structure that can be printed

  • Fit everything a single page without the need to scroll

  • Be able to easily track the chain of command through the chart

​

 

Using that information I began to research organization charts and found there seemed to be a few common ways to present the information.

Basic-org-chart.png

Stacked

Network-Organizational-Chart-1024x785.png

Network

flat-organization-chart-template-1-1024x625.png

Flattened

Sketching

I didn't feel like any existing directions I found would be scalable within our software so I wanted to try something different. The first idea I had to fit all of this information within the space was to incorporate collapsible sections for the chart. At the same time I worked on narrowing down what information to show on each card and how to display it.

chart layout
card ideas

I found that with this direction I was saving space but I was also losing usability. There was no easy way to find a specific role without collapsing/expanding multiple areas and once expanded it could still end up taking more space than could fit on a screen.

​

My next idea was to split up the conflicting requirements and create designs for each. Instead of trying to force the chart to fit on one page, I wanted one screen for a traditional chart and one screen for a birds eye view of the hierarchy.

full org chart
hierarchy

This would allow for a traditional chart users could interact with (and print if necessary) and still have a way for them to quickly and easily see the chain of command on a single page.

​

I brought both directions to the project manager and it was agreed that splitting the two uses off would result in the cleanest solution while still meeting the client requests.

Final Designs

Chart

Org Chart - Zoomed In.png
1
2
3
4
5

  1. The page this was added to became a tabbed page.

  2. The chart is contained within a scrollable window.

  3. The user can zoom in and out of the chart.

  4. Each card contains the role title, department name, and how many total positions the company has for that role. Roles that have roles beneath them are collapsible.

  5. The chart can be exported or printed.

Hierarchy

Report Chain.png
1
2
3

  1. Roles are organized into tiers based on where they sit in the chart

  2. Tier windows expand to fit more roles if necessary

  3. Any roles the company has that do not have a place on the chart get grouped at the bottom.

  4. Roles above and below a role get highlighted when selected to see the report chain.

Report Chain - Selection.png
4
Reflections

Overall the designs ended up addressing the main concerns of the project and present the information cleanly for the user. With more refinement it could get even easier to use.

 

The main direction I'd want to explore were I to revisit this project would be not listing every role on the report chain page. It would result in a lot less visual clutter if the user were to select a role then see only the report chain for that role instead of still seeing all irrelevant roles grayed out on the page.

bottom of page