WCG Core UI & System Patterns

Project Type Foundational UX/UI Design

Company WCG – UX Team

Role UX/UI Designer & Frontend Collaborator

Tools Figma, Tailwind CSS, Jira, Confluence

Overview

As part of the WCG UX team, I contributed to designing and implementing essential UI components and interface patterns that now support functionality, branding, and user experience across multiple WCG products. This includes the redesigned Array Interface, a unified 404 Error Page, a Global Footer system, and an updated Cookie Consent component. These features were built using the WCG design system, coded in collaboration with developers, and verified through internal QA.

New Array Interface

Goal: Redesign the array-based UI used across multiple data-heavy admin and internal tools to improve usability, consistency, and scalability.

My Contribution:

  • Audited existing interface for usability issues and inconsistencies across screens

  • Wireframed new structure and layout options using Figma design system

  • Collaborated with developers to design a modular, component-based UI that supports sorting, inline editing, and visual grouping

  • In progress: designing variant layouts for different use cases (single vs. multi-row actions, data validations, responsive behavior)

404 Error Page

Goal: Provide a helpful, branded user experience when encountering broken or missing links.

My Contribution:

  • Designed a clean layout with contextual navigation, helping users return to their task

  • Styled for mobile and desktop using Tailwind CSS

  • Collaborated with devs for smooth rollout across multiple platforms

  • Used consistent visual language to reduce confusion and improve trust

Universal Footer

Goal: Create a consistent, scalable footer used across all WCG web applications.

My Contribution:

  • Designed a responsive footer with links to privacy, legal, help, and site navigation

  • Integrated product icons and branding with future-proof structure

  • Worked with product managers to align footer content across different tools

  • Built using the Tailwind framework and made accessible for keyboard navigation

Cookie Consent UI

Goal: Improve WCG’s compliance with global privacy laws while maintaining a clean user experience.

My Contribution:

  • Designed a compact and friendly cookie consent banner with clear action options

  • Ensured accessibility and responsiveness across breakpoints

  • Provided a flexible layout for products with different needs (minimal vs. customizable)

  • Helped developers implement logic for user preferences and persistence

These projects are ongoing and evolving as part of WCG’s internal UI system refactoring.

Impact

These components helped build a stronger UX foundation across WCG platforms, improved accessibility, ensured visual consistency, and supported technical scalability across departments. My contributions improved user experience across thousands of sessions and positioned the UX team as a key partner in product innovation.