Hireup

Revamping Hireup's design system for accessibility excellence

Working closely with the lead front-end developer, we consolidated and updated the Hireup design system. From the get-go, our main objective was to guarantee accessibility compliance for individuals with disabilities. This approach aligned with Hireup’s values and promised a more inclusive and user-friendly experience for everyone engaging with the platform.

A laptop screen displaying a digital dashboard for a support team, including booking schedules, support team messages, and work availability details.
Screenshots of a mobile app interface showing a calendar schedule, booking management, and a contact list for support team members, on a black smartphone.

Accessibility should be a priority

Throughout the project, I found myself immersed in the intricacies of design and development, collaborating with the team to ensure every aspect met the highest standards of accessibility. We meticulously reviewed and adjusted elements, from colour contrasts to navigation structures, ensuring that every user could navigate the platform seamlessly, regardless of their abilities.

Witnessing the transformation of the design system was incredibly fulfilling. Each adjustment we made felt like a step forward in terms of compliance and enhancing the overall user experience. Knowing our efforts positively impacted end users' lives was gratifying.

This experience reinforced the importance of prioritising accessibility in all future projects, ensuring that no one is left behind in the digital landscape.

A chart explaining typography features like diacritic, ascender, cap height, x-height, baseline, and descender, with examples of uppercase and lowercase letters, and color-coded regions for each feature.
Page from a document describing typography and font characteristics, with sample text in multiple font sizes and styles, including repetitions of the word 'Áýg' and various sentences about wellbeing and support work.
A style guide showing different font weights and styles for typography, including bold, medium, and regular, with various point sizes from 12 to 40.
Color palette chart showing primary colors (blue, mint, sand, white, midnight) with hex, RGB, and HSL values, and secondary colors (neutral, positive, caution, orange, negative) with their respective codes.
A website or software interface design mockup showing sections for input fields with labels, sizes, states, errors, and help texts, arranged in a grid layout with Labels, descriptions, and input boxes.
A table with a heading labeled 'Checkbox' on the left and 'States' on the right. The table shows various checkbox styles and their states: default, checked, unchecked, group, and error, with different options, labels, and icons.
A screenshot of a style guide or UI component documentation with sections for buttons, sizes, importance, variants, and states, displaying various button styles, sizes, importance levels, variants, and interaction states.