Molex
Redesign B2B Experience
Summary
Context
Molex realized that the way to grow revenue and increase retention and loyalty is to provide a best-in-class digital experience for their customers.
Business Goal
The goal is to create a seamless, user-centric VIP Customer Portal that enhances critical interactions such as product orders, price checks, and customer support, thereby improving transparency and overall customer satisfaction.
Design Challenges
Creating a Unified Experience: Ensuring consistent design across multiple clouds and platforms to maintain brand identity while delivering a seamless customer experience.
Optimizing Order & Price Check Functionality: Designing an intuitive interface for product orders and price checks, which are key revenue drivers, to improve efficiency and ease of use.
Enhancing Case Management: Developing a transparent and user-friendly case management system to improve customer support and foster trust.
Balancing Complexity and Usability: Simplifying the navigation and functionality of a self-service portal while managing the complexity of Molex’s product offerings and services.
Scalability & Integration: Integrating the portal with Molex’s existing systems and ensuring it can scale as the business grows.
Process
User Journey: Check Products & Order
Visualize the Journeys
Early in the process, we create user journeys to identify key interaction points, understand the demands on the customer at each point in the flows, and identify potential friction points where UX and design can make for a better experience.
Next Generation Portal Homepage – Non Registered Userx
Next Generation Portal Homepage – Non Registered User
A World Class Experience
Provide useful content to guest users. Build brand credibility through world-class design and compelling content, andincentivize users to create an account and/or become a Molex customer.
Next Generation Portal - Knowledge Base
Central Repository
Provide VIP customers with access to articles, product releases, and relevant industry information – all easily searchable and presented in a clean, easy to read, modern design language
Next Generation Portal - Knowledge Base
Streamlined Workflows
Let’s face it, B2B customers are here to get work done. designers invest a lot of time in getting even the smallest details “just right”.
Pages that are heavy with tabular data, product information and actionable single or multi-line flows require astute attention to design best practices to avoid user confusion.
Product Data Upload and Price
Transactions between Molex and their online customers begins with a single step…entering or uploading product material number in order to view availability, lead times, minimum order quantities, and much, much more.
We designed a single user interface to accommodate single and multi-line product lookup, sample product lookup and price check so that the customer does not have to learn a new interface each time they visit the site.
Product Data Multi-Line Product List
We designed a single page interface that allows users to search for products, lookup distributor numbers, change quantity of items, delete or duplicate a line item or export their results to a file.
Allowing the user to manage all of these items from a single, well designed interface was a huge lift in customer experience.
Product Data Upload and Price – Error Message Design Language
Advanced error messaging
Informs the user which data field needs corrected, and what the actual error is. Clearly designed visual indicators ensure the user knows which product needs to be resolved.
Cart and Checkout
Common Checkout Design
Borrowing from best practice in B2C and B2B checkout experience, we designed a hybrid cart & checkout experience that will give users the comfort and ease-of-use of a recognizable experience, with the added features and content that is necessary in their Molex shopping experience.
Checkout Flow
When does the payment screen become more than just “choose a credit card”? When you are dealing with potentially hundreds of ship to/bill to addresses, PO numbers for orders, and potentially large number of items in a cart, it is critical to prioritize the information display and guide the user through each step.
Before and After
Less is More
When does less equal more? When you can do more work and be more productive with less clicks, less screens, and less interactions to achieve the same result.
We improved the customer experience by re-imagining the most commonly used process flows at Molex.com, providing true customer self service experience.
