MSC is a leading B2B e-commerce company, specializing in offering an extensive range of solutions and resources tailored to meet the needs of diverse stakeholders. Each stakeholder owns a specific page, ensuring that the content and offerings are highly specialized and relevant.
With a commitment to excellence and innovation, MSC provides a comprehensive platform that facilitates efficient business transactions and access to vital information across various industries.
The existing design faced significant challenges due to each page being managed through different CMS platforms, limiting the ability of page owners to easily modify design and content.
This fragmented approach resulted in a lack of uniformity across pages, making the design feel inconsistent and the content difficult to navigate. Overall, this disjointed user experience meant that the pages seemed disorganized and scattered, detracting from the coherence and usability of the platform.
To address these challenges, we have opted for a modular design approach for our pages, incorporating a variety of components that can be easily managed within a CMS. This innovative solution empowers our teams with the flexibility to modify page designs without violating established design guidelines. It simplifies the process of updating content and images, ensuring that pages can be refreshed more efficiently. This strategic shift towards a component-based architecture not only enhances design consistency across the platform but also significantly improves the user experience by making information more accessible and easier to navigate.
Research
Before we commence the design process, we meticulously identified all available static pages on MSC.com. This allowed us to map out each static page and identify the stakeholders associated with each section.
After compiling all static pages and identifying the stakeholders, we commenced interviewing each team to ascertain the typical content they utilize on these pages.
The following questions relate to the current processes for the creation and management of static content on mscdirect.com.
After conducting interviews with various teams including Marketing, Solutions, Resources, and Customer Service, we identified several types of content that are actively being created:
Hero banners
Copy blocks
Web forms
Case studies
Customer testimonials
Infographics
Videos
Landing pages
Animation
Brochures / flyers
White papers
Events/tradeshows signage (in scope?)
Articles
On site marketing ads
Press Release
Social graphics /ads
Solutions Pages Design
Based on the data we gathered, one of the most crucial static pages identified was the Solutions page. Apart from inconsistent visual elements, we observed significant UX issues, making it challenging for users to navigate and find solutions tailored to their needs.
As we collected data for static components, we made the strategic decision to utilize the Solutions page as our primary reference point. By creating components based on this page, we aim to address its UX shortcomings and ensure that the components developed are versatile enough to be used across other static page.
What problem are we solving?
Based on our research, we've identified three main issues with these pages:
1- Lack of Storytelling:
Users are not engaging with the content.
Overall Traffic >> 30,864 Solution Tab
17.8% of overall traffic >> 52.5% first time VS 47.5% returning
Overall Bounce Rate >> 56.6%
First Time Bounce Rate >> 77.2%
2- No Structure / Categories
Solution pages are all over the place. its not for users to find related link to their problem easy
3- Lead Generation
Solution pages are all over the place. its not for users to find related link to their problem easy
Please follow the slides for MSC Solutions research.
We began by categorizing each solutions page and decided to consolidate them into a single overarching solution page. This page will serve as a gateway for users to explore various industry solutions. We collaborated closely with teams specializing in Inventory Management, eProcurement, Metalworking, and Supply Chain to comprehensively understand the solutions they offer and determine the type of content required for these pages.
Based on the analysis of solution pages, we have identified the components that need to be created for reuse across all pages, as well as for other static pages.
Final Static Components
Below you can see some of the static Components- added only 3 examples for each section
Banners
Hero Banner
Callout Banner
Media Banner
Cards / Items
Brand Cards
Buying Guides
Content Cards
Collection Components
Card Stack
Content collection
Featured Case Study
Other Components
Anchor Link Navigation
Forms
Maps
Elements
Card Labels
Filters
Topic Tags