A design system creates a unified set of guidelines and components, ensuring visual consistency and efficiency across platforms. It reduces redundancy and enables scalable, cohesive design solutions.

Kariyer.net is one of Turkey’s leading HR platforms, helping 1.9 million people find jobs. With over 15 million CVs hosted and millions of monthly visitors, it plays a critical role in the country’s recruitment landscape, connecting employers with top talent across various industries.

Discover more

Overview

Project name:

k | Design System Implementation

Sector:

Human Resources

Date:

December 2021 – November 2023

Duration:

23 Months

Team:

UX Designer, UI Designer, Product Manager, UX Researcher, UX Writer, Frontend Developer, Mobile App Developer

My role:

Product & UX Designer
I led the creation of the k | Design System, establishing its foundation and organizing existing components into an atomic design structure. By consolidating UI elements, we developed a flexible system with multi-platform components. This scalable architecture enabled seamless updates across complex workflows, ensuring consistency and adaptability across web and app platforms.

UX/UI Methodologies​

  • Atomic Design
  • Design System Thinking
  • Component-Based Design
  • User-Centered Design (UCD
  • Iterative Design
  • Cross-Platform Design
  • Collaboration and Documentation

Problem Statement​

Agile product development lacks consistency, efficiency, and scalability due to the absence of a design system, resulting in fragmented user experiences and misaligned efforts.

Challenges, Difficulties, and Obstacles

  • Inconsistent User Experience
  • Inefficient Design Process
  • Collaboration and Communication Issues
  • Scalability Problems
  • Slowed Iteration and Innovation
  • Technical Debt

Goals​

  • Establish a Design System
  • Develop an Atomic Design Framework
  • Collaborate with Cross-Functional Teams
  • Accessibility
  • Iterate and Improve the System
Establishing a Design System​

Figma’s variables and design tokens enhance consistency and flexibility in design. They simplify light and dark mode management and standardize spacing, typography, and styles across projects. This allows for quick updates, efficient scaling, and improved collaboration, ensuring a cohesive user experience.

Atomic Design Framework​
We implemented the Atomic Design methodology at Kariyer.net to create a scalable design system. This approach organizes UI elements into five levels: Atoms (basic elements), Molecules (combinations of atoms), Organisms (complex components), Templates (page layouts), and Pages (content-filled instances). This structure ensures visual consistency, flexibility, and efficient collaboration across platforms.
Collaboration with Cross-Functional Teams

For k | Design System, I worked closely with design, development, and UX research teams to align the system with business needs. This collaboration ensured the components were not only visually consistent but also technically feasible and user-centered, resulting in a versatile, scalable system that met both user and business goals.

Accessibility

k | Design System was built with a strong focus on accessibility, ensuring that all components met WCAG AA and AAA standards. By carefully selecting color palettes and optimizing contrast ratios, we ensured text and UI elements were legible for all users, including those with visual impairments. This commitment to accessibility provided an inclusive user experience, meeting both AA and AAA requirements for sufficient contrast and readability across platforms.

Results​

  • Faster Development: Reusable components speed up design and development processes.
  • Consistent User Experience: A unified design ensures consistency across platforms.
  • Better Collaboration: Streamlined communication between design, development, and research teams.
  • Scalability: Easily supports growth and new features without disrupting the system.
  • Cost Efficiency: Saves time and resources by reducing repetitive work and errors.
  • Quicker Iteration: Enables faster testing and refinement for continuous improvement.

Conclusion & Learnings

The development and implementation of the k | Design System significantly improved efficiency, consistency, and scalability at Kariyer.net. By adopting an atomic design approach and collaborating closely with cross-functional teams, we created a flexible and reusable system that streamlined our processes and enhanced the user experience across platforms.


Key learnings included the importance of maintaining flexibility for future growth, the value of standardization in reducing errors, and the critical role accessibility plays in delivering an inclusive experience. Continuous iteration and feedback were vital to refining the system, ensuring it could adapt to evolving business and user needs while supporting seamless updates and expansion.