PleaseAI

Context & Challenge

PleaseAI is a conversational AI chat web application designed to provide UNOPS clients with instant access to project information and support. The platform needed to serve diverse client projects while maintaining a cohesive user experience and ensuring accessibility compliance across dynamically generated color schemes.

The key design challenge was creating a component system that could automatically adapt its visual identity to each client's brand while guaranteeing accessibility standards. I proposed an approach where color generation would maintain WCAG contrast ratios regardless of the input imagery provided by users.

Design System Integration: Spectrum

PleaseAI's components were designed as part of a comprehensive Design System Library I've been working on for UNOPS called Spectrum. A foundation of reusable, accessible components that maintain consistency across UNOPS digital products while allowing for customization and flexibility.

By designing PleaseAI within the Spectrum framework, I ensured that every component—from input fields and buttons to chat bubbles and navigation elements—followed established design patterns while extending the system's capabilities for dynamic theming. This approach accelerated development while maintaining design quality and accessibility standards.

Proposing Dynamic Color Theming

I proposed a dynamic color theme system that would analyze dominant colors from user-uploaded images and automatically generate a complete color palette to adapt the entire interface—including backgrounds, text, buttons, and interactive elements.

The critical design requirement was accessibility: the system needed to automatically validate and adjust color combinations to meet WCAG contrast ratio requirements. Inspired from the Google Material 3 Dynamic Color Theming I recommended that if generated palettes didn't meet minimum contrast standards (4.5:1 for normal text, 3:1 for large text), the system should intelligently adjust lightness values until accessibility compliance is achieved.

Fortunately, this challenge was accepted by the Product Owner, who implemented an innovative technical solution to achieve the result for the technology we were using on this project (different than the one Google Material 3 Dynamic Color Theming uses). This collaboration between design vision and technical expertise ensured that regardless of the source imagery provided by clients. Whether dark or light, vibrant or muted—the resulting interface remains fully accessible while preserving the visual identity derived from their brand assets.

User Experience & Interface Design

The conversational interface was designed to prioritize clarity and ease of use. Chat interactions follow established patterns familiar to users from other messaging platforms, reducing learning curves and cognitive load. Message bubbles, input fields, and response indicators are designed to be immediately intuitive.

With a focus on accessibility, the interface was designed to adapt responsively across devices, ensuring UNOPS clients can access project information whether they're at their desk or in the field on mobile devices. Loading states, typing indicators, and error messaging provide clear feedback throughout the conversation flow.

Special attention was given to information hierarchy within AI responses, using typography, spacing, and visual emphasis to make complex project data scannable and digestible. The design accommodates both brief queries and detailed project information exchanges without overwhelming users.

Accessibility Considerations

While the dynamic theming system needed to ensure color contrast compliance, I extended accessibility considerations throughout the entire design. All interactive elements include appropriate focus states for keyboard navigation, supporting users who rely on assistive technologies.

I designed the chat interface to work with proper ARIA labels and semantic HTML structure, ensuring screen readers can accurately convey conversation context and message authorship. Button states, loading indicators, and error messages are communicated through both visual and programmatic means, making the application usable for people with varying abilities.

Typography scales appropriately across devices and supports readability with adequate line height, letter spacing, and responsive sizing. The design accommodates browser zoom up to 200% without loss of functionality, meeting WCAG success criteria for text resize.

Key Deliverables

• Comprehensive UI component library integrated with Spectrum Design System
• Design specifications for dynamic color theme generation with WCAG compliance requirements
• Conversational interface design with intuitive chat patterns and information hierarchy
• Responsive design system supporting desktop, tablet, and mobile experiences
• Component specifications with focus states, error states, and loading states
• Design tokens and variables for consistent application of dynamic themes

Impact & Outcomes

PleaseAI successfully delivers personalized user experiences while maintaining accessibility standards across all client implementations. The dynamic theming approach allows UNOPS clients to see their brand identity reflected in the interface without compromising usability or accessibility compliance.

The project demonstrates how thoughtful design systems can scale across diverse use cases while maintaining quality standards. By designing within the Spectrum framework, PleaseAI contributes reusable patterns back to the design system, benefiting future UNOPS projects.

The accessibility-first design approach ensures that UNOPS clients from all backgrounds and abilities can effectively use the platform to access project information. The proposed WCAG compliance validation removes the burden of manual accessibility testing from implementation teams while guaranteeing standards are met.

This project showcases the intersection of design innovation, design system thinking, and accessibility advocacy—creating a solution that is both visually adaptive and universally accessible.