Design System & Accessibility – Standardizing the Experience
LOGIQC’s interface lacked visual consistency across components, with inconsistent button styles, font sizes, and spacing. Additionally, the primary brand colour was yellow, which posed significant accessibility issues when used as a button colour due to poor contrast. Since primary brand colours are typically used for primary buttons, an alternative solution was needed to ensure both brand alignment and usability.
🎨 Designed & Implemented a Brand-New Design System
✅ Standardised UI components – Defined consistent buttons, input fields, typography, and spacing, ensuring a cohesive user experience across all features.
✅ Established scalable form components – Created uniform field layouts and validation patterns, improving form usability across desktop and mobile.
✅ Enhanced column editing functionality – Allowed users to customise table views efficiently, supporting a more flexible, user-controlled experience.
♿ Ensured Full Accessibility Compliance
✅ Refined colour usage for accessibility – Since yellow failed contrast tests, I designated navy as the primary button colour and reserved yellow for hover states and non-critical UI elements.
✅ Improved keyboard navigation & focus states – Made sure all interactive elements were fully navigable without a mouse.
✅ Screen reader support – Ensured clear labelling of UI components for users with vision impairments.
👨💻 Developer Collaboration & Hands-on Code Implementation
✅ Worked closely with engineers – Provided detailed documentation and specs, ensuring seamless development handoff.
✅ Implemented design refinements directly in code – Jumped into the codebase myself to fine-tune UI components, reducing friction between design and development.This new design system provided LOGIQC with a strong foundation for consistency, scalability, and accessibility. It not only improved usability and visual clarity but also streamlined future development by ensuring a single source of truth for UI components.