Geles Lluna
Menu
Close
Industry
CCAAS
Year
2023-currently
Info
I encountered significant challenges with the existing color palette, which had been loosely derived from the brand logo (orange, yellow, and teal) without a clear rationale or visual consistency. The palette lacked cohesion and had been implemented in Token Studio using opacity-based techniques, creating serious accessibility issues and failing to meet WCAG guidelines. A full redesign wasn’t possible given the constraints, so I focused on elevating what was already there. Using the primary brand color as a foundation, I built structured chromatic scales for each tone, replaced opacity hacks with solid values, and introduced accessible neutrals to reduce visual strain. These changes ensured reliable contrast, improved readability, and gave the product a more balanced, professional look. I applied the updated palette directly in Token Studio, enabling developers to implement colors confidently and consistently. Beyond colors, I created and maintained the Design System: 8px spacing and sizing system for scalability and visual harmony. Component-specific design tokens that minimized implementation errors and accelerated handoff. Comprehensive documentation to support cross-team alignment and ensure the system could grow sustainably. While brand identity remains key in marketing, I believe product design should prioritize usability, accessibility, and functional clarity. By separating the two, the product becomes cleaner, more intuitive, and user-centered. These changes not only addressed accessibility gaps but also gave the team a stronger design foundation, improving collaboration with developers and ensuring a more cohesive user experience across the platform.
Client
anywherenow
ROLE
ui/ux design
Industry
SAAS
Year
2023-currently
Info
I encountered significant challenges with the existing color palette, which had been loosely derived from the brand logo (orange, yellow, and teal) without a clear rationale or visual consistency. The palette lacked cohesion and had been implemented in Token Studio using opacity-based techniques, creating serious accessibility issues and failing to meet WCAG guidelines. A full redesign wasn’t possible given the constraints, so I focused on elevating what was already there. Using the primary brand color as a foundation, I built structured chromatic scales for each tone, replaced opacity hacks with solid values, and introduced accessible neutrals to reduce visual strain. These changes ensured reliable contrast, improved readability, and gave the product a more balanced, professional look. I applied the updated palette directly in Token Studio, enabling developers to implement colors confidently and consistently. Beyond colors, I created and maintained the Design System: 8px spacing and sizing system for scalability and visual harmony. Component-specific design tokens that minimized implementation errors and accelerated handoff. Comprehensive documentation to support cross-team alignment and ensure the system could grow sustainably. While brand identity remains key in marketing, I believe product design should prioritize usability, accessibility, and functional clarity. By separating the two, the product becomes cleaner, more intuitive, and user-centered. These changes not only addressed accessibility gaps but also gave the team a stronger design foundation, improving collaboration with developers and ensuring a more cohesive user experience across the platform.
Client
anywherenow
ROLE
ui/ux design
Industry
SAAS
Year
2023-currently
Info
I encountered significant challenges with the existing color palette, which had been loosely derived from the brand logo (orange, yellow, and teal) without a clear rationale or visual consistency. The palette lacked cohesion and had been implemented in Token Studio using opacity-based techniques, creating serious accessibility issues and failing to meet WCAG guidelines. A full redesign wasn’t possible given the constraints, so I focused on elevating what was already there. Using the primary brand color as a foundation, I built structured chromatic scales for each tone, replaced opacity hacks with solid values, and introduced accessible neutrals to reduce visual strain. These changes ensured reliable contrast, improved readability, and gave the product a more balanced, professional look. I applied the updated palette directly in Token Studio, enabling developers to implement colors confidently and consistently. Beyond colors, I created and maintained the Design System: 8px spacing and sizing system for scalability and visual harmony. Component-specific design tokens that minimized implementation errors and accelerated handoff. Comprehensive documentation to support cross-team alignment and ensure the system could grow sustainably. While brand identity remains key in marketing, I believe product design should prioritize usability, accessibility, and functional clarity. By separating the two, the product becomes cleaner, more intuitive, and user-centered. These changes not only addressed accessibility gaps but also gave the team a stronger design foundation, improving collaboration with developers and ensuring a more cohesive user experience across the platform.
components
The component creation process followed an atomic design methodology to ensure scalability, consistency, and ease of maintenance. It began with atoms, basic UI elements like buttons, icons, and inputs, crafted with strict adherence to the design system’s rules. These atoms were combined into molecules, such as input fields with labels or grouped buttons, forming functional patterns. To add structure and clarity, particles were used as an intermediate layer, grouping related patterns and streamlining component assembly. These then formed full components like cards, modals, or navigation elements, each designed to be adaptable and reusable across the product. This structured approach enabled efficient collaboration between design and development, reduced redundancy, and ensured a coherent user experience across all products.
ABOUT ANYWHERENOW
AnywhereNow (Anywhere365 Dialogue Cloud) is a native communication layer on top of Microsoft Teams and its foundational framework, Azure Communication Services. As one of the trusted Microsoft partner, it leverages existing investments in the Microsoft ecosystem to streamline communications for an accurate, reliable, customer-centric experience. Their omnichannel capabilities create flexibility and freedom to seamlessly reach customers on any communication channel, helping to find speedy solutions, whilst creating the capacity to handle more requests.
challenge
The lack of a unified design system had led to visual inconsistency and accessibility issues. For example, the color palette had been built without a clear system, using random shades instead of structured tonal variations. This not only made the interface inconsistent but also created accessibility barriers when transparency was applied incorrectly.
my approach
To tackle this, I focused on rebuilding the foundation: Unifying the color palette into a structured, scalable system with clear tonal steps. Replacing transparency-based colors with accessible, full-color values to meet WCAG contrast guidelines. Updating and managing tokens in Token Studio to ensure the palette and typography could be applied consistently across products. Documenting every new component with usage guidelines, ensuring smooth handover to developers and consistency across the tea
solution
The changes applied on the design system introduced: A refined, consistent color palette optimized for accessibility and scalability. WCAG-compliant components, ensuring text, buttons, and states met minimum contrast requirements. Design tokens that standardized spacing, typography, and colors for all products. Component documentation in Figma, serving as a single source of truth and reducing ambiguity during handoff. A structured approach to error states and unhappy paths, ensuring supervisors and agents had clear, supportive feedback when things went wrong.
tokens
In our design system, I used Token Studio in combination with Figma Variables to create a structured and scalable token architecture. This approach allowed us to define and manage key design decisions, such as color, spacing, typography, and component states, as reusable tokens. By linking these tokens to variables, we ensured consistency across all components and products, while making it easy to adapt themes, maintain accessibility standards, and support developer handoff. This setup not only improved the visual coherence of our UI but also significantly reduced errors and sped up implementation across teams.
impact
By unifying the color palette and replacing transparency-based colors, I eliminated accessibility issues that had previously blocked users and created inconsistency. This ensured compliance with WCAG guidelines and made the interface easier to read, especially for users with visual impairments. Through the updated tokens, the design team gained a reliable foundation that could scale with future features, while developers benefited from cleaner, faster implementation. Documenting every component reduced rework and miscommunication, strengthening collaboration between design and engineering. Although success was not formally measured, I would track improvements through: Accessibility audit scores (before/after implementing the new palette). Design-to-development handoff time (reduced due to tokens + documentation). Support tickets related to readability or UI issues (expected to decrease after palette unification).
documentation
As part of building a solid design system, I took ownership of writing clear, structured documentation for each component, tailored specifically for developers. This included usage guidelines, behavior across states, responsive behavior, and linked design tokens or variables. I believe that strong communication with frontend teams is essential, so I regularly synced with developers to align on implementation details, clarify edge cases, and ensure that design intent translated accurately into code. This collaborative approach not only streamlined the development process but also helped build mutual trust and efficiency across disciplines.
ABOUT ANYWHERENOW
AnywhereNow (Anywhere365 Dialogue Cloud) is a native communication layer on top of Microsoft Teams and its foundational framework, Azure Communication Services. As one of the trusted Microsoft partner, it leverages existing investments in the Microsoft ecosystem to streamline communications for an accurate, reliable, customer-centric experience. Their omnichannel capabilities create flexibility and freedom to seamlessly reach customers on any communication channel, helping to find speedy solutions, whilst creating the capacity to handle more requests.
ABOUT ANYWHERENOW
AnywhereNow (Anywhere365 Dialogue Cloud) is a native communication layer on top of Microsoft Teams and its foundational framework, Azure Communication Services. As one of the trusted Microsoft partner, it leverages existing investments in the Microsoft ecosystem to streamline communications for an accurate, reliable, customer-centric experience. Their omnichannel capabilities create flexibility and freedom to seamlessly reach customers on any communication channel, helping to find speedy solutions, whilst creating the capacity to handle more requests.
challenge
The lack of a unified design system had led to visual inconsistency and accessibility issues. For example, the color palette had been built without a clear system, using random shades instead of structured tonal variations. This not only made the interface inconsistent but also created accessibility barriers when transparency was applied incorrectly.
my approach
To tackle this, I focused on rebuilding the foundation: Unifying the color palette into a structured, scalable system with clear tonal steps. Replacing transparency-based colors with accessible, full-color values to meet WCAG contrast guidelines. Updating and managing tokens in Token Studio to ensure the palette and typography could be applied consistently across products. Documenting every new component with usage guidelines, ensuring smooth handover to developers and consistency across the tea
solution
The changes applied on the design system introduced: A refined, consistent color palette optimized for accessibility and scalability. WCAG-compliant components, ensuring text, buttons, and states met minimum contrast requirements. Design tokens that standardized spacing, typography, and colors for all products. Component documentation in Figma, serving as a single source of truth and reducing ambiguity during handoff. A structured approach to error states and unhappy paths, ensuring supervisors and agents had clear, supportive feedback when things went wrong.
components
The component creation process followed an atomic design methodology to ensure scalability, consistency, and ease of maintenance. It began with atoms, basic UI elements like buttons, icons, and inputs, crafted with strict adherence to the design system’s rules. These atoms were combined into molecules, such as input fields with labels or grouped buttons, forming functional patterns. To add structure and clarity, particles were used as an intermediate layer, grouping related patterns and streamlining component assembly. These then formed full components like cards, modals, or navigation elements, each designed to be adaptable and reusable across the product. This structured approach enabled efficient collaboration between design and development, reduced redundancy, and ensured a coherent user experience across all products.
impact
By unifying the color palette and replacing transparency-based colors, I eliminated accessibility issues that had previously blocked users and created inconsistency. This ensured compliance with WCAG guidelines and made the interface easier to read, especially for users with visual impairments. Through the updated tokens, the design team gained a reliable foundation that could scale with future features, while developers benefited from cleaner, faster implementation. Documenting every component reduced rework and miscommunication, strengthening collaboration between design and engineering. Although success was not formally measured, I would track improvements through: Accessibility audit scores (before/after implementing the new palette). Design-to-development handoff time (reduced due to tokens + documentation). Support tickets related to readability or UI issues (expected to decrease after palette unification).
documentation
As part of building a solid design system, I took ownership of writing clear, structured documentation for each component, tailored specifically for developers. This included usage guidelines, behavior across states, responsive behavior, and linked design tokens or variables. I believe that strong communication with frontend teams is essential, so I regularly synced with developers to align on implementation details, clarify edge cases, and ensure that design intent translated accurately into code. This collaborative approach not only streamlined the development process but also helped build mutual trust and efficiency across disciplines.
tokens
In our design system, I used Token Studio in combination with Figma Variables to create a structured and scalable token architecture. This approach allowed us to define and manage key design decisions, such as color, spacing, typography, and component states, as reusable tokens. By linking these tokens to variables, we ensured consistency across all components and products, while making it easy to adapt themes, maintain accessibility standards, and support developer handoff. This setup not only improved the visual coherence of our UI but also significantly reduced errors and sped up implementation across teams.
CHALLENGE
The lack of a unified design system had led to visual inconsistency and accessibility issues. For example, the color palette had been built without a clear system, using random shades instead of structured tonal variations. This not only made the interface inconsistent but also created accessibility barriers when transparency was applied incorrectly.
MY APPROACH
To tackle this, I focused on rebuilding the foundation: Unifying the color palette into a structured, scalable system with clear tonal steps. Replacing transparency-based colors with accessible, full-color values to meet WCAG contrast guidelines. Updating and managing tokens in Token Studio to ensure the palette and typography could be applied consistently across products. Documenting every new component with usage guidelines, ensuring smooth handover to developers and consistency across the tea
SOLUTION
The changes applied on the design system introduced: A refined, consistent color palette optimized for accessibility and scalability. WCAG-compliant components, ensuring text, buttons, and states met minimum contrast requirements. Design tokens that standardized spacing, typography, and colors for all products. Component documentation in Figma, serving as a single source of truth and reducing ambiguity during handoff. A structured approach to error states and unhappy paths, ensuring supervisors and agents had clear, supportive feedback when things went wrong.
components
The component creation process followed an atomic design methodology to ensure scalability, consistency, and ease of maintenance. It began with atoms, basic UI elements like buttons, icons, and inputs, crafted with strict adherence to the design system’s rules. These atoms were combined into molecules, such as input fields with labels or grouped buttons, forming functional patterns. To add structure and clarity, particles were used as an intermediate layer, grouping related patterns and streamlining component assembly. These then formed full components like cards, modals, or navigation elements, each designed to be adaptable and reusable across the product. This structured approach enabled efficient collaboration between design and development, reduced redundancy, and ensured a coherent user experience across all products.
documentation
As part of building a solid design system, I took ownership of writing clear, structured documentation for each component, tailored specifically for developers. This included usage guidelines, behavior across states, responsive behavior, and linked design tokens or variables. I believe that strong communication with frontend teams is essential, so I regularly synced with developers to align on implementation details, clarify edge cases, and ensure that design intent translated accurately into code. This collaborative approach not only streamlined the development process but also helped build mutual trust and efficiency across disciplines.
tokens
In our design system, I used Token Studio in combination with Figma Variables to create a structured and scalable token architecture. This approach allowed us to define and manage key design decisions, such as color, spacing, typography, and component states, as reusable tokens. By linking these tokens to variables, we ensured consistency across all components and products, while making it easy to adapt themes, maintain accessibility standards, and support developer handoff. This setup not only improved the visual coherence of our UI but also significantly reduced errors and sped up implementation across teams.
IMPACT
By unifying the color palette and replacing transparency-based colors, I eliminated accessibility issues that had previously blocked users and created inconsistency. This ensured compliance with WCAG guidelines and made the interface easier to read, especially for users with visual impairments. Through the updated tokens, the design team gained a reliable foundation that could scale with future features, while developers benefited from cleaner, faster implementation. Documenting every component reduced rework and miscommunication, strengthening collaboration between design and engineering. Although success was not formally measured, I would track improvements through: Accessibility audit scores (before/after implementing the new palette). Design-to-development handoff time (reduced due to tokens + documentation). Support tickets related to readability or UI issues (expected to decrease after palette unification).