Getting structure into an unstructured industry is a tricky problem, setting the design approach and a UX system is trickier.
Small material brands operate with unstructured product data, inconsistent pricing, and limited inventory visibility. Product information is scattered across spreadsheets, stock is tracked manually, and conversations with architects, dealers, and clients happen across informal channels with little traceability.
To build Lens from ground-up, we needed to approach building design systems and workflows which brought out the sweet spot between existing workflows and the systematic ones.
#1 Designing for an unstructured and resistant industry
Building Lens meant designing for an industry that isn’t lacking tools, but lacks structure. Most material brands rely on informal workflows like WhatsApp, spreadsheets, and fragmented tools. And existing competitors and software like Six Orbit and Tally attempt to solve across industries, resulting in complexity and redundancy.
Product flows, research, and system design were built around the inconsistent, real-world workflows.
There were no benchmarks to follow
Existing tools prioritised breadth over usability
Product workflows needed to be adapted and not replaced
Adapting to the newer workflows meant rethinking how execution worked. We opted for a smart experiment!
#2 Moving to an AI-first system to reduce design–development gaps
A traditional workflow of designing in Figma and translating it into development would have introduced delays and friction, especially at the speed we were aiming for.
We moved toward an AI-first approach where the design system was built with implementation in mind from the start. Instead of static design outputs, components were developed as part of an HTML-based system using Claude, as a result of manual design exploration with AI-assisted generation.
Enabled faster iteration across design and development
Built components as implementation-ready outputs through HTML based design system
Our iterations exhibited huge scaling possibilities of Lens, we wanted to make space for it from ground-up!
#3 Designing for scale from the start
Early-stage products often prioritise immediate needs, but Lens was built with the expectation that multiple product layers and workflows would emerge over time.
The system was designed in detail from the start to avoid rebuilding later and to support expansion into new features and products under the same umbrella.
Built component variants across use cases
Defined states and edge conditions early
Flexible flows for different workflows
Established reusable interaction patterns
This created a foundation that could scale with the complexity of the industry instead of facing it in later stages.
#4 Weaving the brand's visual language with the design system
Design system is essentially an extension of the brand into products and once the design system falls into place, it gives back to the visual narrative of the brand.
With this in mind, we weaved the design language into various by-products and graphics that complimented our system and the UI language.
We applied the system across various contexts,
Designed the flagship product, Lens.
Built an event collateral called Dais, designed and managed in-house for our curated architecture and design events.
Designed social media and campaigns.
Built an internal dashboard for team and task management.
With these decisions put together, we standardised the system without over-constraining user behaviour.This helped the product adapt to real workflows instead of forcing new ones.
Final Resolution
Lens evolved into a structured, AI-first operating system that brings together fragmented workflows into a unified system.
This brought structure to product data, workflows, and communication that were previously all over the place.
The system supports both current use cases and future expansion, allowing continuous iteration without breaking the overall structure.
The Impact
Impact was measured through implementation within internal workflows and product outputs,
Reduced friction between design and development through execution-ready components.
Enabled faster iteration cycles with an AI-assisted workflow.
Established a scalable system for future product expansion.
Enabled faster internal and external testing cycles.