Marsha Nunes

MITRE’s Org Pages help employees understand the organizational structure and discover people, expertise, and projects across the company. Over time we had ended up with two organization applications: Org Charts and Org Pages (which include information about an organization’s work in addition to its people). My redesign consolidated the two while addressing existing usability issues and setting the foundation for potential future enhancements.

Before starting the redesign, I led a user research study in collaboration with our team's intern to evaluate the existing applications. I designed a hybrid usability test / interview specifically focused on the strengths and weaknesses of the different people + group displays and navigation patterns across both systems. Our research showed participants favored the Org Chart's visual presentation of people with clearer boxes for the groups. They also preferred the Org Chart's navigation system that incorporated leader names (which may be more recognizable) alongside the org numbers. However, users appreciated the Org Chart's explorer graph especially for navigation to sibling orgs. We also identified additional usability issues requiring attention, including a counterintuitive name sort order introduced by changes to our people data.

Outline of the high-level plan for our inital user study. Source: MITRE

Left: The previous Org Chart application provided hierarchical navigation of the organization. Right: The previous Org Pages displayed additional information about an org including skills, tags, a description, and project charges. Source: MITRE

Before developing detailed designs, I created wireframes to establish the organization of the information. I needed to keep in mind variable  conditions such as user-populated sections that may not be filled out and content that only applies to certain organization types. I also planned space for future ideas from stakeholders and content often found on organizations' SharePoint sites to ensure the design would remain flexible and scalable going forward.

Wireframes balancing default information with conditional / user -populated elements (gray) and potential future expansion (teal). I switched to tabs from one scrolling page to align with our related People and Project page applications. Source: MITRE

Detailed mockups for Org Pages showing the initial plan for the People and Work & Expertise Tabs. Source: MITRE

I also set out to improve the usability of the individual Org Page sections. For example, the previous employee location chart could become unreadable, especially when rolling up data from multiple departments. I kept the inner part of the old chart and moved the site breakdown to a more usable table. I deliberately removed the teleworker breakdown as these locations are typically random rather than indicative of a relationship with a nearby sponsor.  During implementation I collaborated with the developers to further adapt the design given the capabilities of their chart library.

Old Org Pages location chart vs. draft proposed design. Source: MITRE

Org Pages needed to accommodate different types and quantities of data, especicially in the org chart section so it could work for both large departments with many groups and smaller orgs with simpler structures or no formal groups at all.

Multiple variations of the org chart section. Source: MITRE

I also simplified and updated the app's editor section by analyzing exports of user-entered data to identify which features were actually being used. This allowed me to replace custom links with a predefined set of popular options including the org's website and strategy briefing. I also redesigned the description display to work for both brief mission statements and longer multi-paragraph content.

In my redesign links are now directly visible instead of hidden under a menu. Short mission statement-like descriptions appear in the header section for immediate visibility, while longer ones appear on the Work & Expertise tab. The Org Explorer was reimagined as a full page view in order to show more detail about each org and all levels of the hierarchy. Source: MITRE

The primary editing feature let users create org chart groups and drag and drop employees into them. My redesign displayed the groups in multiple columns and allowed drag and drop while collapsed to minimize scrolling - addressing usability issues reported by users with large organizations. Source: MITRE