Esolutions
www.esolutions.vn
Overview
A corporate showcase and dynamic digital platform built for E-Solutions, a provider of smart building engineering, architectural lighting, HVAC management, and facility automation in Vietnam. Built with an intuitive administrative CMS enabling non-technical teams to dynamically feature primary solutions, showcase landmark project portfolios (e.g., Hue Plaza, Central Tower), and manage global partner brands without writing code.
Technologies & Concepts
Project Analysis
🔴 Problem
Content inertia in corporate landing pages: E-Solutions provides smart building infrastructure, intelligent architectural facade lighting, HVAC automation, and high-resolution commercial LED displays. As the business regularly completed high-profile installations (such as Hue Plaza and Central Tower) and established new partnerships with global technology brands (such as Philips and Apex LED), keeping the digital storefront current became a constant pain point.
Engineering bottlenecks for routine marketing: The existing landing page had hardcoded content. Every time the marketing team wanted to feature a new flagship project, update a partner logo, or reorder solutions, they had to submit requests to engineers, wait for code edits, test, and trigger full production redeployments.
Lack of responsive design and visual hierarchy: The legacy website failed to present technical building solutions in an organized, visually compelling way on mobile and tablet devices, hurting credibility with commercial developers and architects browsing on smartphones.
⚪ Baseline
Initial state:
- Static, hardcoded frontend requiring manual developer commits for every content tweak.
- Multi-day turnaround times for simple marketing updates (adding new case study photos, highlighting a new partner).
- Inconsistent mobile layout with unoptimized high-resolution images that caused slow load times.
- No centralized database or management interface for categorizing projects by building sector (commercial, residential, industrial).
🔵 Change
Decoupled Architecture with Next.js & React: I built a modern, responsive web application for E-Solutions focused on clean visual hierarchy, fast rendering, and smooth interactions across devices.
Intuitive Admin CMS for Non-Technical Staff: I engineered an administrative control panel so non-technical team members can manage site content independently:
- Dynamic Primary Solutions Management: Staff can toggle visibility, prioritize ordering, and update technical copy for core solution pillars (Smart Lighting, Building Management Systems, Commercial HVAC, Audio-Visual & LED).
- Landmark Projects Showcase: A structured manager to upload high-resolution installation photography, project metadata (client, year, location), and link them directly to architectural landmarks like Hue Plaza and Central Tower.
- Partner Brand Ecosystem: An admin controller to easily add or update verified hardware and vendor partners (Philips, Apex LED, and other international automation suppliers).
- Responsive UI & Image Optimization: Implemented Next.js image optimization and responsive grid layouts, ensuring fast loading even with high-resolution architectural photography.
🟣 Measurement
Evaluation context: Measured across production site performance, mobile viewport audits, and editorial workflow efficiency.
Key areas evaluated:
- Content update turnaround: Time required to publish a newly completed project dropped from 2–3 business days down to under 5 minutes via self-service CMS entry.
- Performance & image delivery: Verified responsive picture srcset handling and Next.js image caching to keep load times crisp across mobile cellular connections.
- Cross-device consistency: Validated UI breakpoints from 375px mobile screens up to 4K desktop displays.
🟢 Result
Empowered marketing & sales teams: Non-technical team members now manage featured products, new project galleries, and partner logos independently without engineering tickets.
Professional digital showcase: Landmark architectural installations like Hue Plaza and Central Tower are presented with high-definition photography and clear technical scopes, enhancing trust with prospective B2B clients.
Fast & accessible: The responsive design ensures seamless browsing for building contractors, architects, and corporate executives on both mobile and desktop.
Platform Interface & Showcase
E-Solutions Technological Solutions Homepage & Project Showcase
The E-Solutions landing interface featuring primary technological solution pillars (Smart Building Automation, Architectural Lighting, Energy Management), dynamic partner brand integrations (Philips, Apex LED), and featured landmark projects including Hue Plaza and Central Tower.
🟡 Lesson
Constrained CMS schemas beat unstructured WYSIWYG: In my earlier attempts at content management, I gave users open-ended rich text fields, which often resulted in misaligned margins or broken typography. By enforcing strict schemas (title, client name, year, categorized tags, aspect-ratio-locked image URLs), the layout remains pristine regardless of who publishes the content.
In B2B infrastructure, visual proof comes first: Commercial developers and enterprise clients want to see tangible evidence that solutions have been tested in real buildings. Featuring landmark project photography prominently on the landing page created much more engagement than paragraphs of technical jargon.
Developer time is best spent on architecture, not copy edits: Investing the initial effort to build an intuitive content admin saved dozens of hours of back-and-forth communication for simple image swaps or wording adjustments.