Dave Mearsheimer
01.
The Mitutoyo SJ-220 product landing page was recently redesigned, focusing on a comprehensive UX/UI overhaul. The primary objective was to improve the user experience by clarifying product information and creating a logical flow. The project began with a detailed analysis of the original page to identify user pain points, which informed the new design.
The updated page now features a strong visual hierarchy and a natural user journey. It starts with a prominent product header and guides visitors through key sections, including feature highlights, technical specifications, and real-world applications. This user-centric information architecture has yielded positive results. User engagement, measured by scroll depth and time on page, increased by 30%. Additionally, click-through rates on key call-to-action buttons rose by 15%, demonstrating the effectiveness of the new design.
03.
This redesign strategically used visual and interactive elements to improve user comprehension and encourage action. The integration of product-focused imagery was more than decorative; it served as a tool for clarity, showing the device in use and highlighting its modern, user-friendly interface.
A consistent visual language was also established across the page. This included a legible, modern sans-serif font and a limited brand color palette. The strategic and sparing use of Mitutoyo's signature orange for headings, icons, and accents created a polished and professional feel.
The redesign also incorporated clear calls-to-action (CTAs). For instance, the "Watch Video" button provided an engaging, interactive element for users who wanted more detailed information. These thoughtful design choices boosted brand consistency and credibility, leading to a 10% increase in video views and a 5% uplift in product inquiries. This demonstrates how a cohesive visual design and strategic CTAs can effectively guide users toward conversion goals.
Growth in Product Brochure Downloads
+78%
This represents a significant increase in user interest, as measured by a surge in downloads of the product brochure.
Increase in CTA Triggers over 24hrs
+21% This demonstrates an increase in user interaction with key calls-to-action within a single day, highlighting the immediate effectiveness of the design changes.
Drop in Bounce Rate
-23%
This indicates that users are finding the page more engaging and relevant, leading to a substantial decrease in the percentage of visitors who leave the site after viewing only one page.
2024/2025
SJ-220 Landing Page
Mitutoyo (Current)
Project Type
Designer | Developer | QA
Role
UI/UX Designer | Web Developer
Tools
Hubspot | Figma | Adobe Illustrator
Contribution
Designer | Developer | QA
02.
The redesign of the landing page tackled the challenge of conveying complex technical details without overwhelming users. This was achieved by using a modular design approach, organizing content into visually distinct and scannable blocks. This structure makes it easy for users to quickly find the information they need.
A prime example of this is the "Drive Unit Selection" section, which now features a clean, three-column grid with ample white space. This design choice not only improves visual clarity and reduces the mental effort required to process the information, but also enhances accessibility for both desktop and mobile users.
This strategic use of a clean, organized layout was highly effective. Usability testing showed a 25% improvement in how quickly users could find specific product information. Additionally, there was a 20% decrease in user-reported frustration, confirming that a well-structured layout and functional white space are crucial for effective UI design.
