As part of a global rebranding of Media-Graph and its specialized brands, the TLS website required a significant user experience overhaul. The brand had evolved into a forward-thinking player in architectural LED lighting solutions, but its digital presence did not reflect this transformation.
As part of a global rebranding of Media-Graph and its specialized brands, the TLS website required a significant user experience overhaul. The brand had evolved into a forward-thinking player in architectural LED lighting solutions, but its digital presence did not reflect this transformation.
Due to tight resources and limited developer support, the redesign was executed
by a single person (myself), using only the existing codebase and template.
This work is still a work in progress and change will continue to be made
over time.
Objectives
1. Template Lock-In: The existing HTML/CSS structure had to be retained, no new framework, no CMS upgrade.
2. Limited Visual Assets: Product photography and renders were sparse, making storytelling through visuals difficult.
3. No Developer Resources: All updates had to be made through raw HTML/CSS by a single designer.
4. Solo Execution: Design, UX strategy, content writing, and implementation were handled by one person.
CSS Cleanup: Updated font systems, spacing, hover states, and iconography while retaining original markup.
Modular Reuse: Repurposed collection layout blocks across different pages for design consistency and reduced workload.
Optimized for Scalability: Built visual styles and information layouts that could be expanded as more content (photos, 3D models) becomes available.
A wireframe-based planning phase helped restructure the homepage layout.
Collections and Lighting Engines were surfaced early, supported by ambient lifestyle imagery.
It is important to first improve the imagery
to showcase the
products:
The hero video for the header is now showcasing the products in context.
The thumbnails have been improved to be more consistent and visually
appealing.
Call to action have been added to direct the user to more detailed information.
A wireframe-based planning phase helped restructure the homepage layout.
Simplified UI blocks for each shape (Carra, Circa, Linea).
Refined descriptions to emphasize product benefits and use cases (e.g., wellness, hospitality).
Ensured consistent card design and layout across breakpoints.
Highlighted dimensions, mounting types, and compatible engines for each product.
Adding a download section for spec documents and information related to the product.
Prioritized functional clarity over visual embellishment.
The gallery addition showcasing the product in situation, provide a better product identification and provides a space to breath in and information centric page.
Created a cohesive narrative around TLS’s innovation and manufacturing strengths.
Integrated an explainer video and structured “What We Offer” into bullet-point clarity.
Showcased testimonials and brand mission for trust-building.
Despite the project limitations, the redesigned TLS website achieved measurable and qualitative improvements across key UX and brand alignment goals:
Analytics insights confirmed the effectiveness of these changes. This case illustrates how strong UX/UI decisions can deliver real value even within severe constraints. With no extra resources, minimal assets, and an aging codebase, TLS now has a modern, scalable, and user-friendly website aligned with its rebranding strategy.
Notably, the engagement rate from Organic Search reached 64.44% and Email traffic maintained over 50% engagement, showing that visitors arriving from SEO and targeted campaigns were more likely to explore deeply.
According to Google Analytics (Apr 16 – Jul 14, 2025), the redesigned TLS website recorded 26,000 total views and 75,000 tracked events, with an average engagement time of 1 minute and 18 seconds per user. Pages like the Carra product detail and LumiCloud™ Bespoke saw the highest traffic, reflecting interest in clearly structured product collections. These analytics confirm that the redesigned layout, especially the navigation improvements, effectively supported user needs and retained attention across sessions.
