See Details

Luminate Design System

JDA (now rebranded to Blue Yonder) is a leading American software and consultancy company providing comprehensive supply chain management, manufacturing planning, retail planning, store operations, and category management offerings. Its vast portfolio, built through strategic acquisitions including Yantriks, Blue Yonder, RedPrairie, i2 Technologies, Manugistics, E3, Intactix, and Arthur, serves over 3,000 corporate customers globally. My engagement with JDA coincided with a pivotal period of expansion and integration, focusing on a critical initiative to bring visual consistency and a unified experience across its diverse software ecosystem.

Client:
Blue Yonder (ex. JDA)
Year:
2015-2018
Role:
Visual Design Practice Lead
Timeline:
3.8 Years
Tools:

Adobe Illustrator
Adobe Photoshop
Axure
Miro

My Role

I joined JDA during a significant transition as the sole Visual Design Practice Lead. Following numerous acquisitions, the company faced a substantial challenge: its portfolio of over 100 applications suffered from widespread usability, brand, and visual inconsistencies. My core responsibility was to champion and infuse the importance of visual consistency across JDA's entire product suite. I was specifically tasked with spearheading the creation of a new visual style and a comprehensive design system for the Next-Generation SaaS and Digital Edge Solutions, collectively branded as Luminate, which spanned both desktop and mobile applications.

Parallel to this, there was a clear need to refresh the existing design system for many older, legacy applications. These wouldn't undergo a full redesign but required a cohesive "facelift" to align with the new corporate aesthetic. My ambition was to build a design system that would be easily integrated by development teams, many of whom utilized Google's technologies, thus leveraging Material Design as a foundational template. I aimed for a clean, mature aesthetic while meticulously crafting a unique visual identity for JDA. A significant aspect of this involved pioneering a "soft-branding" approach for different applications within the Luminate solutions – a concept enthusiastically embraced by JDA's marketing team. Throughout this intricate process, I placed immense effort on ensuring both flexibility and uncompromising accessibility standards.

As the sole visual designer for this colossal undertaking, I led the Luminate Design System initiative, collaborating closely with a distributed team of 12 UX Designers across the US, India, and Canada. Apart from the Luminate logo, all visual elements within the system were entirely my design.

Challenge and Goals

The scale of JDA's product portfolio post-acquisitions presented immediate and complex challenges:

  • Pervasive Inconsistency: Over 100 applications, each with its own legacy, resulted in significant UX, visual, and branding inconsistencies.
  • Dual Design System Mandate: While the primary focus was on the new Luminate SaaS solutions, there was also a critical need to uplift legacy applications to match the evolving brand aesthetic, leading to the development and maintenance of two distinct design systems concurrently. This meant supporting both initiatives as the sole visual designer.
  • Accessibility Deficiencies: The existing design system for older applications was not compliant with WCAG standards for text or colors, posing a significant accessibility gap.
  • Resource Scarcity: Operating as a single visual designer supporting a vast organization (with 500+ developers and 12 UX designers) demanded highly efficient processes and strategic leverage of existing frameworks.

Our overarching goals were clear:

  • Unify the User Experience: Establish visual consistency and a cohesive brand presence across all JDA applications, new and old.
  • Drive Scalable Design: Create a robust design system that could be easily adopted, maintained, and evolve with future product development.
  • Enhance Accessibility: Ensure all new and updated visual elements met WCAG accessibility standards.
  • Empower Teams: Provide clear guidelines and accessible tools for designers and developers, fostering collaboration and reducing design debt.
  • Introduce Strategic Flexibility: Implement a "soft-branding" approach to allow for application-specific identities within the overarching JDA brand, a critical aspect for customer adoption and internal brand alignment.

Discovery and Research

My discovery phase began with a thorough review of the existing (old) design system. Working in close collaboration with the UX team, I led the assessment of potential improvements, particularly focusing on the critical need for WCAG compliance.

I initiated a structured stakeholder engagement process, collaborating with UX designers to review existing wireframes. These wireframes became crucial archetypes from which core components could be designed. To build a robust content strategy, I partnered with a UX designer to conduct a comprehensive component breakdown, providing a clear overview of the common components frequently utilized by the UX team across applications. This collaborative effort was instrumental in identifying patterns and informing the initial visual style guide.

I then established a formal process for the development of the new SaaS design system, defining clear contribution guidelines and review cycles. This process was critical for ensuring cross-functional alignment and was subsequently approved by the UX Director, Project Managers, and the VP of Engineering and Product, solidifying buy-in from key leadership.

No items found.

Design Approach

My design approach was inherently iterative and deeply collaborative, aiming to build a system that was both visionary and practical.

Leveraging Existing Frameworks: Given our lean resources, I made the strategic decision to adopt Google Material Design as a base template. This allowed us to accelerate development, focusing our efforts on custom visual identity while benefiting from a robust, well-documented foundation that resonated with many of our developers.

Dual System Evolution: As I developed the core visual language for the new Luminate SaaS solutions, I simultaneously evolved the old design system. This involved a phased rollout starting with an updated color palette, a new font, and refreshed common components to provide an immediate uplift to legacy applications. All new changes were rigorously reviewed for accessibility.

A unique challenge with legacy products was their varied structures and underlying frameworks, limiting consistent implementation possibilities. This meant I often had to approach visual updates directly application by application, meticulously tailoring color palettes, iconography, and component styles to achieve the best possible outcome. While very time-consuming, this granular approach was crucial. Many customers used these legacy solutions side-by-side with our new SaaS products, and leadership was keen to avoid a disconnected user experience. My direct, app-specific involvement ensured these older applications felt cohesive with our new portfolio, maintaining a strong sense of brand continuity.

Collaboration and Iteration: I worked hand-in-hand with the UX designers, ensuring visual design choices enhanced user focus rather than distracting from it. For example, when a UX designer introduced a new "Product Distribution" component with a dark background, I proactively adjusted the navigation tab menu at the top of the screen to a lighter shade. This subtle but impactful visual change ensured focus remained on the critical lower component, demonstrating a responsive and user-centered design sensibility. The design system itself was treated as a living document, requiring constant iteration and rapid adjustments based on both user feedback and the evolving needs of the UX team.

Building a Comprehensive Resource: Initially, documentation was maintained in PDF format due to limited resources for a dedicated website with working components. However, I championed the investment in and ultimately helped build a comprehensive design system website. This new platform not only housed design principles and philosophy but also showcased fully functional components, becoming a central hub that teams across JDA actively adopted and contributed to, helping it grow into a truly collaborative asset. This resource was initially desktop-focused but later expanded to include mobile components for upcoming developments, anticipating future needs. Complex screens, such as those involving data visualization, required deeper design research. I collaborated closely with a UX designer who had specialized in data visualization to establish visual standards and best practices for this critical part of the system.

No items found.

Interaction and Visual Design

While the project scope involved limited direct interaction design given the Material Design foundation, my primary focus was on establishing a cohesive and visually distinctive aesthetic for the Luminate ecosystem and ensuring its flexible application. This was my first opportunity to lead the visual direction for an application design system at this scale. Though initially a bit intimidating, I found immense inspiration and excitement in the challenge, particularly with a UX Director who truly believed in my capabilities.

I meticulously crafted the new visual style for Luminate, ensuring a clean, mature, and contemporary look that stood out while maintaining professional integrity. This involved defining everything from:

  • Color Palettes: Developing a comprehensive color system, including primary, secondary, and accent colors, that was both brand-aligned and highly accessible (WCAG compliant).
  • Typography: Selecting and defining a consistent typographic scale and hierarchy to ensure optimal readability and visual rhythm across all applications.
  • Iconography: Designing a new set of icons that were consistent in style, scalable, and intuitive, reinforcing the new visual identity.
  • Component Styling: Translating Material Design's foundational components into JDA's unique visual language, meticulously styling elements like buttons, input fields, cards, and data tables to create a unified appearance. This included defining states (hover, focus, active) and ensuring consistent spacing and visual hierarchy.
  • Layout & Grid Systems: Establishing consistent layout principles and grid systems to ensure visual balance and responsiveness across various screen sizes, from desktop to mobile.

A key challenge was applying this new visual direction to existing wireframes provided by the UX team. I continuously iterated on visual applications, transforming these functional blueprints into archetypal screens that embodied the Luminate aesthetic. This process involved a delicate balance of maintaining UX integrity while infusing fresh visual appeal. For example, during component development, I frequently revisited archetype screens to ensure that the visual design truly supported the user's focus. My goal was always to have the visual design subtly guide the user's eye and enhance usability, rather than becoming a distraction. The comprehensive visual specifications I developed were essential for empowering our 500+ developers to implement the design system accurately and consistently across a vast array of applications.

No items found.

Special Focus

The Soft Branding Initiative

One of the most innovative and impactful aspects of this project was the "soft-branding" initiative I spearheaded.Historically, JDA's customers often desired to rebrand the software to align with their own corporate identity, leading to the removal of the JDA logo – an outcome the company, understandably, disliked.

This presented a unique challenge: how to allow customer customization without completely erasing JDA's identity. I initiated close collaboration with the most affected product managers, JDA’s marketing team, and the core branding team. Initially, my approach of involving the branding team was met with some internal skepticism from other designers, who preferred to maintain full autonomy over design guidelines. However, I proactively built strong relationships and trust with the marketing and branding teams, demonstrating my commitment to finding a mutually beneficial solution. This ultimately led to their full trust in my ability to develop the visual guidelines for this soft-branding approach.

My core inspiration came from JDA's existing corporate website, which used colors to associate with company values and industry-specific solutions. I proposed leveraging this concept as the foundation for application-level branding.Drawing inspiration from successful models like Adobe and and Microsoft Office, I designed a soft-branding solution that gave each application its own distinct identity through color, subtly conveying its purpose without overtly flashing the JDA brand on every screen. Furthermore, I included options for two neutral themes, providing customers flexibility if an application's primary color didn't align with their own brand identity. This thoughtful, nuanced approach was met with enthusiasm by both JDA's customers and our internal branding and marketing teams, resolving a long-standing tension point.

Outcome and Impact

The JDA Luminate Design System fundamentally transformed how JDA products were designed, developed, and perceived, both internally and externally.

Internal Impact:

  • Accelerated Development: The centralized design system and its comprehensive documentation provided a uniform story and a consistent "home" for the Fluent Design System, significantly accelerating development cycles and enabling internal teams to create coherent applications across various devices.
  • Enhanced Collaboration: The structured process for contribution and review, along with the creation of the design system website, fostered unprecedented collaboration across UX, engineering, and product teams.
  • Overcoming Skepticism: The clarity and intuitiveness of the new IA, combined with the tangible improvements brought by the design system, helped overcome early leadership skepticism about the design system's impact, securing continued funding and support.

External Impact:

  • World-Class Design System: Externally, the Fluent website provided a world-class design system experience akin to industry leaders like Material Design.
  • Improved User Experience: It offered a clean, crisp experience for designers, developers, and product managers, directly improving the accessibility and usability of JDA's new and refreshed applications.
  • Enhanced Brand Perception: The "soft-branding" initiative was a particular success, welcomed by customers for its flexibility and by internal teams for preserving brand identity in a customer-centric way.
  • Clearer Navigation to Resources: The website was strategically designed to navigate users to relevant resources, even if not all features were available upfront, ensuring Fluent 2 served as the definitive entry point to the design system.
No items found.

Key Learnings

My experience leading the JDA Luminate Design System initiative provided invaluable lessons in design leadership within a large, complex enterprise:

  • The Power of Early Stakeholder Engagement: It can be incredibly difficult to align numerous stakeholders across a large organization. Involving them early in the design process proved crucial; it put everyone on the same page and fostered a shared understanding of the design challenges, leading to smoother adoption and stronger buy-in.
  • Strategic Adaptability with Lean Resources: Supporting an organization the size of JDA as a single visual designer was a significant challenge, especially with diverse project needs and timelines. Leveraging an existing, robust framework like Google Material Design was of immense value, allowing us to maximize impact with limited resources.
  • Collaboration as a Force Multiplier: Team collaboration and regular, transparent communication were absolutely key to success. Working closely with UX designers, engineers, and even marketing teams allowed me to overcome constraints and deliver a comprehensive solution.
  • Embracing Iteration: Recognizing the design system as a living document was paramount. Being able to quickly iterate and adjust based on user feedback and team needs allowed the system to remain relevant and effective as the product portfolio evolved.
  • Building Trust Across Silos: Successfully implementing the "soft-branding" initiative, despite initial internal resistance, highlighted the importance of building strong relationships and trust with cross-functional teams, particularly marketing and branding, to achieve innovative solutions.
"Filip had the knowledge and expertise to create a strategic road map that would carry our brand seamlessly into our UI and UX experience. His deep knowledge of the digital space, strategic problem solving, and rock-solid design skills were a huge asset to JDA."
Ross West - Global Creative Director @ Blue Yonder Software