CASE STUDY

Digital Design System

Developed a new design system that revamped the brand’s digital visual identity, including UI components, typography, and layout principles.

Challenge

The task was to redesign and overhaul the entire design system previously managed by a third-party agency, addressing several key foundational gaps. The existing system lacked a cohesive grid structure, consistent typography hierarchy, and standardized spacing. As a result, elements were misaligned and the user experience felt fragmented and inconsistent across digital properties. The main goal was to build a unified, scalable framework that would bring both visual and functional consistency to all design outputs.

Approach

  • Implemented a 4pt design system to create a consistent rhythm across UI elements, ensuring that spacing, padding, margins, and component sizes aligned perfectly for a clean, polished interface.

  • I used a 12-column grid for large screens, 8 columns for medium screens, and 2 columns for small screens to ensure flexibility across devices.

  • Typography was carefully structured using the 4pt system, ensuring consistent sizing, a clear hierarchy, and balanced line heights across all text elements.

Outcome

Site Redesign Impact (Jan–Apr 2025 vs. Previous Year)

+10.8%

increase in total key events

+16.6%

improvement in conversion rates

+115%

Direct traffic conversion rate

The result was a fully structured and consistent UI/UX system that brought a significant boost in design consistency. By unifying typography, spacing, color usage, and component behaviors, the new system streamlined the design and development process, reducing guesswork and speeding up decision-making.

This led to faster handoffs between teams and made it easier to extend the system for future features or platforms. The improved consistency also enhanced the overall user experience, making interfaces more intuitive and user-friendly, while reinforcing brand cohesion across all digital touchpoints. Additionally, the centralized design rules reduced long-term maintenance efforts and raised the overall quality and polish of the interfaces. Clear standards fostered better collaboration between designers, developers, and stakeholders, and laid a strong foundation for accessible, inclusive design moving forward.