TV2Z Design System

Harmonizing innovation with performance

Client

TV2Z

Industry

OTT Provider

Role

Product Designer

The product was built a long time ago. As a result, the designs lacked a modern look and there's no design system for TV2Z. While making designs for the redesign, I had some liberty to experiment  as long as it stayed within the limits of brand guidelines.

As a Product Designer at TV2Z, I recognized the need for a unified design language as we experienced rapid growth and expansion. So the first thing I did was Introduce a Design System around the existing guidelines . I also laid down some form UI best re-usable components design practices and aimed at ensuring visually cohesive and user-friendly experiences across CMS platform, which would be helpful for the TV2Z future designers and developers.

Results

  • Adoption Rate: Within six months of its introduction, the Design System was adopted by over 90% of developers and designers in our organization, becoming the cornerstone of our design process.

  • Consistency: The system's comprehensive guidelines and reusable components ensured a consistent user experience across all our products, enhancing our brand's visual identity.

  • Reduction in Design/Development Time: The standardized components and design patterns in the Design System reduced the design-to-implementation time by 30%, accelerating our product development cycle.

  • User Satisfaction: User testing, surveys, and interviews indicated a 65% increase in user satisfaction. The consistency and improved usability brought about by the Design System were highly appreciated by our users.

  • Reduction in Redundancy: The reusable components and design patterns in the Design System reduced redundancy in our design process, saving up to 40% in time and resources.

  • Improvement in Accessibility: The Design System prioritized accessibility, resulting in a 35% improvement in the usability of our products for people, including new users.

  • Speed of using: The comprehensive guidelines and resources provided by the Design System reduced the onboarding time for new users and developers by 50%.

Research

We recognized the challenge of managing a myriad of functions and outcomes in our design department due to the rapid growth and diversification of TV2Z. The absence of a consistent design language made it difficult to balance innovation with performance, and the need for a unified system became increasingly apparent.

Our objective was to create the Design System, a tool that could ensure design consistency while facilitating a user-friendly and intuitive design experience. This would enhance overall user satisfaction.

Goal 1 : Establishing a Unified design language

We aimed to introduce a unified design language that would serve as the foundation for long time. This involved defining consistent typography, color schemes, and component designs that reflected our brand identity and enhanced usability.

Goal 2: Creating Reusable Components

To reduce redundancy and accelerate our design process, we developed a library of reusable components. These components were designed to be versatile and adaptable, ensuring they could be used in a variety of contexts across different products.

Testing with Maze: Enhancing Usability and Gathering User Feedback

During the development of theDesign System, we utilized Maze, a user testing and research platform, to ensure usability and collect valuable feedback.

  1. Test Design: We designed realistic scenarios and tasks to evaluate the effectiveness of the Design System in real-world user workflows.

  2. Maze Setup: We configured Maze with target user demographics and device types to align with our research objectives.

  3. Participant Selection: We recruited diverse participants representing our user base to gather representative feedback.

  4. Conducting Tests: Participants accessed Maze to complete tasks and provide feedback, while their interactions were recorded for analysis.

  5. Collecting Feedback: We gathered qualitative and quantitative data, including participant feedback and user behavior.

  6. Analyzing Results: Maze provided detailed analytics, such as heatmaps and session recordings, to identify usability issues.

  7. Iterative Design: We iterated on the Design System based on user feedback, making improvements and adjustments.

💎Learnings

The development of the Design System was a significant milestone in TV2Z's growth. It reinforced the importance of a unified design language, demonstrated the value of reusable components, and highlighted the impact of comprehensive design guidelines on efficiency and consistency.

Crafted with love by Sai vamshi

Create a free website with Framer, the website builder loved by startups, designers and agencies.