ECT
ABOUT
European Computer & Telecommunications is a telco company that builds and manages network infrastructure for several clients across Europe. They offer digital products designed for telecom agents to support end-users, alongside a low-code platform to shape digital products for their own users' needs.
CHALLENGE
The goal was to build a multi-theme design system for our low-code platform, designed to be used by both our internal team and external low-code developers.
We faced two main technical challenges: ensuring strict compliance with Angular Material and React Native, and creating a flexible token structure that allows other companies to easily adapt the components to their own brand styles, avoiding in-line CSS that restricts the collaboration and scalability in our low-code tool.
The new component library also needed to enhance our products visually and to clearly specify how and when to use every component, since the design team was not paired across all deliverables.
As the design focal point for this initiative, I was responsible for designing the components, defining their usage rules, aligning with developers on new features, and validating the final front-end deliveries.
DELIVERABLES
PROCESS
I established a 5-step process to ensure quality and consistency for every new component:
The process can be viewed in depth in further meetings.
Define a clear purpose for each component.
Clearly explain when and when not to use a specific component by comparing different use cases. Add guidance that encourages the behaviors designers and low-code developers should promote in the user experience.
Compare Similar Components
Create comparison tables for components with similar behaviors to help low-code developers clearly understand their differences. The goal is to educate users on how to choose the most appropriate component for each scenario.
Best Practices
Provide clear do's and don'ts with real-life examples that demonstrate the correct usage of components within a user interface.
Mobile Behavior
Establish how components adapt and behave across mobile breakpoints, ensuring consistency and usability on smaller screens.
Messaging
Help designers and developers communicate intent more clearly through visual guidance and UX writing best practices.
Layout and Actions
Define a clear content hierarchy while ensuring users can easily perform their main CRUD actions. I was responsible for establishing global patterns that help designers create consistent and platform-agnostic experiences across different products and use cases.
Templates
Define rhythm, system logic, and common user journey patterns through documented and ready-to-use templates.
This also helps raise the company's standards for core user flows, ensuring a seamless experience from the very beginning of the application, including onboarding and login journeys.
Additionally, define when, how, and which messages should be displayed during credential validation to ensure a secure and reliable login experience.
RESULTS
At the end of the process we could ship 80+ cross-platform components (web and mobile) and 10+ screen templates with documented best practices.
The elevated visual design attracted new investments and directly helped secure 3 new deals. Company leadership now actively uses the design system documentation in client proposals.
We deployed a new token structure that successfully powers dynamic theming on the low-code platform, resulting in a noticeable reduction of inline CSS.
We also noticed better developer engagement, sparking proactive discussions on features like dark theming and driving closer collaboration across the product team.
AI TOOLING
We are currently establishing several work-in-progress AI initiatives aimed at bridging the gap between design and development.
Our experiments were around how we could enhance our internal design processes by building custom, in-house plugins to streamline our workflow.
You can check out these initiatives in the link below:
VIEW AI INITIATIVESECT
European Computer & Telecommunications is a telco company that builds and manages network infrastructure for several clients across Europe. They offer digital products designed for telecom agents to support end-users, alongside a low-code platform to shape digital products for their own users' needs.