Challenge
Dense product information
Display complex product specifications, certifications, downloads, and related resources without overwhelming users.
UI/UX Design • Design System • Frontend Development
ELGENS Website Redesign
Redesigned ELGENS' website by improving information architecture, building a scalable design system, and implementing a responsive frontend.
Redesigned ELGENS' website by improving information architecture, building a scalable design system, and fully implementing a responsive frontend. The project focused on the Product, Exhibition, and Partner pages to create a clearer user experience while preserving the brand's industrial identity.
Challenge
Challenge
Technical trust
Build trust through clear presentation of certifications, compliance, and rugged product capabilities.
Challenge
Multi-page consistency
Create a consistent visual system across Product, Exhibition, and Partner pages while supporting different content needs.
Design System
The visual direction used ELGENS' orange brand color, dark tactical imagery, large product visuals, and structured technical modules to make the site feel more premium, focused, and mission-critical.
Product Page Redesign
- Redesigned the product area with a clearer visual hierarchy, structured content tabs, large download cards, and a focused certification modal.
- Improved information hierarchy by grouping specifications into clear sections, reducing visual clutter and making comparison easier. Users can scan product details, switch directly between specifications and resources, and download the correct files without leaving the product page.
Before
Version 1
Final version
Exhibition Page
- Redesigned the page with year navigation, structured event cards, and an image lightbox.
- Reorganized content using a modular card layout to improve scanability across large numbers of events. Users can jump directly to a selected year and enlarge photos on demand, reducing the excessive scrolling caused by displaying every event and image at once.
Before
Version 1
Final version
Partner Page
- Redesigned the page with an interactive world map, regional partner logos, and structured information cards.
- Introduced map-first navigation so users could locate distributors more efficiently. Users can quickly understand where partners are located worldwide and click a logo to jump directly to that partner's detailed information below.
Before
Final version
Outcome
Clear information hierarchy
Grouped technical content into tabs and visual modules, making specifications, certifications, and downloads easier to find and compare.
Highlighted certifications and product quality
Made certifications, compliance information, and rugged product capabilities more visible to strengthen technical trust.
Established a scalable design system
Created reusable colors, typography, spacing, cards, and content patterns that support different page types and future updates.
If I had more time,
I would validate the design through usability testing
and iterate based on real user feedback.