All Class Design System





2021-2023

✓ Category: Brand System / Template Development  
✓ Role: System Planning, Visual Guideline, Internal Handoff Design  
✓ Tools: Figma, Illustrator, Notion

This project focused on developing a unified UI/UX template and visual guide system for all online classes at CLASS101. The goal was to streamline the visual consistency across course categories and improve both user experience and internal production efficiency.

A large-scale design system project built to unify CLASS101’s online class visuals across 20+ content categories.
The system was planned, designed, and delivered by a single designer through deep collaboration with planners, marketers, and content teams—ensuring real usability and brand consistency.




 Design Insight

  • Consolidated fragmented visuals—thumbnails, layouts, and tones—into one cohesive structure grounded in brand identity
  • Developed a modular template system that accommodates different content types while maintaining design alignment
  • Collaborated across multiple teams to reflect actual workflow, then created documentation and visual guidelines from scratch
  • As the sole designer, led the entire process with the goal of building a “system that anyone in the team can use”



Key Points

  • Unified over 20 course categories into a single brand system
  • Directly coordinated cross-department workflows and needs
  • Led full-cycle execution from planning to design to handoff
  • Built templates accessible to non-designers
  • Balanced brand consistency with production efficiency



Brand Target
  • Users seeking long-term or repeated learning experiences
  • First-time users expecting intuitive, easy-to-navigate UI

Visual Motif
  • Clear icons and infographic-style layouts
  • Color-coded categories for clarity
  • Text-centered templates optimized for information delivery



Process
  • Categorized content structures and visual patterns
  • Designed UI components and scalable templates
  • Collaborated with developers, planners, and PDs to ensure seamless implementation



Design Points
  • Modular systems easy for non-designers to apply
  • UX guides optimized for user viewing flow within the platform



Result
  • Strengthened visual consistency across all courses
  • Reduced average course production time by 30%
  • Established a cohesive brand tone and visual identity across the platform