MiC 4.0
MiC 4.0 streamlines digitalization in the construction industry with a modern interface and advanced filters for easy equipment comparison and selection.
project overview.
TYPE: Client based project
ROLE: UX & UI Designer
TEAM SIZE: 3
DURATION: 2 months
MiC 4.0 (Machines in Construction 4.0) is an initiative aimed at standardizing and advancing the digitalization of the construction machinery industry. It works to create a unified framework for data and interface definitions, improving communication and interoperability between manufacturers and users. This allows for seamless integration and more efficient construction processes. The goal of this project was to modernize the website’s design, enhance its functionality, and refresh the brand identity to reflect the company’s innovative and forward-thinking approach.
The Problem.
The existing MiC 4.0 website needed a more contemporary look and feel. Additionally, the platform lacked advanced features that could support the needs of users, such as detailed comparison tools for construction vehicles and more intuitive navigation. The brand identity also required refreshing to better align with the company’s cutting-edge image, and improved search and filtering options were necessary to ensure quick and easy access to critical information.
The Solution.
The redesign of the MiC 4.0 website focused on modernizing its visual aesthetics, with a clean, professional, and user-friendly interface. Key features such as a vehicle comparison tool and comprehensive filters were introduced, allowing users to compare construction machinery side-by-side and filter results by various criteria. The brand identity was updated to reflect the innovative spirit of MiC 4.0, with improvements that ensure users can easily explore and interact with the site’s content.
Personas.
To ensure the redesign of MiC 4.0 catered to the specific needs of its diverse users, I developed personas representing key stakeholders in the construction machinery industry. These personas helped guide design decisions, focusing on the real-world goals and pain points of both equipment operators and fleet managers.
Branding & Design System.
The branding and design system for MiC 4.0 builds on the original colour scheme, enhancing the shades to create a more modern and professional look. The neutral colours remain a strong, unobtrusive backdrop, while the refined primary blue continues to convey trust and reliability. Subtle adjustments to the palette make the design feel fresher, while orange accents effectively highlight key areas and calls to action, driving user engagement.
The typography was selected to ensure readability and visual hierarchy, with large, bold headings to clearly distinguish sections, and varied text sizes and weights for a smooth reading experience. This combination ensures that the interface is accessible, engaging, and easy to navigate.
Additionally, I developed a library of reusable components, including buttons, forms, and cards, to ensure consistency across the platform and simplify future updates. This component-based approach not only maintains the visual coherence of the design but also supports scalability and efficient collaboration.
The process.
During discussions with stakeholders, it became clear that while they appreciated the overall redesign, the most critical aspect was creating an effective filtering feature. To address this need, I explored potential solutions through several meetings. Below, I will showcase a couple of versions we ultimately decided against, along with the reasoning behind those decisions.
filter version #1
The first iteration drew inspiration from a competitor's filtering structure, allowing users to filter machinery through multiple categories. Users could choose a brand first, select a vehicle category and subcategory, or search by functionality. However, this approach created unnecessary friction, as users were forced to make an initial decision about which filter to use. Regardless of their choice, they still needed to select from all three categories in subsequent steps. This redundancy led to confusion and an inefficient user experience, prompting us to seek a more streamlined solution that would eliminate unnecessary steps and simplify the filtering process.
filter version #2
The second approach involved a filter that required users to select a machine type first (e.g., Earth-moving machinery), followed by a series of steps where they would choose a subcategory (e.g., wheel loaders), input additional optional specifications such as kW, weight, and drive type, select options for the machinery, and finally choose the brands. However, this method proved ineffective due to its length and complexity. Users were often uncertain about how many steps were left in the process, leading to frustration. Additionally, the lack of visibility into their previous choices and what lay ahead made it difficult for them to review or change their selections without navigating back and forth. The ambiguity around which specifications were optional further compounded the confusion, ultimately hindering the user experience.
filter version #3
The third option retained the initial steps of the previous design but removed the last two slides that required users to select optional filters—options and brands. Instead, users would choose a vehicle type and then be presented with a list of relevant vehicles. A smaller filter would be available on the side of the page, allowing users to adjust their selections with optional filters like brands and specifications. However, this approach also fell short. By introducing two different filtering styles, it risked confusing users and could lead to incomplete filtering, as they might not notice the side options. This, combined with the previously mentioned issues, meant that users could struggle to navigate effectively through the filtering process.
filter version #4
The filter we ultimately selected proved to be the most straightforward and user-friendly approach. By presenting all filtering options on a single screen in distinct boxes, users can easily review and adjust their selections without feeling overwhelmed. This layout allows them to quickly identify what they want to filter while conveniently skipping any fields they don’t wish to complete. With a simple click of the search button, users can effortlessly view all relevant results. This design significantly improves upon the previous options, as it reduces friction, ensuring a smoother and more efficient user experience.
Final UI Design & User Flow.
Upon logging in or registering, users are welcomed by an efficient filter interface that simplifies the search process, ensuring they can quickly find equipment tailored to their specific needs.
Once filters are applied, users can view relevant vehicles in a visually engaging grid or list format, complete with prominent images and essential information. This design minimizes cognitive load and keeps the focus on critical details. The filters remain easily accessible on the side of the page, allowing users to make quick adjustments without interrupting their browsing experience.
A key highlight of the design is the ability for users to select multiple vehicles for comparison. When vehicles are selected, they appear at the top of the page, and clicking the "compare" button reveals a dropdown displaying detailed specifications for easy side-by-side evaluation. Additionally, users can export their comparisons as a PDF, making it simple to share information with colleagues or decision-makers.
Find machinery.
Browse and compare construction vehicles based on brand, machine type, attributes, and options. The interface is easy to use, ensuring you to quickly find and filter construction machinery!
Browse & filter.
Browse vehicles and use the sidebar filters for more refined searches based on attributes like engine power and weight, as well as specific options that ensure a tailored search experience!
Compare vehicles.
Select and compare different construction vehicles - the comparison includes technical data which provides you with a comprehensive overview to make informed decisions!
Potential future Improvements.
While the current design serves as a solid MVP, there are several enhancements that could elevate the user experience further. Future iterations could include a feature to save search preferences within user accounts, allowing for quick access to previous searches without needing to reapply all filter options. Additionally, developing a mobile-friendly version would cater to users on the go, enhancing accessibility. Incorporating user-generated reviews and ratings for each vehicle could provide valuable insights for decision-making. Other potential features might include advanced analytics for fleet managers to track usage patterns, integration with third-party services for parts and maintenance, and personalized recommendations based on user activity. Implementing these improvements could significantly enhance the platform's functionality and user satisfaction.
Conclusion.
The redesigned MIC 4.0 website now features a modern, user-friendly interface that effectively supports the company's mission of promoting Industry 4.0 technologies. The enhanced functionality, such as the vehicle comparison tool and advanced filters, greatly improved user experience, making it easier for visitors to find and compare information on construction vehicles. The refreshed branding aligns with MIC's innovative image, ensuring a professional and cohesive look across all digital platforms.
My redesign not only revitalized MiC 4.0’s online presence but also significantly improved user engagement and satisfaction, empowering stakeholders to make informed decisions with ease.