Designed with You in Mind

A modern redesign of Mitutoyo’s SJ-220 promotional page, focused on improving product clarity, visual hierarchy, and user engagement.

SJ-220

The Drive Unit Selection section offers an excellent user experience through its clean layout, clear headings, and informative visuals. By organizing the drive unit options into well-structured cards with concise descriptions and supportive images, it allows users to quickly understand and compare the different types.

The central “Watch Video” call-to-action adds an interactive element that enhances engagement, especially for users seeking more in-depth information. Overall, the section is intuitive, visually appealing, and effectively communicates technical details in a user-friendly format.

UX Analysis Highlight

This project involved analyzing and redesigning a product landing page for the Mitutoyo SJ-220 device. I focused on improving user experience through better layout, accessible typography, and clear product communication.

Redesign Showcase

This section presents redesigned components from the original SJ-220 landing page. I focused on modular design, flexible layouts, and clear call-to-action integration.

Strong Visual Hierarchy & Natural Flow

The landing page uses clear visual hierarchy, beginning with a bold product header that immediately introduces the SJ-220. Below that, the structured layout guides users through key sections—from the feature highlights to the drive unit options and the Android app. This natural progression keeps the user engaged without overwhelming them.

Clean Layout with Functional White Space

The layout balances text, imagery, and white space exceptionally well. In the “Drive Unit Selection” section, for example, each unit is presented in a 3-column grid with generous spacing, making it easy to compare options without visual clutter.

Product-Focused Imagery Enhances Understanding

Throughout the page, images are used to support clarity—not just to decorate. The top section features a crisp product image showing the actual measurement display, reinforcing the modern and user-friendly interface. Additional photos show the device in use, providing real-world context.

Consistent Typography & Brand Colors

The landing page uses a modern, clean sans-serif font that is highly legible. The brand's orange is used sparingly but effectively—for headings, icons, and accents—while the rest of the palette stays neutral. This creates a polished, professional feel that’s consistent with Mitutoyo’s brand identity.

Accessibility Through Modular Content

Sections like “New Features” and “Drive Unit Selection” are organized into visually distinct blocks, making the content scannable and accessible. This modularity supports both desktop and mobile reading patterns, allowing users to quickly find the information they care about.

Visual Callouts to Key Features

The “New Features” section cleverly uses icons and minimal text to spotlight updates like the 2.8-inch touchscreen, HOME key, and ISO 21920 compliance. These callouts are supported by interface images and device closeups, making complex upgrades feel approachable and clear.

The Story in Numbers

Increase in CTA Triggers over 24hrs

+400%

Drop in Bounce Rate

-23%

Growth in Product Brochure Downloads

+78%