M.Holland
User Research / User Experience + Interface Design
M. Holland is a leader in plastic distribution and resin technology, based in Northbrook, IL. When they approached our team they were mid-development of MHX (M Holland Experience), a digital portal for their distribution customers. MHX was created to provide customers with a digital view into their orders, as well as acting as a single source of truth for important documentation.
The M.Holland team were finding that there were low adoption rates of their tool from both internal teams and from their customers. My team was engaged by M.Holland to help uncover the core user needs, and identify what needed to be done to create a more valuable and intuitive tool for their teams and customers.
In The Field
We went on site visits to talk to a range of team members who regularly have contact with M.Holland customers. Our conversations helped us piece together a journey map, connecting each role and documenting any hold-ups in the system. We then conducted usability sessions with the existing tool to gain an understanding of the core user needs.
Key Themes
Manual Order Management
The customer service team had particular orders that they needed to keep a close eye on, but since there was no way to flag something, this was done manually.
Risk of Error
With much of the processes requiring manual data entry, there was plenty of room for error. One small error can lead to much larger problems down the line.
System Workarounds
Without the capabilities in the system to prioritize orders, the team created workarounds to organize and communicate important information, disrupting data.
Email Workarounds
With a heavy dependence on email, we noticed each individual creating their own email sorting system, to keep information from getting lost.
Physical References
We noticed that there were some recurring patterns with the materials posted around the staff members’ desks such as calendars, process references, and product team references.
Order Progress Visibility
Once an order was placed, it is a black hole for customers, account managers, and customers. There are systems out there that track the information, but they are disconnected from the current processes.
Areas Of Opportunity
We identified a number of areas of opportunity to help bridge gaps in communication, reduce steps in processes, and plan for the future. As the scope of work did not cover a complete redesign of this system, I created some playful visuals to communicate the potential of these ideas and help the client visualize what the future of their tool could look like.
Practical, Immediate Fixes
There was a lot of excitement around the new ideas, but also an apprehension around the effort and cost that it would take to make them real. The M.Holland team were developing the product already, so we wanted to find a way to help them make immediate improvements as well as plan for the future. After a conducting a heuristic assessment of the tool, we designed some simple solutions that the team could implement in their next sprint.
Clear calls to action.
There was an opportunity to bring consistency and clarity to the M.Holland design system by making small alterations to elements such as buttons and links. For example, the existing system (left) had two different grey colors were used for primary buttons; a color which is typically associated with an inactive state. In a similar vein, the use of red is often associated with alarms and alerts.
Pulling from the M.Holland brand color palette, I created variations on the action buttons (right). I introduced bright orange for primary and secondary buttons to bring clarity to the action buttons. I then brought the M.Holland red to be used on smaller icon buttons as a way of utilizing the brand colors in a more subtle way.
Responsive design.
With some adjustments to the information hierarchy, the new designs ensure that text sizes are legible on a variety of devices, reduces the need for hover states, and prioritizes key information for customers.
On the account cards, by deprioritizing the icon, the full name of the company becomes legible, allowing users to scan and select the right account card more easily.
Task focused.
On the orders cards, we found that important information was hidden and required users to click around to find it. This information was pulled to the forefront of the design, prioritizing the ‘View Orders’ and creating a clear call to action by bringing in a primary button. The other account actions now have labels so users know there will be account related options when tapped.
Future State
As we thought about the needs of the M.Holland customers, we created a dashboard to better support their key use cases—managing orders, accessing documentation, tracking orders and comparing their product prices/quantities with their past history. The customer prototype shows how this dashboard, along with a new navigational approach, could create a more streamlined experience for customers.
As we thought about the needs of internal users, we also saw the need for a dashboard, but they have different information requirements to customers. We focused on providing them quick access to orders & railcars by status as well as a way to jump right into a specific customer’s orders. The internal prototype shows how this dashboard works with a slightly different organization structure, for the information gives internal staff members a simplified way to manage their accounts.
