NCBU Internal Portal for AI Agents

0-to-1 Interface Design for internal AI chatbots.

NBCUniversal’s Prism Organization requested a high-fidelity prototype for a portal for internal AI chatbots. Working with a tight timeline and a new development framework, Shadcn, my role spanned spinning up a new design system and directing designers in creating high-fidelity mockups and prototypes. Later, I transitioned to creative direction and strategy.and guiding design decisions while delegating hands-on design tasks.

Responsibilities

Design System Product Design Prototyping Component Design Project Management

Collaborators

2 Designers 1 Researcher 2 Developers

Date

Nov 2024 - Current

Company

NBCUniversal

Internal AI Agent Portal Homepage

Challenges

The project had several challenges:

Tight Timeline: Deliver an intial design quickly (within 2 weeks) to secure stakeholder alignment
New Framework: Evaluate and adapt Shadcn’s Figma library, which had gaps in common components (Chip) and we wanted to customize the look and feel.
Midway Join: I joined after a few kickoff meetings had been completed and needed to catch up on research and requirements while ramping up design efforts.

Discovery

I purchased and assessed the Shadcn Figma library for clarity, completeness, and adherence to Figma best practices.

Found gaps in common components (e.g., missing Chips), but ensured developer flexibility to customize.

Reviewed prior research and UX sketches to align with MVP requirements.

Attended a research readout to synthesize user insights.
Delivered an initial high-fidelity mockup to align the team on Shadcn’s visual differences.

Key Decisions

As additional designers joined, I transitioned to a strategic role:

Led a "blue sky" ideation session to explore designs unconstrained by the library's current state.
Prioritized Accessibility by requiring MVP meet visual accessibliity WCAG 2.0 requirements as well as voiceover and keyboard navigation.
Guided branding, accessibility, and final design decisions.

Outcomes

Delivered a functional, clickable prototype for the MVP as well as fully documented new components for reuse in AI future products.

Documentation for components, accessibility, and voiceover standards as well as templates for repeating this process for other designers to use.

Accelerated stakeholder alignment and developer onboarding by working with developers to start a Storybook component library that mirrors the new Figma library.

Established scalable design practices for future projects.