Sr Product Designer
P.png

Static Pages Cms Collection

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


Page Design Template