Saint-P, Russia
Preboarding
B2E
Introduction
The design system is a library of components and core principles based on the brand book. It consists of 32 components. For each component, detailed documentation has been written, describing the component's behavior, its main states, edge cases, and layout specifics.
Goals
- Ensure visual consistency across all website templates and components, so users can create cohesive sites without design clashes.
- Accelerate development speed by providing a reusable component library, reducing the need to build UI elements from scratch for each new feature or template.
- Simplify customization for end-users by offering intuitive, well-documented components that non-designers can easily adjust (colors, typography, spacing, etc.).
- Maintain scalability – the design system should support the growing number of templates, blocks, and features as the website builder evolves.
- Enable seamless theming – allow users to switch global styles (e.g., dark/light mode, brand colors) while keeping all components adaptive and consistent.
- Reduce technical debt by standardizing front-end code and minimizing duplicate or inconsistent styling across the platform.
- Improve cross-team collaboration – provide a single source of truth for designers, developers, and product managers, ensuring everyone works with the same components and principles.
- Enhance accessibility – embed accessibility standards into every component, ensuring all user‑generated websites are inclusive by default.
- Streamline QA and testing – with standardized components, testing becomes more predictable and covers edge cases uniformly.
- Support responsiveness – every component should be mobile-first and adapt flawlessly to all screen sizes, since website builder users expect multi‑device compatibility.
- Enable fast prototyping – allow designers and developers to quickly assemble new page layouts and templates using pre‑built, tested blocks.
- Provide clear documentation – create comprehensive guidelines that explain when and how to use each component, including live examples and code snippets for developers.
My Role
My role was a Product Designer on the team developing a website builder as well as Design System itself. I was one of the 4 designers working alongside a QA specialist, frontend developers, backend developers, and product managers.
What I did:
- Conducted a full UI audit across the platform to find inconsistencies and areas for improvement.
- Researched best practices from leading design systems and adapted them to our context.
- Defined core design principles aligned with brand identity and user needs.
- Created a scalable color system with clear usage guidelines.
- Established a consistent typography scale with hierarchy and spacing rules.
- Designed 13 out of 40 components, including buttons, inputs, modals, tooltips, dropdowns, navigation, and cards.
- Wrote detailed documentation for each component covering behavior, states, edge cases, and layout specs.
- Researched existing design systems to simplify documentation workflow.
- Created interactive prototypes to test components and gather feedback.
- Worked closely with developers, providing specs and reviewing implementation.
- Built the design system website for easy team access.
- Set up a governance model for adding and updating components.
- Led team workshops to align on approaches and share knowledge.
- Tested components with users and iterated based on feedback.
- Built a Figma library with auto-layout, variants, and interactive states.
- Continued to maintain and improve the system based on feedback and new needs.
Pre-project Research
- Conducted stakeholder interviews to understand business goals, user needs, and technical constraints.
- Analyzed existing product analytics to identify user pain points and drop-off points.
- Performed a competitive analysis of similar platforms and design systems to benchmark best practices.
- Reviewed the current UI for inconsistencies, outdated patterns, and accessibility issues.
- Gathered feedback from support teams about common user complaints and feature requests.
- Surveyed internal teams (designers, developers, product managers) about their workflows and challenges.
- Studied the brand book and marketing materials to align visual language with company identity.
- Researched technical limitations and platform capabilities with the development team.
- Created user personas and journey maps to understand different user types and their needs.
- Identified key user scenarios and edge cases to prioritize component requirements.
- Reviewed industry standards for accessibility (WCAG) to plan for inclusive design.
- Documented all findings in a research report to guide the design strategy and roadmap.
Interface solutions
Preboarding consists of the following sections:
- Personal account for the Recruiter
- Personal account for the HR Partner
- Personal account for the Candidate
Components
Components
Component structure
Each component consists of variants with different properties. Required variant properties: Theme: Day/Night, Size: L/M/S, State: Default/Hover/Active/Disabled. Boolean properties are used for optional elements or elements that can be hidden or expanded. Swap properties are used for elements that can be replaced with similar ones, such as icons. Text properties are used for all text elements within the component.
Results
- Developed 1/3 of the 40 components and wrote documentation for them.
- Conducted a comprehensive research study of design systems, which simplified the documentation writing process.
- Developed the design system website.