The mission
Being a part of the product design team at Origin Digital, we focused mostly on Contour, a precision agriculture platform focused on field boundaries and data accuracy.
As part of ongoing design system operations, I collaborated with junior designers and front/back-end engineers to identify and implement areas for improvement.
I ran monthly sessions, which resulted in the creation of a clear set of updates to make the system more accessible, manageable, and consistent.
We started conceptualising
We prioritised key component enhancements, identifying opportunities to merge overlapping patterns while improving accessibility for users with visual impairments.
I led the redesign and consolidation of the chip and filter tag components into a single, responsive, and accessible component. The final solution was documented in StoryBook, establishing a unified and scalable approach within the design system.
Prioritisation was key
As part of the redesign, I evaluated the components for accessibility and added checkmarks to selected states.
This change improved visibility and reduced ambiguity for users with visual impairments, particularly those with Achromatopsia - the previous design lacked sufficient visual distinction and could be mistaken for a disabled state.
Accessibility matters
As part of combining the chips and filter tags into a single component, I designed highly accessible states (AAA) with clear selection indicators, including checkmarks.
I ensured adequate visual contrast and built in keyboard and screen reader support (ARIA), creating a more inclusive and user-friendly experience.
States and sizing
The results
The final outcome was the visual refinement and merging of two overlapping components into a single, unified component in Storybook.
This reduced redundancy within the design system, improved accessibility and consistency across interfaces, and provided a clearer, more maintainable pattern for designers and engineers alike.