Scope
Design System, UX Design, UI Design
Team / Individual
Coc Coc Members
Domain
Techology, Internet Services
Overview
As Coc Coc's brand identity evolved toward a younger and more dynamic direction, the existing website system no longer represented who the brand had become. Different teams were using inconsistent UI components and outdated design patterns, creating a fragmented experience across pages. Our goal was to rebuild a unified design system that aligns with the new brand identity and enables designers and developers to create consistent, scalable, and joyful digital experiences.
Problem statement
Over time, the previous website system became inconsistent and hard to maintain. Each team created their own UI elements, resulting in redundant components and visual clutter. The interface failed to express the youthful and energetic spirit of Cốc Cốc’s new identity. We needed a system that was both structured and expressive, balancing usability with personality.
Objectives
Redefine the visual language to reflect the brand’s youthful personality. Build a modular system for scalability across the ecosystem. Ensure consistency in typography, colors, and components. Improve collaboration between design and development while reducing design debt.
Empathy
We interviewed designers, developers, and users. Designers struggled with outdated components and inconsistent tokens. Developers faced redundant layouts and unmanageable CSS. Users found the website functional but visually outdated. These insights showed that the new system needed to become a shared language for both creativity and efficiency.
Define
We identified three key pain points: inconsistency across pages, inefficiency in workflow, and weak brand expression. From there, we defined a core design principle: create a system that delivers consistency without losing personality.
Ideate
We explored multiple directions combining bold colors, rounded shapes, and dynamic motion. A vibrant green palette paired with playful accent tones created a youthful look. We structured the system around scalable design tokens and reusable components to ensure flexibility and maintainability.
Prototype
High-fidelity prototypes were built in Figma and applied to key pages such as the homepage, download, and about pages. These were used to validate layout adaptability, responsiveness, and visual alignment between teams.
Test
Internal usability tests and design–dev QA sessions showed positive results. Design iteration speed increased by 30%, and developers reduced CSS overrides by 40%. The new interface was described as fresh, cohesive, and truly reflective of Cốc Cốc’s identity.
Solution
The final design system captures the essence of Cốc Cốc’s new brand: youthful, dynamic, and consistent. It includes a unified component library, design tokens for all foundations, and clear guidelines for motion, tone, and responsiveness. This system not only refreshed the website’s visual identity but also established a scalable foundation for future digital products, ensuring every interaction feels distinctly Cốc Cốc.