PROJECT CASE STUDY

Mettel UI Design System

Client:
MetTel
Year:
2023

Mettel is a company that specializes in providing tailored and fully integrated communication solutions for businesses. They are known for their expertise in managing various communication channels, including voice, data, wireless, and cloud services, all within a proprietary network. Mettel's approach allows enterprise customers to easily deploy and oversee technology-driven solutions across the country, enhancing productivity, reducing costs, and streamlining operations.

What sets Mettel apart is their commitment to customer satisfaction and project management. They offer a comprehensive range of solutions designed to meet  each customer’s unique needs. Moreover, Mettel, maintains and secures all communication requirements, ensuring a hassle-free experience.

To further enhance their offerings, Mettel combines their customized and managed communication solutions with a robust cloud-based software platform called Mettel Portal®. This user-friendly interface empowers customers to efficiently manage their inventory, track usage, monitor expenses, and handle repairs from a single, convenient platform.

Established in 1996 and headquartered in New York City, Mettel has become a trusted leader in the industry, providing smart communication solutions that help businesses thrive.

Objectives

Enhance User Experience: The primary objective of implementing the MUI design system at Mettel is to improve the overall user experience of their applications. By standardizing design patterns, interactions, and visual elements, the design system aims to create intuitive and consistent user interfaces, reducing user confusion and frustration.
Achieve Visual Consistency: The design system seeks to establish a cohesive visual language across Mettel's products. By defining consistent color palettes, typography, and iconography, the objective is to create a unified and recognizable brand identity, enhancing brand perception and user trust.
Streamline Design and Development Processes: The design system aims to optimize Mettel’s design and development workflow. By providing a centralized repository of design assets, guidelines, and documentation, the objective is to streamline collaboration between designers and developers, reducing redundancies and eliminating the need for repetitive design adjustments.

Problem Statement

Mettel faced significant challenges with their existing applications, including numerous UX issues and a need for visual consistency across their products. Additionally, they needed an organized and documented design repository. These issues hampered their ability to deliver high-quality user experiences and impeded the efficiency of their design and development processes.

Solutions

Research and Analysis
Stakeholder Interviews
The devmethink design team interviewed key Mettel stakeholders, including product managers, designers, and developers, to understand their pain points and requirements. They gathered insights on existing design inconsistencies, development bottlenecks, and desired design system functionalities.
Internal apps & products analysis
By conducting an in-depth analysis of the existing internal apps, the devmethink team gained a comprehensive understanding of the design and functionality needs within the organization. This analysis was the foundation for enhancing the design system, enabling the team to rebuild the apps using a consistent visual language, standardized components, and an improved user experience.
Internal apps & products analysis
The devmethink team meticulously evaluated the user experience of each app, identifying pain points and areas for improvement. They analyzed the visual design and branding elements used in the apps, ensuring alignment with the organization's brand identity. By conducting a thorough inventory of existing UI components and styles, devmethink identified reusable elements that could be incorporated into the Mettel design system.
The devmethink team carefully analyzed functional requirements and use cases to identify common functionalities and interactions that could be modularized and made available as reusable components. Collaboration and efficiency in the design and development workflow were streamlined, improving productivity and communication between designers and developers. The team also addressed accessibility and compliance considerations, ensuring that the design system incorporated best practices for accessibility and met industry standards.

Design System Development

Visual Language Definition The design team established the visual language for MUI, including color palettes, typography, iconography, and brand guidelines. The redefined visual language ensured consistent branding across Mettel's digital products.
Component Design and Documentation  Using Figma, the design team designed a comprehensive set of UI components, such as buttons, forms, navigation menus, and cards. Each component was thoroughly documented, including usage guidelines and design variations.

Development and Integration

Frontend Development: The development team leveraged OutSystems, GitHub, JavaScript, and SASS to implement the design system. They translated the Figma designs into reusable code components and styles. The development team also integrated the design system with Mettel's existing codebase, ensuring seamless compatibility.
Version Control and Collaboration: Using GitHub, the team established a version control system to manage the design system's codebase. Utilizing GitHub enabled multiple developers to collaborate simultaneously, track changes and ensure consistency across all implementations.
Documentation and Guidelines: Comprehensive documentation was created for developers, providing clear instructions on how to use the design system components, styles, and guidelines. This documentation facilitated faster adoption and reduced onboarding time for new developers.

Outcomes

Key Results
Increased Efficiency
Streamlined workflows, a consistent design language and enhanced collaboration led to rapid design iteration and updates. The design system enabled teams to work more efficiently, reduced design and development time and facilitated faster implementation of new features and applications. Overall, the MUI design system has proven to be a valuable in increasing efficiency throughout the Mettel design and development lifecycle.
Improved Consistency
Mettel  stakeholders and usersers report a consistent and cohesive user experience, indicating successful standardization of design patterns and elements.
Increased Developer Productivity
The implementation of the design system successfully increased the utilization of reusable components while significantly reducing code duplication. This achievement directly contributed to improved developer productivity, highlighting enhanced efficiency and increased code reusability within the organization.
Cost Savings
It is challenging to provide an exact calculation of cost savings before and after the implementation of the MUI design system at Mettel. Due to the company's fast growth and ongoing projects, our analysis suggests a substantial reduction in overall project costs. We estimate a conservative 40% cost reduction, which can be attributed to several factors.

Firstly, the reduction of design and development rework have significantly decreased with the resulting from the implementation of the MUI design system.The standardized design patterns and components have minimized the need for extensive revisions, resulting in time and cost savings. Secondly, improved collaboration facilitated by the design system has led to fewer communication-related delays. The shared understanding and streamlined workflows have reduced inefficiencies and accelerated project timelines, ultimately reducing costs. Lastly, the optimized use of design and development resources has contributed to cost savings. The design system's centralized repository of assets and guidelines has enabled designers and developers to work more efficiently, eliminating duplicated efforts and maximizing the utilization of available resources.

Conclusion

TImplementing the MUI design system at Mettel has yielded significant benefits for the organization, and devmethink was thrilled to be a trusted partner for this challenging project.
By addressing the UX problems, visual inconsistencies, and lack of design documentation, the design system has provided effective solutions and has also fostered a strong partnership between Mettel and devmethink. The positive outcomes achieved, including increased user satisfaction, streamlined workflows and improved collaboration are a testament to the successful collaboration and dedication of both teams.

We are proud to have been part of this transformative journey. The devmethink team is confident that the MUI design system will continue to drive success and deliver exceptional experiences for Mettel's users.
Contact us

Let’s get started

Embark on your digital transformation journey with devmethink and let us help you create user-focused solutions that put people first, and together, let's innovate, iterate and inspire.
By clicking the submit button, you consent
to the processing of personal data.

Thanks for reaching out!

We'll get in touch as soon as possible.

The single design system

you will ever need.

Coming Soon