Introduction

Overview

Magnate Technology, a company with 30 years of expertise in aerospace and precision instrument manufacturing, commissioned our team to redesign and build its official website.

Collaborating with M-Think Technology, my role was to establish a stronger digital presence for the brand through comprehensive UI design and front-end interaction planning.

01 — Problem Statement

Technical depth, unclear hierarchy

The primary challenge of this project was presenting highly technical aerospace manufacturing capabilities to a global audience.

Complex Technical Content

The existing digital footprint lacked a clear information hierarchy, making it difficult for users to digest complex technical details.

Inconsistent Visual Identity

Visitors struggled to navigate dense manufacturing capabilities while the site failed to maintain a consistent visual identity across pages.

02 — Project Goals

Multilingual, stable, and clear communication

Based on the client's needs, we established the following core objectives:

Multilingual Support

Create a multilingual-ready interface structure capable of seamlessly handling Traditional Chinese, Japanese, and English layouts.

Visual Stability

Ensure the design remains visually stable and maintains strong readability across different text lengths associated with various languages.

Clear Communication

Clearly communicate the company's technical capabilities, services, and corporate governance.

03 — Design Process

From research to iterative multilingual layouts

Phase 01 — Research & IA

Information Architecture

Five core nav areas — from corporate overview to specialized manufacturing.

The first step was organizing the company's extensive operational data into a digestible format. I analyzed their core business sectors to map out a clear user flow, resulting in navigation categorized by core areas:

About Magnate Technical Capabilities Application Areas Investor Relations Sustainable Development (ESG)

Application areas include sectors such as Aerospace Engines and Landing Gear, guiding visitors from corporate overview to specialized manufacturing expertise.

Magnate website information architecture diagram showing core navigation areas and user flows
Information architecture — core business sectors mapped into an intuitive navigation structure.

Findability — reach technical product information

Old site
6 pages
Industry avg
4 pages
Redesign goal
2 pages
5 Nav zones
3 Languages
12+ Reusable modules
Phase 02 — Ideation

Wireframing

Modular layouts expand or contract across English, Traditional Chinese, and Japanese.

Because the site required support for three vastly different languages, standard static wireframes would not suffice. I focused on ideating flexible content modules that could expand or contract based on the language being displayed.

The wireframing phase heavily prioritized content hierarchy, ensuring that technical specifications—like their 400+ CNC machines and Nadcap special process certifications—were prominent but not overwhelming.

Low-fidelity wireframe prototypes showing flexible multilingual content modules
Wireframes — modular layouts designed to expand or contract across language versions.
Phase 03 — UI Design

Component System

Reusable UI sections keep financial and technical pages visually cohesive.

During the visual design phase, I was responsible for establishing the UI components and color system. I designed reusable UI sections to maintain visual consistency across all pages.

This modular approach not only sped up the design handoff but also ensured that the visual identity remained cohesive whether the user was viewing a financial report or a technical capabilities page.

Magnate UI color system and component palette
Color system & components — reusable UI sections for consistent visual identity.
Phase 04 — Testing

Iterative Layouts

Typography stress-tested so dense Chinese and concise English both read clearly.

A major part of the iterative process involved stress-testing the typography and component behavior. We tested the layouts using varying text lengths to ensure responsive behavior kept readability strong under all conditions.

This guaranteed that the interface structure remained robust when switching between the concise nature of English and the denser characters of Traditional Chinese and Japanese.

Magnate responsive layout tested across English, Traditional Chinese, and Japanese text lengths
Responsive stress test — layouts validated across three language densities.
04 — Key Solutions / Final Design

Responsive modules, adaptive type, and guided flows

To solve the initial problems, the final design incorporated three interconnected solutions—each validated through before-and-after comparisons across key pages.

Solution 01

Modular Responsiveness

A highly responsive web layout built entirely on reusable UI sections, reducing development friction and ensuring visual consistency. The redesign transformed a legacy homepage with limited hierarchy into a clearer, brand-aligned structure.

Multilingual 繁體中文 EN 日本語
Previous site
Previous Magnate website homepage before redesign
Redesigned site
Redesigned Magnate website homepage with modular responsive layout
Solution 02

Adaptive Typography

A flexible UI that accommodates the distinct typographic spatial requirements of Traditional Chinese, English, and Japanese without breaking the grid. The same component system extends to inquiry flows, keeping forms readable and visually stable across languages.

Adaptive type Translation-ready 繁體中文 English 日本語
Previous contact
Previous Magnate contact page before redesign
Redesigned contact
Redesigned Magnate Contact Us page with consistent component system
Solution 03

Streamlined User Flows

Custom front-end interactions that guide users logically from high-level overviews down to specific technical processes, such as 5-axis machining and collaborative engineering.

Magnate website page showing technical capabilities and guided user flow
05 — Reflection

Technical accuracy meets modern digital aesthetics

Designing for the aerospace and precision manufacturing sector required a balance of rigid technical accuracy and modern digital aesthetics.

The biggest takeaway from this project was the importance of designing for scalability. By focusing on flexible content modules early in the process, I learned how to build a design system that doesn't just look good on day one, but continues to function perfectly as the client updates content across multiple languages.

06 — Summary / Impact

A modern, accessible digital touchpoint

The redesign successfully transformed Magnate Technology's digital touchpoint into a modern, accessible platform.

Brand Enhancement

The delivered website drastically improved brand consistency across all digital channels.

Improved UX

It successfully clarified dense technical content for global visitors.

Business Value

By utilizing a modular component system, we provided a scalable foundation for future updates, ensuring the company's digital presence can grow alongside its manufacturing capabilities.