The Mellon Foundation

While working at Blenderbox, I led the UX for the rebuilding of the Mellon Foundation's entire corporate intranet.

Every single day, Mellon staff depend on this portal to view the company calendar, share documents, and reference policy information for their grants.

The new intranet we desiged made it much easier to for users to read and find content while providing administrators with a robust set of editorial tools for their large database of content.

A nice description

A Dynamic Homepage

Much of the design's strategy was based on the homepage experience. This isn't always the case for public websites, where internal pages could be accessed and linked through a search engine.

Now, whenever someone opens their browser at Mellon, they see this:

Knowing that the intranet was the starting point for all Mellon employees accesing the web, it was important that this system also served as a hub for internal news and events (like Birthdays, Meetings, Deadlines).

We also introduced a "Quick Links" section. This area is fully administrable in the CMS and can be kept relevant by keeping tabs on internal analytics to see what pages are getting the most traffic.

Navigation & Structure

Since intranets are designed to house lots of content, special attention needs to be paid towards the navigation system.

Prior to the redesign, the main navigation contained several groups of multi-subject categories. These aren't ideal due to how difficult they are for users to quickly scan.

Before:

A nice description

There were also a large number of pages that could either be consolidated or deleted.

After:

A nice description Above is the end result of our sitemapping excersize.

You'll notice a cleaner nav that's much easier to scan. Additionally, there are fewer (larger) pages, along with a few page title recommendations to make the content a bit more predictable.

Longform Pages

Because we consolidated so much content into much fewer pages, we needed to design some kind of way to sift through large amounts of information in a short period of time.

Instead of forcing the user to click into individual pages to find their content, we created a system of "longform" pages.

These pages primarily reference policy information.

A nice description

These pages allow the user to easily navigate around a single page using a static navigation to the right.

Embedable Policy Information

Another pattern we noticed while auditing their exisiting intranet was the amount of linking in between pages. The majority of this was happening on policy pages.

By nature, policy, at times, needs to reference other policy. So, in order to reference, you would need to provide a link to the piece of policy.

We thought this was cumbersome. We instead created "policy snippets", which allow admins to embed chunks of longform pages in other pages.

A nice description

The implementation of policy snippets transformed the Mellon Foundation's existing heirachy of pages into an interconnected set of documents.

A nice description

Full Screen Calendar

Designing online, grid-based calendars is deceptively challenging. They all look the same but they each require specific and unique sets of needs.

The Mellon Foundation's Intranet Calendar was no different and luckily it's design and implementation was as smooth as it could be.

A nice description

Events can be populated in two ways: via an internal Sharepoint calendar or using Django CMS's event content type.

We found that their internal Sharepoint calendar was already active, so creating a periodic Sharepoint pull-script would be necessarily to keep the calendar up-to-date. For anything else that didn't need to be on their Sharepoint calendar, they could add it through the CMS.

Other Resources and Further Reading

Planning for this project required a substantial about of research.

The Nielson Norman Group is widely considered a stable for Intranet design research in the UX community. If you're working on an Intranet, I would heavily consider checking out Nielson Norman's 2016 Intranet Design Annual.

If you don't use it already, I would also consider exploring the Basecamp interface. This is a project-management specific web tool, but some of the concepts and UI patterns gave us a lot of inspiration while designing Mellon's intranet.