top of page

NEXEN Design System

Problem Statement:

In a large enterprise, consistency and efficiency in design are often compromised due to the absence of a unified design system. This leads to several critical issues:

​

  1. Inconsistency Across Products and Platforms:

    • Different teams and departments create their own design solutions, resulting in a fragmented user experience.

    • Users encounter varying design elements, patterns, and interactions across the company's digital products, leading to confusion and frustration.

  2. Inefficiency in Development Processes:

    • Designers and developers spend significant time recreating components, leading to duplicated efforts and wasted resources.

    • The lack of standardized design elements slows down the development process and increases time-to-market for new features and products.

  3. Scalability Challenges:

    • As the enterprise grows, managing and maintaining design consistency becomes increasingly complex without a centralized system.

    • Integrating new features or products into the existing ecosystem is challenging without a cohesive design framework.

  4. Collaboration Barriers:

    • Cross-functional teams struggle to collaborate effectively due to the absence of a common design language and guidelines.

    • Misalignment between design and development teams leads to miscommunication, rework, and suboptimal outcomes.

  5. Brand Identity Dilution:

    • The enterprise's brand identity weakens as inconsistent design practices dilute the visual and experiential coherence of its products.

    • A lack of adherence to brand guidelines across digital platforms diminishes the overall brand perception and customer trust.

Need for a Design System:

To address these problems, a design system is essential for a large enterprise. A design system is a comprehensive collection of reusable components, guidelines, and standards that ensures a cohesive and efficient design and development process. Here’s why it's crucial:

​

  1. Consistency and Coherence:

    • A design system establishes a unified visual language and interaction patterns, ensuring a consistent user experience across all digital touchpoints.

    • It provides a single source of truth for design elements, reducing discrepancies and enhancing usability.

  2. Efficiency and Speed:

    • Reusable components and predefined guidelines streamline the design and development processes, significantly reducing time and effort.

    • Teams can leverage existing design assets, accelerating the creation and deployment of new features and products.

  3. Scalability and Maintenance:

    • A design system scales with the enterprise, accommodating growth and ensuring seamless integration of new products and features.

    • It simplifies maintenance by providing a structured framework for updates and enhancements.

  4. Improved Collaboration:

    • A shared design language fosters better collaboration between designers, developers, and other stakeholders.

    • Clear guidelines and standards minimize miscommunication and align efforts towards common goals.

  5. Enhanced Brand Identity:

    • A design system enforces brand guidelines, ensuring a strong and consistent brand identity across all digital platforms.

    • It enhances customer trust and brand loyalty by delivering a coherent and professional user experience.

2023-01-16_23-05-36_edited_edited.jpg

Tools

Zeroheight is a collaborative design documentation platform that allowed us to create and manage NEXEN design system with ease, providing a centralized hub for sharing guidelines and assets. It integrates seamlessly with FIGMA & Storybook and ensures that the design system is always up-to-date and accessible to all stakeholders.

​

Storybook is an open-source tool for developing UI components in isolation, enabling developers to build, test, and showcase components independently. It enhances the development workflow by allowing for interactive testing and documentation of components, ensuring consistency and reusability across projects.

​

Figma is a powerful cloud-based design tool that facilitates real-time collaboration and prototyping, allowing NEXEN design teams to work together seamlessly. It supports the creation of design systems with robust component libraries, making it easy to maintain consistency and streamline the design-to-development handoff.

Adoption & Governance

  1. Fostered a sense of community among design system users by organizing regular meetups, forums, and collaborative sessions to share knowledge and best practices.

  2. Offered dedicated support through Microsoft Team channels to assist teams with any questions or issues related to the design system.

  3. Organized workshops and training sessions to educate teams on the design system’s components, guidelines, and best practices. Tailored the training to different roles for developers, business analysts and product managers.

  4. Identified representatives within each LOB teams to champion the design system. These champions provided support, answered questions, and encouraged adoption within their LOB's

  5. To harness the collective expertise of LOB developers and ensure the design system evolves with real-world requirements, an open source model was adopted. This model encouraged LOB developers to contribute back to the design system, fostering a culture of collaboration, innovation, and continuous improvement.

​

​​

bottom of page