College Design Language System

Design Process

College Design Language System (CDLS) Component Update/Addition Request

Introduction

This document outlines the design process for adding a new component to the UTSA College Design Language System (CDLS). The objective is to seamlessly update an existing component or integrate the new component into the established design system, ensuring consistency and cohesiveness with the existing components.

Design Process Overview

The design process for adding a new component involves the following steps:

  1. Design Request
    • Stakeholder submits request to the web team through online form or by communicating directly with web team through Teams
    • Information to include in request:
      Client: [Client Name. Ex. Jane Doe, Alvarez College of Business.]
      Component Name (if it already exists): [Ex. Call-to-Action, Media.]
      Project Request: [Description of request. Ex. We require an additional background color variant for the existing component.]
      Date: [Date request is made]
  2. Research and Discovery
    • Gather specific requirements or preferences from the client regarding the component or variant
    • Understand the purpose and functionality of the new component or variant
    • Identify similar components in the existing design system for reference, or to gauge whether an existing component is a viable option to use for the request
  3. Wireframing [Prototype]
    • If necessary, create initial low-fidelity wireframes of the new component, considering its placement and layout within the UI
    • Iterate and refine based on feedback and alignment within the design system
  4. Mockups [Prototype]
    • Develop high-fidelity mockups of the new component or variant
    • Ensure adherence to the design system's visual guidelines and specifications
  5. Client Review and Feedback (Web Team/Client) [Prototype] > [WIP]
    • Present the mockups to the stakeholder for review and feedback
    • Address any feedback and make necessary revisions to the design
  6. CDLS Integration [WIP]
    • Integrate the finalized component or variant design into the CDLS for testing and review
  7. Testing and Validation [WIP] > [Ready]
    • Web team review of component or variant prior to merging to GitHub repository
    • Usability testing to ensure the component or variant functions as expected
    • Validate the component's responsiveness and behavior across various devices and screen sizes
    • Ensure ADA/Accessibility compliance
  8. CMS Integration and Testing [Ready]
    • Integrate finalized component or variant into Cascade CMS
    • Review and testing of component or variant within Cascade CMS to ensure proper functionality
    • Create any necessary base assets and asset factories
    • Sync Data Definition requirements with Component requirements (Notes)
  9. Demo and Training [Ready]
    • Demo component or new features to stakeholder for final approval and training on proper usage
  10. Documentation [Ready] > [Exported]
    • Update “Notes” documentation section of the CDLS for the new component or variant, including usage, code samples and required media guidelines
  11. Announcement/Sharing with all DLS users
    • Showcase new components or variants with all users so they may use them on their own site if they choose to do so