Sr. UX Designer, Product
WorkLLama
AI-Driven Unified Talent Acquisition Platform
Team
UX/UI Methodologies & Techniques:
Specific Component
UX Research
UI Design
QA of Implementation
Style Guide
Pattern Library
UI Inventory
UX Audit
Software
To comply with my non-disclosure agreement, I have omitted confidential information in this case study.
The Challenge
Solution
Design Process
Discovery & Research
To ensure that the design system met the needs of all stakeholders, I conducted customer interviews and analyzed market research across primary verticals. This allowed us to identify key differences in user behavior and requirements based on role, motivations, compensation models, and job lifecycles.
User Persona
User interviews
User Surveys
Each persona was accompanied by a sample UI component (e.g., job card) to align user needs with design solutions effectively.
User Persona Mapping
Personas highlighted distinct motivations and needs across job lifecycle stages, helping to tailor the design system to support relevant user flows and enhance usability.
These personas served as a foundation for crafting modular, flexible UI components that could accommodate variations in candidate experiences and job-seeking motivations.
System Structure & Transition Xd to Figma
Initially, the design team used Adobe XD, but we identified the transition to Figma as an opportunity to unify our workflow and leverage Figma’s collaborative features.
The Figma design system was structured into extension files and partials representing different inheritance levels. This setup enabled us to maintain a single source of truth for base components while allowing product-specific variations for B2B and B2C applications.
Component Libraries and Inheritance
We created a core library with foundational components used across all platforms. Each product had its unique set of components that extended the base library, supporting the specific needs of either business customers or job candidates.
This hierarchical structure allowed for easy customization and ensured consistency across white-labeled products.
Documentation & Client Customization
The design system included a Client Style Guide page, which allowed business customers to generate customized themes. This was achieved through Auto-Generating Custom Themes, auto-generated color palettes and brand assets within Figma components.
Documentation Matrix: As components were developed across products, the team cataloged them in a matrix to ensure consistency. This matrix allowed designers working on different products to collaborate and align styles and functionality.
Key Features and Functional Additions
To boost candidate engagement and automate recruiter tasks, we integrated an AI-powered chatbot, into the Candidate and Enterprise Portals.
I crafted simple, conversational flows for job discovery, application help, and FAQs, allowing candidates to engage smoothly while freeing up recruiters for higher-value work. Sofi’s design emphasized ease of use and accessibility, ensuring seamless interaction for all users.
Through rounds of user feedback and refinement, we ensured Sofi was both accessible and valuable to candidates and recruiters alike.
Our design system also included a library of reusable components—like job cards, navigation bars, and form elements—which sped up feature development and improved efficiency across projects.
Accessibility & Inclusive Design
I ensured all components adhered to ADA and WCAG standards to promote inclusivity. This included accessible color contrasts, larger clickable areas for mobile users, and support for screen readers.
Each component underwent accessibility testing to identify issues early, allowing us to address them before release. This not only improved usability but reinforced WorkLLama’s commitment to inclusive design.
Key Takeaways
Early and continuous collaboration with product managers, engineers, and stakeholders helped align on solutions that balanced user needs with technical feasibility.
Ensuring accessibility at every stage resulted in a product that was both inclusive and user-friendly, underscoring the value of proactive accessibility efforts.
The modular, component-based design system facilitated rapid product development and scalability, enabling future growth and innovation without sacrificing consistency.