Management Design System

TELIO - 2022

TELIO - 2022

TELIO - 2022

Over view

Designed an all-in-one platform replacing Magento's complexity with unified management for: products, promotions, customers, staff, etc…


My goal is design an intuitive management tool that aligns with their unique business needs—without sacrificing brand consistency

my role

Product Designer - Design system builder, User Research, Interaction, Visual design, Prototyping & Testing

timeline

8 months

DeSIGN team

Solo

Highlight

Highlight

Highlight

Built a scalable, unified design system

Context

Context

Context

During Telio App's POC and MVP phases, we adopted Magento for rapid deployment of product/promotion management. This solution later revealed critical limitations in B2B model configuration, steep learning curve, and unsustainable third-party dependencies.

Problem

Problem

Problem

Evaluating Magento's alignment with cross-departmental workflows and future roadmaps revealed critical gaps in synchronization, consistency, and scalability.

Key problem

Flow and interface inconsistently increase the learning curves for employees

Flow and interface inconsistently increase the learning curves for employees

Flow and interface inconsistently increase the learning curves for employees

Handled by third-party solutions, leading to limited customization and control

Handled by third-party solutions, leading to limited customization and control

Handled by third-party solutions, leading to limited customization and control

Parallel development & handover - intense time pressure

Parallel development & handover - intense time pressure

Parallel development & handover - intense time pressure

From Magento to Telio's system

Goal

Goal

Goal

The new system must support current workflows while maintaining future scalability

Key to focus

Consistency

Unified cross-product UX maintaining Telio's brand identity

Consistency

Unified cross-product UX maintaining Telio's brand identity

Consistency

Unified cross-product UX maintaining Telio's brand identity

Scalability

Future-proof architecture supporting business growth

Scalability

Future-proof architecture supporting business growth

Scalability

Future-proof architecture supporting business growth

Parallel development

Feature-development & system-maintenance parallelization

Parallel development

Feature-development & system-maintenance parallelization

Parallel development

Feature-development & system-maintenance parallelization

Consistency

Consistency

Consistency

Building consistency cross platform experiences

Solution

Implemented Design System with 200+ standardized components

Results

90% UI consistency

Colors

Typography

Spacing

Input

Table

Button

Chip

Snackbar

Calendar

Modals

Navigation

Scalability

Scalability

Scalability

Grows with business needs

Solution

Built modular components using Atomic Design

Results

Good adapt the new feature requirements

Atomic Design

Parallel development

Parallel development

Parallel development

Maintenance, innovation

Solution

Streamlined workflow covering feature development, system maintenance, and product handoffs

Results

Consistent 5-10% time reduction in feature launch cycles

New feature development process

impact

impact

impact

What did we achieve?

Key learnings

Cross-Functional Communication

Real-time design alignment between teams reduces costly rework, especially critical for remote collaboration.

Cross-Functional Communication

Real-time design alignment between teams reduces costly rework, especially critical for remote collaboration.

Cross-Functional Communication

Real-time design alignment between teams reduces costly rework, especially critical for remote collaboration.

User Feedback

Reveals multidimensional insights into real-world workflows. This awareness helps me avoid imposing my own mental models.

User Feedback

Reveals multidimensional insights into real-world workflows. This awareness helps me avoid imposing my own mental models.

User Feedback

Reveals multidimensional insights into real-world workflows. This awareness helps me avoid imposing my own mental models.

Early Validation

Test concepts with end-users through rapid prototypes to prevent resource waste.

Early Validation

Test concepts with end-users through rapid prototypes to prevent resource waste.

Early Validation

Test concepts with end-users through rapid prototypes to prevent resource waste.

Let's connect

Get in touch for opportunities or just to say hi!

Let's connect

Get in touch for opportunities or just to say hi!

Let's connect

Get in touch for opportunities or just to say hi!