Alva Labs

• Developed a comprehensive CSS framework to achieve WCAG accessibility compliance
• Created a user-friendly marketplace onboarding experience, increasing conversion from 5% to 25% in 4 months
• Designed AI-powered prototypes exploring how recruiters could define job requirements

Overview

Alva Labs is a Swedish candidate assessment platform that combines science and technology in hiring, using personality tests, logic assessments, and technical evaluations. I joined as a Senior Product Designer consultant in August 2024, focused on three initiatives: accessibility, the marketplace experience, and early AI recruitment prototypes.

Problem

An accessibility audit by Access Lab Stockholm, experts in digital accessibility, found a specific set of issues:

• Insufficient color contrast on interactive elements
• Lack of dark mode support for users with light sensitivity
• Missing focus indicators for keyboard navigation
• Inadequate text alternatives for icons and symbols
• Issues with font sizing and readability
• Small click areas for interactive elements like checkboxes
• Reliance on color alone to identify links
• Lack of proper announcements for screen readers when content changes

Fixing these one by one wouldn't hold up over time. The approach needed to be systematic: accessibility built into the foundation of the design system from the start.

Approach

Drawing from my experience with design systems at Changr and G-Loot, I proposed and led a CSS framework built on a few principles:

• Component-first architecture: styling was separated from content, enabling reusable components that stayed consistent throughout the platform.
• Single source of truth: the framework became the reference point for design decisions, bridging design and development.
• Framework agnostic: built to work with any front-end technology, making it versatile as the stack evolved.
• Dark mode by default: every component supported both light and dark modes through CSS variables and sensible defaults.
• Performance focused: modern CSS practices and optimized builds kept components lightweight.
• Accessibility first: ARIA attributes, keyboard navigation, and screen reader support were built into every component from the start.

The color system took the most work: contrast that holds up in both light and dark modes, consistent focus and active states for keyboard navigation, a clear type hierarchy, and larger click areas for users with motor limitations.

Marketplace

The Alva Marketplace lets candidates save their assessment results and connect with matching job opportunities, using their personality and logic profiles as the basis for matching, something most job platforms don't do.

The goal was to increase marketplace signups without hurting the assessment completion rate, which was already above 91%. Working with the Candidate Experience team, we built a contextual onboarding system that prompted candidates at specific moments:

• After completing assessments, when the value is clearest
• When viewing job listings that match their profile
• When returning to the platform after their first assessment

This 'wizard' flow increased marketplace signup rates from 5% to 25% over four months, October 2024 to February 2025.

AI prototypes

The third initiative used the new CSS framework to prototype how AI could support talent acquisition managers:

• Defining job requirements through conversation
• Refining details in a structured builder
• Collaborating with teammates on role definitions
• Using predictive data to improve candidate matching

These prototypes tested a real use case for AI in recruitment, and confirmed the CSS framework could flex to a very different kind of interface than the rest of the platform.

Reflection

Six months at Alva Labs showed how much accessibility work improves once it's built into the system from the start. The marketplace numbers showed that better UX and business goals can align when the strategy is right, and the AI prototypes pointed at where recruitment tools are headed next.