Streamlining INCYT

Developing a unified and scalable design system to enhance development speed and user experience

Client:
INCYT
Industry:
IoT | Smart Agriculture | Logistics
Role:
Lead Product Designer
Team:
Mearah (UI Designer)
Timeline:
June 2023 - Ongoing

00. Background

Addressing The Design Inconsistencies

INCYT, a rapidly expanding organization in the IoT sector, encountered significant challenges in maintaining a consistent and efficient design process as its product portfolio grew.

The proliferation of disparate design patterns and user interfaces led to a fragmented user experience, where users encountered varying visual styles and interaction patterns across different INCYT platforms, diminishing brand recognition and creating confusion. This inconsistency also resulted in increased development time, as developers spent valuable resources addressing design discrepancies and recreating components, hindering innovation and slowing down product development cycles.

Furthermore, the absence of a unified design system posed scalability challenges, making it difficult to integrate new features and products without extensive custom design work. Recognizing these issues, INCYT identified a crucial opportunity to establish a robust and scalable design foundation. The primary goal was to develop a comprehensive design system that would serve as a single source of truth, empowering design and development teams to enhance brand consistency across all INCYT products, accelerate development through reusable components and clear guidelines, improve user experience with consistent interaction patterns and visual language, and enable scalability for future growth. Ultimately, this project aimed to address these critical needs by fostering a more efficient, consistent, and user-centric approach to product development at INCYT.

01. discovery

Uncovering Inefficiencies & Disparities

The initial discovery phase of the INCYT Design System project was crucial in understanding the existing design landscape and identifying key areas for improvement. Through a combination of stakeholder interviews, developer surveys, and design audits, we uncovered several critical issues that highlighted the need for a unified design system.

A significant finding was the pervasive lack of component consistency across INCYT's digital products. Developers reported that the absence of reusable components forced them to create new elements for each feature, resulting in redundant work and significantly increasing development time. This fragmented approach not only slowed down the development process but also made it challenging to maintain a cohesive user experience.

Furthermore, our analysis revealed a lack of clear design identity and language. The visual style and interaction patterns within the product were inconsistent and did not align with the brand guidelines established by the marketing team aswell as the information architecture the stakeholders had initially signed off on. This disconnect created a disjointed experience for users and diluted INCYT's brand recognition.

In essence, the discovery phase highlighted a clear need to bridge the gap between design, development, and marketing. We aimed to create a design system that would not only streamline workflows and improve efficiency but also establish a unified visual language that accurately reflected INCYT's brand identity and provided a seamless and coherent user experience.

Key Elements Highlighted:

  • Methodology: Mentioned the methods used (interviews, surveys, audits) to establish credibility.
  • Component Inconsistency: Emphasized the developer pain points and the impact on development time.
  • Lack of Identity: Highlighted the disconnect between product design and marketing branding.
  • User Impact: Implied the negative impact on user experience due to inconsistency.
  • Goal Alignment: Clearly stated the project's aim to bridge gaps and create a unified experience.

02. definition

Pinpointing the Core Inconsistency and Charting a Unified Path

Building upon the insights gathered during the discovery phase, the Define stage became a crucial exercise in distilling the complex web of issues into actionable problem statements. We meticulously reviewed the developer feedback, design audit findings, and stakeholder interviews, recognizing that while the symptoms were varied, a singular root cause was emerging: Systemic Component Inconsistency.

This wasn't merely a matter of visual discrepancies; it was a fundamental flaw in the product's architecture. Developers were burdened with recreating elements, leading to significant time wastage and hindering their ability to innovate. Users, in turn, were navigating a fragmented experience, where each interaction felt disconnected from the overall brand narrative.

We considered the lack of brand alignment and the disjointed user experience as critical issues. However, we realized that addressing these problems in isolation would be akin to treating the symptoms without curing the disease. The core issue—the lack of a unified component library—was the linchpin, the domino that, once toppled, would trigger a cascade of positive change.

Therefore, we prioritized the development of a comprehensive and reusable component library as the primary objective of the INCYT Design System. This decision was driven by the understanding that:

  • Efficiency Gains: A well-defined component library would significantly reduce development time and allow for faster iteration.
  • Consistency Foundation: Establishing a single source of truth for UI elements would create a foundation for a unified visual language and user experience.
  • Brand Cohesion: Consistent components would ensure that the product's visual identity aligned with the marketing team's brand guidelines.

By focusing on this foundational issue, we aimed to create a ripple effect, addressing not only the immediate development challenges but also laying the groundwork for a cohesive and scalable design system that would empower INCYT's growth and enhance its brand presence.

03. development

Building Bridges, Hues of Accessibility, and Streamlined Flows

With our core problem defined – the need for a unified component library – development became a symphony of collaboration and meticulous execution. We understood that this wasn't just about creating a design system; it was about building a shared language, a tool that developers would embrace and rely on.

Communication became our cornerstone. Regular workshops and open forums fostered a dialogue between designers and developers, ensuring that the components we were building were not only visually consistent but also technically sound and easily integrated into the codebase.

The component library wasn't built in isolation. It was a collaborative effort, a testament to the power of shared ownership. We established clear naming conventions, version control, and comprehensive documentation, ensuring that every element was easily accessible and understood. Developers actively contributed to the process, providing invaluable insights into the technical feasibility and usability of each component. This iterative approach allowed us to refine and optimize the library, ensuring its seamless integration into INCYT's existing infrastructure.

Beyond functionality, accessibility was paramount. We recognized that a truly inclusive platform required a design system that catered to diverse user needs. The color palette, a critical element of the visual language, was meticulously crafted with accessibility in mind. We adhered to the WCAG guidelines, ensuring that every color combination, in both light and dark themes, met the required contrast ratios. This commitment to accessibility wasn't just a checkbox; it was a fundamental principle that guided our design decisions.

As we began to implement the component library and revamp the UI, we encountered opportunities to refine existing user flows. What initially seemed like a purely visual overhaul became a catalyst for improving the overall user experience. We identified several flows that were convoluted or ambiguous, leading to user frustration. By leveraging the consistency of the new components and applying clear design principles, we were able to streamline these flows, making actions more intuitive and providing a more coherent and predictable experience.

For example, the "Login & Sign Up" process, which was previously fragmented, confusing and caused a lot of unwanted actions was transformed into a clear, step-by-step journey. Buttons, forms, and feedback mechanisms were standardized, providing users with clear visual cues and reducing cognitive load. This resulted in a significant improvement in completion rates and user satisfaction while also avoiding some unwanted actions from our new users.

04. delivery

A Foundation for Efficiency, Consistency, and Continuous Improvement

Delivery marked the culmination of our collaborative efforts, transitioning the INCYT Design System from a conceptual framework into a tangible reality. More than a mere aesthetic upgrade, this project was driven by a fundamental shift towards form and function, prioritizing efficiency and user-centricity. The impact was felt across INCYT, streamlining workflows and enhancing the overall user experience.

The implementation of the unified component library dramatically reduced development time. Developers, armed with a consistent and well-documented set of reusable elements, were able to build new features and iterate on existing ones with unprecedented speed. The need for extensive wireframing was significantly diminished, as the established library provided a robust foundation for rapid prototyping and development. This efficiency translated into faster time-to-market for new features and updates, allowing INCYT to respond more quickly to evolving user needs and market demands.

The impact extended beyond development efficiency. The consistent application of the design system across all platforms resulted in a unified and cohesive user experience, strengthening INCYT's brand identity. Changes and updates were cascaded seamlessly, reflecting in the codebase and reaching users faster than ever before. This agility ensured that the user experience remained consistent and up-to-date, fostering trust and loyalty.

With that said though, this is not the end of the journey; it was the beginning of a continuous evolution. The INCYT Design System is a living entity, adapting and growing alongside the company. As new features are conceived and developed, the established guidelines and component library serve as a guiding framework, ensuring consistency and efficiency. New components, when necessary, are meticulously designed to adhere to these established principles.

Furthermore, design iterations continue to play a crucial role in refining the user experience. As user feedback is gathered and new challenges are identified, the design team leverages the flexibility of the design system to implement targeted improvements. This iterative approach ensures that the INCYT platform remains responsive to user needs and continues to evolve, delivering a seamless and impactful experience.

The INCYT Design System has become more than just a set of guidelines; it's a testament to the power of collaboration, consistency, and continuous improvement. It's a foundation upon which INCYT can build its future, ensuring that every user interaction is efficient, intuitive, and reflective of the brand's commitment to excellence.

05. takeaways

As the Lead Product Designer for the INCYT Design System project, I'm immensely proud of the transformative impact we've achieved. This endeavor transcended a simple UI refresh; it was about building a sustainable, user-centric design ecosystem. The project's success can be distilled into the following key takeaways and personal reflections:

Accelerated Development & Iteration
  • The implementation of a unified component library demonstrably sped up development cycles. This resulted in quicker feature rollouts and a more agile approach to iterating on user feedback. It underscored the importance of standardized design elements in streamlining development.

Enhanced User Experience & Brand Cohesion
  • Consistent design across platforms significantly improved the overall user experience. This also solidified INCYT's brand identity, creating a more cohesive and recognizable digital presence. It highlighted the power of a unified visual language.

Collaborative Design & Development
  • The project required close collaboration between designers and developers. This fostered a shared understanding and ownership of the design system. It was a valuable lesson in the importance of cross-functional teamwork.

Accessibility at the Core
  • Prioritizing WCAG compliance was crucial for ensuring inclusivity. This effort broadened user access and reflected INCYT's commitment to responsible design. It reinforced the necessity of embedding accessibility from the outset.

Streamlined Prototyping & Development
  • Standardized components reduced the need for extensive wireframing, streamlining prototyping and development. This efficiency allowed for greater focus on strategic design and user-centered solutions. It showed the value of reusable design elements.

Continuous Improvement & User Focus
  • An iterative design approach was essential for the project's success. This allowed us to adapt to user feedback and continuously improve the design system. It reinforced the importance of a user-centric design philosophy.

Scalable Design Foundation
  • The design system provided a solid foundation for future growth and feature expansion. This ensures long-term consistency and scalability for INCYT's digital products. It was a worthwhile investment for future development.

Clear Design Guidelines
  • Documented guidelines ensured a unified understanding of the design system among all stakeholders. This clarity facilitated consistent implementation and minimized design discrepancies. It was a crucial step in ensuring the design systems integrity.

This project was more than just a professional milestone; it was a personal journey of growth and discovery. As the Lead Product Designer, I'm deeply gratified by the tangible impact we've made on INCYT's digital landscape. The INCYT Design System represents a commitment to user-centricity, collaboration, and continuous improvement—principles that will continue to guide our design philosophy moving forward.