Dr. Delminquoe L Cunningham 
The UX Detective 
UX/UI Architect • UX RESEARCH • ACCESSIBILITY • DESIGN SYSTEMS

Category: Design Systems

This category showcases how I build the “Rulebook of Evidence.” It includes establishing scalable, standardized component libraries and design tokens that ensure consistency, efficiency, and accessibility across entire digital products. These systems translate complex brand and UX principles into reusable assets that accelerate delivery and maintain design integrity at scale.

  • USSF Polaris Design System: Mission-Critical Consistency

    USSF Polaris Design System: Mission-Critical Consistency

    Project Outcomes at a Glance

    High Velocity

    Streamlined workflows allow even short-term interns to rapidly deliver tactical software and cyber applications.

    Multi-Platform

    A single source of truth supporting React (Web/Desktop) and Flutter (iOS/Android) environments.

     
    Brand Aligned

    Codified “Guardian One” values (Openness, Balance) directly into the design tokens and themes.

    Project Details

    Core Responsibilities
    • Lead UX Specialist
    • Usability Researcher
    • Design System Governance
    Tools
    • Figma (Tokens)
    • Zeplin
    • Storybook
    • Directus (CMS)
    Frameworks
    • MUI & MUI X
    • React
    • Flutter
    Project Documentation
    The Challenge: Friction in the Stack

    The USSF’s digital ambition was to empower Guardians to build tools—from command-level dashboards to tactical cyber software. However, relying on the legacy U.S. Web Design System (USWDS) created a bottleneck. It wasn’t optimized for the team’s modern React and TypeScript stack, leading to “hacky” implementations and inconsistent experiences across internal portals and mobile apps.

    My Role: Building the Foundation

    My objective was to refactor Polaris from the ground up. We needed a system that was more than just a component library; it had to be a comprehensive “operating system” for design. This meant moving away from legacy code to a modern MUI X foundation, establishing a strict governance model, and ensuring the system could scale to desktop and mobile native apps.

    From Insight to Action

    We executed a strategic, multi-phased rebuild:

    • Tokenizing the Brand: We didn’t start with pixels; we started with values. We translated Guardian One values into a semantic token system (e.g., color.background.primary). This allowed us to support Light, Dark, and High-Contrast modes effortlessly.
    • Automated CI/CD for UX: Efficiency was paramount. I designed a pipeline where assets flowed from Figma to Zeplin (for redlining) and then directly into the VS Codebase via API, with Storybook acting as the testing ground.
    • Governance Model: To prevent “wild west” development, I established a clear contribution process. Minor bug fixes were crowdsourced, while major enhancements required system-wide coordination.
    • Data as a Service (DaaS): To support dynamic mission needs, we architected the portal as a DaaS platform using Directus. Content is streamed “on the fly” via custom APIs, allowing real-time data updates without requiring application redeployments.
    • Cross-Platform Architecture: We ensured the token logic extended beyond web, supporting Flutter for native iOS and Android applications.

    The Result: A Unified Force

    The rebuilt Polaris system transformed how the USSF builds software.

    • Empowered Teams: The system is so robust that Guardians on short-term internships can now spin up fully compliant, accessible applications in weeks rather than months.
    • Total Consistency: Whether a Guardian is on a desktop portal or a mobile tactical app, the interaction patterns and visual language remain consistent.
    • Presentation Kit: We extended the system beyond code, delivering Keynote and PowerPoint assets to ensure the brand is consistent in boardrooms as well as browsers.

    Key Takeaways

    This project reinforced that a design system is an ecosystem, not a sticker sheet.

  • Remediating the Lowdown iOS Design System for Accessibility & Scale

    Remediating the Lowdown iOS Design System for Accessibility & Scale

    Remediating the Lowdown iOS Design System for Accessibility & Scale
    Project Outcomes at a Glance
    + Task Success Rate

    Reduced errors and cognitive load by creating accessible, consistent components, targeting a significant increase in task completion for pilots.

    -Time on Task

    Streamlined layouts and clear navigation aim to measurably decrease the time pilots spend on administrative tasks, allowing more focus on mission-critical duties.

    Accessibility Enabled

    Achieved WCAG 2.1 AA compliance, enabling the app to be used by all service members and meet government procurement standards for the first time.

    My Roles

    • Lead UX Designer
    • Researcher

    Timeline

    8-Week Project 

    Tools

    Figma
    Technical Writing
    WCAG 2.1 Guidelines
    Heuristic Evaluation

    Situation

    This section sets the stage. Instead of just stating the project, frame it as a business problem.

    • Standard Entry: “The project was to redesign the user dashboard.”

    • Senior-Level Upgrade: “Our user retention was declining by 15% quarter-over-quarter, and customer feedback indicated the existing dashboard was a major point of friction. The business goal was to reduce churn by improving the user’s ability to find value within the first 30 days. I was tasked to lead the design strategy for this initiative.”

    Key Senior Elements:

    • Connects the project to a specific business metric (e.g., retention, churn, conversion).

    • Clearly defines the problem from a business and user perspective.

    • Establishes your leadership role from the outset.

    Task

    his is where you define your specific responsibilities and the scope of the challenge. A senior designer’s tasks are broader and more strategic.

    • Standard Entry: “My task was to create new wireframes and mockups for the dashboard.”

    • Senior-Level Upgrade: “My primary task was to define the end-to-end user experience strategy for the new dashboard. This involved not only the UI/UX design but also aligning cross-functional stakeholders (Product, Engineering, Marketing) on a unified vision, scoping the MVP, and establishing success metrics, such as increasing the daily active user (DAU) to monthly active user (MAU) ratio.”

    Key Senior Elements:

    • Highlights strategic ownership (“define the…strategy”).

    • Mentions cross-functional collaboration and alignment, a core senior competency.

    • Includes scoping and metric definition, showing you think about feasibility and measurement.

    Action

    This is the core of your story. Focus on why you did things, not just what you did. Describe your leadership, influence, and the strategic rationale behind your design decisions.

    • Standard Entry: “I started with user research, then made personas, user flows, and wireframes. I conducted usability testing on the prototypes.”

    • Senior-Level Upgrade: “To ensure we were solving the right problem, I initiated a mixed-methods research plan, combining qualitative user interviews with a quantitative analysis of existing usage data. The key insight was that users couldn’t find our ‘aha!’ feature. I facilitated a workshop with product and engineering leads to map out a new information architecture that prioritized this feature. I then mentored a junior designer on the team through the wireframing and prototyping phase, ensuring our design system was applied consistently. To de-risk the launch, I championed an A/B testing plan to validate our new design against the old one, focusing on a primary success metric of a 10% increase in feature adoption.”

    Key Senior Elements:

    • Shows initiative (“I initiated,” “I facilitated,” “I championed”).

    • Explains the rationale behind your actions (“To ensure…,” “To de-risk…”).

    • Demonstrates mentorship and delegation.

    • Mentions influencing process, like introducing A/B testing.

    Result

    This is the most critical section. Quantify your impact with metrics. Tie the results directly back to the business problems you outlined in the “Situation.”

    • Standard Entry: “The new dashboard was launched and users liked it.”

    • Senior-Level Upgrade: “The redesigned dashboard launched successfully in Q3. In the following quarter, we saw a 12% decrease in user churn, exceeding our 10% goal. The A/B test confirmed our hypothesis, showing a 25% increase in adoption of the key feature. Customer satisfaction (CSAT) scores related to the dashboard improved from 3.5 to 4.7. This project directly contributed to a projected $200K increase in annual recurring revenue (ARR) by improving customer retention.”

    Key Senior Elements:

    • Uses hard numbers and metrics (churn, adoption, CSAT, ARR).

    • Directly links design work to business outcomes.

    • Compares results against initial goals.

    Learning

    Show you are reflective and always improving. Discuss challenges, trade-offs, and what you would do differently. This demonstrates maturity.

    • Standard Entry: “I learned that user feedback is important.”

    • Senior-Level Upgrade: “A key learning was the challenge of aligning technical constraints with the ideal user experience. Early in the process, our engineering team flagged a potential performance issue with a proposed data visualization. In retrospect, I would involve engineering even earlier—during the initial ideation phase—to co-create solutions. This experience highlighted the importance of establishing a shared understanding of technical feasibility from day one to avoid late-stage compromises and ship a better product faster.”

    Key Senior Elements:

    • Discusses specific, complex challenges (e.g., technical constraints).

    • Shows self-awareness and identifies concrete process improvements.

    • Demonstrates an understanding of trade-offs and cross-functional dynamics.

Powered by