Designing the Digital Flagship for UMI Lab: Where Wave Physics Meets Modern Web Design

Academic laboratory websites have a reputation problem. Too often, world-class research in mechanics, acoustics, and artificial intelligence is hidden behind walls of unformatted text, decade-old tables, and broken PDF links. The brilliance of the science simply doesn't translate onto the screen.

When UMI Lab (Ultrasonics & Mechanics Inspection Lab) at VNU University of Engineering and Technology partnered with No Name Studio, our brief was clear: design and build a digital home worthy of their research.

Led by Assoc. Prof. Dr. Phan Hải Đăng, UMI Lab works at the intersection of wave propagation, guided-wave structural health monitoring (SHM), non-destructive evaluation (NDE), bone quantitative ultrasound, and physics-informed deep learning. They collaborate with premier research institutions across the US, Canada, South Korea, Japan, and Australia.

Here is the story of how we crafted, animated, and engineered the landing page for UMI Lab (lab.nnsvn.me).

1. The Design Vision: Precision Meets Atmosphere

A research group studying wave mechanics needs an aesthetic that balances rigorous academic credibility with forward-looking innovation.

We established a design language built around three core principles:

1. Atmospheric Depth: Deep obsidian backgrounds (#0a0a0c) contrasted with electric violet accents and bioluminescent gradients reminiscent of acoustic wave pulses.
2. High-Density Legibility: Presenting extensive academic credentials—over 50 ISI/Scopus papers, 10 funded research grants, h-index citations, and international appointments—without overwhelming visitors.
3. Tactile Interaction: Making abstract mathematical mechanics tangible through deliberate motion, interactive cards, and cursor-reactive feedback.

The Hero Experience

Rather than a generic university banner, the hero immediately grounds visitors in the human and scientific dimension of the lab. A crisp, bottom-left anchored typography layout ("Understanding Structures Through Waves") pairs with the lab's collaborative team imagery. Smooth entry animations powered by motion-v ensure the page reveals itself with fluidity, while direct CTA buttons allow immediate navigation to core research domains or international partnerships.

The Bento Grid Architecture

To organize the lab's multifaceted achievements, we implemented a modular Bento Grid layout. In a single cohesive viewport, visitors can grasp:

• Key Scientific Metrics: 15+ years of research, 50+ ISI/Scopus publications, 580+ citations, and 2 foundational textbooks.
• The Four Pillars: Wave Propagation, NDE & SHM, Bone Quantitative Ultrasound (QUS), and Physics-Informed AI.
• Visual Rhythm: Balanced card proportions with subtle slate borders, high-contrast typography, and purposeful iconography.

2. Interactive Research Themes: The Apple-Style Card Carousel

One of the central design challenges was how to present complex scientific topics. Traditional academic portals either reduce research directions to a bullet list or bury them inside separate pages.

We took inspiration from modern editorial showcases and created an Apple Card Carousel component:

Dynamic Visual Schematics

Each card features custom-crafted vector graphics representing the physical reality of the research:

• Wave Mechanics: Elastodynamic reciprocity and wave scattering around structural cavities.
• Structural Acoustics: Sinusoidal dispersion curves and guided waves propagating through multilayered composite plates.
• Biomedical Ultrasonics: Cross-sectional acoustic wave guides in cortical bone.
• Data-Driven Mechanics: Neural networks and physics-informed inverse problem formulations.

Frictionless Deep Dives

Visitors can swipe smoothly across themes. When a card is clicked, it expands via an elegant fluid modal dialog (AppleCard + ProjectDetails). Users can read the technical background, theoretical formulations, and experimental parameters without leaving the flow of the landing page, then dismiss it with a single keystroke or click.

3. Micro-Interactions: Spotlight Methodology Cards

Research is not just about final publications; it's about the scientific methodology that produces them.

To articulate UMI Lab's workflow—Formulate (open problem identification) $\rightarrow$ Model (analytical, FEM, BEM, and machine learning) $\rightarrow$ Validate (experimental testing and peer-reviewed verification)—we built interactive Spotlight Cards (CardSpotlight).

As the cursor traverses the cards, a dynamic radial gradient tracks the pointer in real-time:

• Warm Amber Glow for problem formulation and hypothesis generation.
• Electric Blue Glow for computational modeling and algorithmic simulation.
• Emerald Green Glow for experimental validation and practical deployment.

These micro-interactions reward user exploration while keeping the UI clean and unobtrusive.

4. Academic Reach: The International Collaboration Network

Science advances through global collaboration. UMI Lab actively partners with world-leading universities across Asia, North America, and Australia.

Communicating this global presence was critical for attracting prospective graduate students, postdocs, and international research grants.

We framed this section against an atmospheric twilight sky backdrop with layered backdrop-filter blurs. An interactive carousel showcases key partner institutions, including:

• Northwestern University (Evanston, USA) — Wave scattering research and PhD mentorship.
• University of Alberta (Edmonton, Canada) — Bone quantitative ultrasound and signal processing.
• Pusan National University (Busan, South Korea) — Foundational reciprocity research.
• RMIT University (Melbourne, Australia) — Applied mechanics collaboration.
• Institute of Science Tokyo (Tokyo, Japan) — Computational mechanics and wave modeling.

Each partner card highlights location badges, institutional crests, and direct external links, paired with a personal reflection from the lab director on the role of cross-border partnerships.

5. Dual-Theme Design: Dark Mode & Light Mode

Academic researchers work in varied environments—from darkened laser and ultrasound testing facilities to brightly lit lecture halls and conference rooms. A first-class reading experience requires an adaptive design system.

We engineered a dual-mode system with seamless color transitions:

• Dark Mode: Deep obsidian surfaces, subtle glass borders, luminous purple focal points, and low eye-strain for extended reading.
• Light Mode: Clean alabaster surfaces, crisp charcoal typography, soft shadows, and high contrast for presentation displays and bright ambient environments.

6. Under the Hood: The Engineering Stack

A beautiful design is only as good as the technology powering it. For UMI Lab, performance, accessibility, and maintenance were paramount.

Key Engineering Highlights

1. Sub-second Edge Performance: By pairing Nuxt's static site generation (SSG) with Cloudflare's global edge network, pages load almost instantaneously worldwide, even on constrained university networks.
2. Git-Backed Content Management: Publications, ongoing grants, team members, and research themes are defined in clean YAML files (content/landing.yml). The lab can update citations and new papers via pull requests without touching frontend code.
3. Bilingual by Architecture: Full support for both Vietnamese and English locales, allowing local students and international collaborators to access information in their preferred language.
4. 100/100 Lighthouse Standards: Semantic HTML, optimized image formats (WebP/AVIF with automated responsive sizing), and accessible ARIA attributes across all interactive dialogs and carousels.

Conclusion: A Digital Flagship for Modern Science

The new UMI Lab landing page demonstrates that academic websites do not have to settle for boring, static templates. By combining thoughtful typography, interactive data visualizations, and modern web engineering, we built a digital presence that honors the lab's scientific rigor while inspiring the next generation of researchers.

Explore the live site and experience the interactions firsthand:

Designed and engineered with pride by No Name Studio. Need a digital flagship for your lab, startup, or product? Get in touch.