How We Built a Complete Job‑Protection Design System in Two Months

Today we share a project summary of Ganji’s Job‑Protection Plan, focusing on how to establish a complete protection design system. The article provides experience on large‑scale project management and implementation, systematic protection design thinking, the TCMC analysis framework, and concrete perception‑measurement methods.

Background and Problem

The blue‑collar recruitment market has long suffered from chaos and fake job postings, leading to low user trust. Gaining user trust and enhancing safety perception is therefore crucial.

Design System Overview

The protection system consists of two major parts: a design system and business scenarios. The design system is built on four principles—"Based on Reality", "Safe & Reliable", "Clear & Understandable", and "Visually Unified"—and includes a visual symbol system, color system, and typography system.

Symbol Design

We extracted laser‑checked marks, shield elements, a super‑symbol circle, and the Ganji "G" to create a unique visual tone for the protection system.

Graphic System

Simple graphics such as check marks and plus signs serve as core elements, expanding into a clear and understandable graphic system.

Color System

The primary color is a safety‑evoking green, complemented by adjusted HSB secondary colors and a laser‑style accent to add visual depth.

Typography System

We paired lightweight and smiling typefaces to form a cohesive textual system that works with the color and graphic elements.

Protection IP Image

An IP mascot, the "Ganji Verification Officer", was created to establish an emotional connection with users and reinforce trust in verification scenarios.

Mapping to Core Business Scenes

Homepage Header : The new header combines Ganji’s brand slogan with the protection plan, reinforcing user awareness of safety.

Homepage Section : The redesign removes noisy gradients, uses white cards, and adds icons to convey information clearly.

Detail Page : Real‑user feedback is added below job verification, and a verification report aggregates company status, third‑party data, and user rights to convey reliability.

Share Page : The share page highlights core capabilities and real‑case compensation stories, encouraging word‑of‑mouth promotion.

Methods and Process

TCMC Analysis Framework : A custom competitive‑analysis method that defines design goals, examines competitors, applies appropriate analysis techniques, and quickly produces conclusions, providing a global perspective.

User Experience Map Co‑creation Canvas : Aligns cross‑functional goals and identifies touchpoints, ensuring consistent objectives.

Visual Exploration Four‑Step Method : Combines core selling points with scenario touchpoints, using online collaboration to iterate visual concepts.

Round‑Table Communication : Small‑group meetings with product and engineering quickly align goals and resolve issues, improving version planning.

Perception Measurement : A perception test, similar to a usability‑agreement test, evaluates impression, realism, and trust through questionnaires, providing quantitative feedback on user perception.

Outcome

The entire project—from preparation to launch—was completed in less than two months. By employing TCMC analysis, user‑experience mapping, visual exploration, round‑table communication, and perception testing, the team delivered a systematic protection design that enhances user trust and safety perception across the Ganji job platform.