Modernizing MHI.org: A Content-Heavy Website Redesign
Modernizing MHI.org: A Content-Heavy Website Redesign
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.
Home Page
I pushed the design of the home page in a more bold new direction for their brand, hoping that the new aesthetic would push returning visitiors to rethink their expectations from MHI
Home Page
I pushed the design of the home page in a more bold new direction for their brand, hoping that the new aesthetic would push returning visitiors to rethink their expectations from MHI
Home Page
I pushed the design of the home page in a more bold new direction for their brand, hoping that the new aesthetic would push returning visitiors to rethink their expectations from MHI
Home Page
I pushed the design of the home page in a more bold new direction for their brand, hoping that the new aesthetic would push returning visitiors to rethink their expectations from MHI
Blog Pages
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.
Blog Pages
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.
Blog Pages
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.
Blog Pages
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.
Member Companies
Directory
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.
Directory
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.
Directory
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.
Customizable Company Pages
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.
Customizable Company Pages
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.
Customizable Company Pages
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.
Member Directory
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.
Member Directory
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.
Member Directory
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.
Member Directory
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.
Member Company Pages
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)
Member Company Pages
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)
Member Company Pages
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)
Member Company Pages
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)
Industry Groups
Industry Groups?
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.
Industry Groups?
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.
Industry Groups?
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.
Group Home Page
Each Industry Group has their own home page within the site where they can customize their own sub-navigation, and display names and contact information for the members of their boards.
Group Home Page
Each Industry Group has their own home page within the site where they can customize their own sub-navigation, and display names and contact information for the members of their boards.
Group Home Page
Each Industry Group has their own home page within the site where they can customize their own sub-navigation, and display names and contact information for the members of their boards.
IG Directory
Internally, MHI knew that this page could lead to a lot of politicking from the groups to have their tile moved 'above the fold', so our priority was to condense the tiles as much as possible, reducing the imact of being located further down on the page.
IG Directory
Internally, MHI knew that this page could lead to a lot of politicking from the groups to have their tile moved 'above the fold', so our priority was to condense the tiles as much as possible, reducing the imact of being located further down on the page.
IG Directory
Internally, MHI knew that this page could lead to a lot of politicking from the groups to have their tile moved 'above the fold', so our priority was to condense the tiles as much as possible, reducing the imact of being located further down on the page.
IG Directory
Internally, MHI knew that this page could lead to a lot of politicking from the groups to have their tile moved 'above the fold', so our priority was to condense the tiles as much as possible, reducing the imact of being located further down on the page.
Industry Group
Each Industry Group has their own home page within the site where they can customize their own sub-navigation, and display names and contact information for the members of their boards.
Industry Group
Each Industry Group has their own home page within the site where they can customize their own sub-navigation, and display names and contact information for the members of their boards.
Industry Group
Each Industry Group has their own home page within the site where they can customize their own sub-navigation, and display names and contact information for the members of their boards.
Industry Group
Each Industry Group has their own home page within the site where they can customize their own sub-navigation, and display names and contact information for the members of their boards.
User Account
Member users have access to member-only content, and have views into account updates as well as a loyalty point system.
User Account
Member users have access to member-only content, and have views into account updates as well as a loyalty point system.
User Account
Member users have access to member-only content, and have views into account updates as well as a loyalty point system.
User Account
Member users have access to member-only content, and have views into account updates as well as a loyalty point system.
Content Cards
All of the different card components necessary to bring consistency and clarity to the range of companies, industry groups, and content.
Content Cards
All of the different card components necessary to bring consistency and clarity to the range of companies, industry groups, and content.
Content Cards
All of the different card components necessary to bring consistency and clarity to the range of companies, industry groups, and content.
Content Cards
All of the different card components necessary to bring consistency and clarity to the range of companies, industry groups, and content.
Discovery
Background & Kickoff
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.
Background & Kickoff
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.
Background & Kickoff
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.
Visioning workshop, Stakeholder Interviews, & New Information Architecture
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.
Visioning workshop, Stakeholder Interviews, & New Information Architecture
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.
Visioning workshop, Stakeholder Interviews, & New Information Architecture
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.
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.
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.
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.
OOUX for Content Cards
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.
OOUX for Content Cards
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.
OOUX for Content Cards
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.
OOUX for Content Cards
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.
OOUX to Wires
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.
OOUX to Wires
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.
OOUX to Wires
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.
OOUX to Wires
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.
Project Conclusion
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 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.
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 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.
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 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.
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.
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.
GARY MEYER
© 2024 All Rights Reserved
SOCIALS
GARY MEYER
© 2024 All Rights Reserved
SOCIALS
GARY MEYER
© 2024 All Rights Reserved
SOCIALS