Modernizing MHI.org: A Content-Heavy Website Redesign

Discovery, alignment, & website design

OOUX

UX Design

Visual Design

Web

MHI, the primary information hub for material handling, logistics, and supply chain industries in the US, tasked us with redesigning their decade-old website. Our challenge was to modernize the site, reflecting MHI's technical prowess and reinforcing their industry leadership.

Client

MHI (Material Handling Industry of America)

Client

MHI (Material Handling Industry of America)

Client

MHI (Material Handling Industry of America)

Timeline

Q2 2023, 8 weeks

Timeline

Q2 2023, 8 weeks

Timeline

Q2 2023, 8 weeks

Role

UX Designer, Visual Designer

Role

UX Designer, Visual Designer

Role

UX Designer, Visual Designer

What I Did

Assistant Researcher, Lead UX Design, Visual Design

What I Did

Assistant Researcher, Lead UX Design, Visual Design

What I Did

Assistant Researcher, Lead UX Design, Visual Design

Project Overview

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.

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.

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.

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.

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.

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.

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.

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.

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.

Regulation Table

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.

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.

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.

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.

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.

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.

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.

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.

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.

Regulation Text

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.

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.

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.

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.

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.

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.

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.

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.

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.

Regulation Table

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.

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.

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.

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.

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.

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.

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.

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.

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.

Project Conclusion

Next Steps

Integration with Policies module

Viewing regulations is only half of the task. We had begun work to bring the Regs experience and the Policies experience together when the contract was ended.

View for healthcare practicioners

The primary use case for this version was for policy writers, but regular doctors, nurses, and other healthcare staff need to be able to read the regulations as well.

Incidents view & integration

Another workflow that the Relias product was supposed to include was documenting and responding to incidents, and ensuring repeat offenders were taking effective training to avoid incidents in the future.

Next Steps

Integration with Policies module

Viewing regulations is only half of the task. We had begun work to bring the Regs experience and the Policies experience together when the contract was ended.

View for healthcare practicioners

The primary use case for this version was for policy writers, but regular doctors, nurses, and other healthcare staff need to be able to read the regulations as well.

Incidents view & integration

Another workflow that the Relias product was supposed to include was documenting and responding to incidents, and ensuring repeat offenders were taking effective training to avoid incidents in the future.

Next Steps

Integration with Policies module

Viewing regulations is only half of the task. We had begun work to bring the Regs experience and the Policies experience together when the contract was ended.

View for healthcare practicioners

The primary use case for this version was for policy writers, but regular doctors, nurses, and other healthcare staff need to be able to read the regulations as well.

Incidents view & integration

Another workflow that the Relias product was supposed to include was documenting and responding to incidents, and ensuring repeat offenders were taking effective training to avoid incidents in the future.

Successes

High satisfaction from PO & client team

The PO for the feature and her peers in the product strategy group above us were all very happy with the final design and the efficient process we used to get there.

Implementation of complex UI

Collaborating with our Dev to find the best way to implement the nesting mechanism of the Regulations table led to highly accurate implementation of designs

Mentoring a junior designer through project

I was able to bring Rochelle through our process of gathering additional information from our PO and figuring out an efficient screen design order, which allowed her to ask a ton of questions and use that experience immediately on her next client project.

Successes

High satisfaction from PO & client team

The PO for the feature and her peers in the product strategy group above us were all very happy with the final design and the efficient process we used to get there.

Implementation of complex UI

Collaborating with our Dev to find the best way to implement the nesting mechanism of the Regulations table led to highly accurate implementation of designs

Mentoring a junior designer through project

I was able to bring Rochelle through our process of gathering additional information from our PO and figuring out an efficient screen design order, which allowed her to ask a ton of questions and use that experience immediately on her next client project.

Successes

High satisfaction from PO & client team

The PO for the feature and her peers in the product strategy group above us were all very happy with the final design and the efficient process we used to get there.

Implementation of complex UI

Collaborating with our Dev to find the best way to implement the nesting mechanism of the Regulations table led to highly accurate implementation of designs

Mentoring a junior designer through project

I was able to bring Rochelle through our process of gathering additional information from our PO and figuring out an efficient screen design order, which allowed her to ask a ton of questions and use that experience immediately on her next client project.

Failures

Full A11y testing on Regulation table

The design system we were building on came with some built-in a11y functionality, but we did not have an opportunity to test the table with any screen readers or other non-visual interfaces within the contract timeline.

Usability & acceptance testing

We were unable to do any testing of our designs with users of any kind. I can’t truly claim these designs are successful until I know that they passed usability testing.

Failures

Full A11y testing on Regulation table

The design system we were building on came with some built-in a11y functionality, but we did not have an opportunity to test the table with any screen readers or other non-visual interfaces within the contract timeline.

Usability & acceptance testing

We were unable to do any testing of our designs with users of any kind. I can’t truly claim these designs are successful until I know that they passed usability testing.

Failures

Full A11y testing on Regulation table

The design system we were building on came with some built-in a11y functionality, but we did not have an opportunity to test the table with any screen readers or other non-visual interfaces within the contract timeline.

Usability & acceptance testing

We were unable to do any testing of our designs with users of any kind. I can’t truly claim these designs are successful until I know that they passed usability testing.