MHI

Redesigning a decade-old, content-heavy website

Discovery, alignment, & website design for MHI.org

OOUX

UX Design

Visual Design

Web

Client

MHI

Date

Q2 2023

Role

Assistant Researcher, Lead UX Design, Visual Design

Length

8 weeks

The Challenge

Overhaul and refresh an 11 year old, content-heavy website so that it reflects the organization’s actual technical capabilities and reinforces that they are a future-thinking brand.

Output

I created a robust set of OOUX-based wireframes with prioritization, detailed web page design mockups, updated branding documentation, and additional assets to assist the organization in implementing the designs.

Context

The Material Handling Industry of America (MHI) is a non-profit organization that serves as the largest hub of information for the material handling, logistics, and supply chain industries in the United States. Their website hosts a massive library of content about these industries ranging from press releases and marketing material to industry standards documents and fundamental educational material. MHI additionally functions as a neutral marketplace for practitioners to find different vendors.

Team

Our team consisted of a Principal UX Designer, myself as a Senior UX Designer, a Business Analyst, and a Project Manager, as well as Client stakeholders and project management.

Discovery

This was the first time working with this client, so it was very important to really win them over with our discovery process. Many clients, especially on smaller projects, don’t decide to pay for discovery engagements, so we really wanted to make sure that they got their value from the project.

MHI kicked things off with a lot of information about the almost overwhelming amount of content they have on the site and the amount of time that has passed since the last time that they made any significant changes to the design of the site. They knew the information that people wanted was in there, but they knew that the site needed to be changed to make it easier to find the right information.

We decided the the best strategy was to do a workshop and interviews with the stakeholders to learn what their dream outcome looks and functions like, find any gotcha’s that might be hiding under the surface of the project, and determine who we really needed to prioritize the site for.

Visioning workshop, Stakeholder Interviews, & New Information Architecturey

We hosted a workshop via mural where we gathe red some of the baseline requirements that the client stakeholders would be thinking about when they evaluate our work, and where we got their buy-in to move forward with the different sets of interviews and activities that we had planned.

We interviewed four different stakeholders to make to learn what the site needs to do in order for it to be a successful tool for the business. We also interviewed four users to discover their pain points, priorities, and any ideas that they had about what would make the site work better for them. Ultimately, all of the interviews, conversations in the visioning sessions, and all of our instincts pointed to two specific needs:

The site needs an overhauled organization and Information architecture. 
The visual design of the site should be brought up to contemporary expectations.

My colleague, Charlie, lead the team through two different information organization activities: a card sort test and a tree test. Out of those two activities we had a solid navigation, and a validated structure to reorganize all of the existing site content under.

In a parallel effort, our Business Analyst colleague performed a Content Audit of all of the existing site content and was able to provide the client with a list of each piece of content, the current state of the content, and suggested destination for the content as well. Some content would be moved to a new home under the updated IA, and much of the older content would be archived to free up space and improve loading time.

OOUX & Wireframes

My Principal UX designer and I are both big fans of Sophia Prater’s Object Oriented UX system and the ORCA process that builds it, so we started building object maps as we were gathering information in the interviews and the IA activities

The OOUX and ORCA process helped us fully wrap our heads around the different types of content people come to MHI.org for. We pulled together a set of wireframes from our object and attribute collection that would serve as the basis for a system of consistent but differentiated cards for all of the content types.

These wireframes made creating structures for the rest of the website pages more streamlined, and they significantly improved the speed at which we could get the client on board with the design direction. In later meetings questions would come up about including and excluding certain attributes in the different cards, and these OOUX based wireframes were essential in ensuring that none of us ran away with ideas that could threaten the consistency of the card system.

After gathering and consolidating all of the objects, attributes, metadata, and CTAs within the various content types on the site, we built out these wireframes to illustrate which attributes were needed on each type of content, and the relative hierarchy of those attributes. The bottom row represents one or two layouts in OOUX wireframes for the data included in the card view of each type of content.

Once the cards were nearing approval, we could also work up wireframes for the core pages we wanted to design for the client. We started at the section level and could increase fidelity to reflect how the cards will display within the sections once they were approved.

High Fidelity Designs

With the content restructured and the navigation reworked, the second primary task was to ensure the visual design of the site was properly signaling MHI’s technical competency and their general status as the leaders of the industry knowledge.

We had gathered a set of different references that stakeholders and end users had mentioned during their interviews, and referred to those sites for layout and interaction ideas.

Following a similar structure as I did for the wireframes, the first components I brought through to high fidelity were the content cards. Once those were higher fidelity, other sections of the site started to come together.

All of the different card components necessary to bring consistency and clarity to the range of companies, industry groups, and content.

Industry Groups and Organizations

In the industries that MHI organizes around, there are many different groups and organizations that focus on specific portions of the larger industries. Each Industry Group (IG) has space on mhi.org to post their own content, and generally drive traffic to their material and generate leads for their members.

The primary path guides users through a scannable list of the different groups, and then link into the section specific to that organization.

Member Companies

One of the primary reasons that every day practitioners in these industries come to mhi.org is to find vendors that can provide them with products or services that they need in their warehouse. Companies pay to join MHI and to have a page on mhi.org where they can add content about their company and hopefully generate leads. Historically, Member Companies have been frustrated with the lead generation capabilities of the previous website.

One attribute that the Members have enjoyed which they wanted to carry into the new design was the ability to customize their page on the site. With consistency being a primary concern in these customized pages, I worked on finding a way where Members could customize their page without compromising legibility, accessibility, or consistent layouts.

MHI stakeholders expressed some needs to be able to add CTA language into the flow where people search for Members. Once we decided on this tile direction, it was easier to incorporate extra messaging tiles into the structure. I also included plenty of callouts with descriptions of behavior and experience suggestions, as well as features we had discussed during the project that did not make this version.

Three different options for Members to customize their page. 1. Members select an individual Hex value to add one of their brand colors as a splash on the page 2. Members can select up to two hex values in the cases where they may have more complex branding needs. 3. Members may also select an image to use as a banner at the top of the page. (since it works oh-so-well on Notion)

Next Steps

After our project closeout and handoff, MHI will still need to develop and deploy the updated site. Our team has a list of next steps that we hope to work with them on soon.

Further research into the areas of the MHI site that are behind their paywall 
Perform an intentional brand update and refresh 
Look deeper into moving mhi.org further into the realm of web apps by breaking the site apart into different product-focused user flows and feature sets, instead of centering the experience around content.

Outcome

At the end of the engagement, the client was really satisfied with the work we did for them. The information architecture work created some buzz and excitement with the stakeholders, and the new visual design approach definitely had many of the members of the client very excited for the potential future, while keeping the marketing group satisfied with the capabilities and priorities that the new design incorporates.