Redesigning a decade-old, content-heavy website
Discovery, alignment, & website design for
UX Design
Visual Design
Q2 2023
Assistant Researcher, Lead UX Design, Visual Design
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.


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.


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.


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.


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:

  1. The site needs an overhauled organization and Information architecture.

  2. 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 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.

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.

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 to post their own content, and generally drive traffic to their material and generate leads for their members.

Member Companies

One of the primary reasons that every day practitioners in these industries come to 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 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.

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.

  1. Further research into the areas of the MHI site that are behind their paywall

  2. Perform an intentional brand update and refresh

  3. Look deeper into moving 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.

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.

© 2023 Gary Meyer. All right reserved.