Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 51 Current »

Today, design and technical ownership for Paragon lives with Adam Butterworth (Deactivated). Adam has transitioned to a new role, Product Design Manager for Engagement Theme and no longer has bandwidth to serve as the technical owner for Paragon.

Moving forward, Adam Stankiewicz will be the technical owner. This document outlines the state of Paragon and its roadmap, followed by the responsibilities of the TECHNICAL OWNER, DESIGN OWNER, PARAGON WORKING GROUP, SQUAD DESIGNER, and ENGINEERING SQUAD.

The state of Paragon

Paragon contains designed and implemented over 47 components (depending on how you count) and a full featured SASS styling framework expanded from Bootstrap. It is documented in Figma and on the technical doc site.

Paragon is an “adolescent” design system

Paragon’s maturity as a design system falls somewhere around stage 3. We’re probably seeing an acceleration in development, but given all the work we’ve put in it might not feel like it yet. We still have a large body of work we can invest in to continue to get more efficiency using the design system.

Components Design & Implementation Status

We currently have about 47 stable components in Paragon. For comparison, there are about 72 stable components in Polaris and a rough count of about 60 in Material React. Additions to Paragon are currently proposed at a rate of about 2 components per month. Adam Butterworth (Deactivated): I expect this rate of additions to continue for the next year or two.

Source data: Paragon Components Status Google Sheet

Architectural Roadmap

The architectural roadmap needs more definition and prioritization, but avenues of investment are currently envisioned under a handful of larger initiatives:

  1. Ease of Access

  2. Ease of Use

  3. Increased Power and Value

Ease of Access

🔥 Make it possible to use Paragon in as many codebases as possible

TECHNICAL OWNER

  • Enable the BD-39 effort to support Paragon in edx-platform

🔥 Make it easy to stay on the latest version of Paragon.

TECHNICAL OWNER

PAR-382 - Getting issue details... STATUS

🔥 Decouple component SASS to increase component modularity and enable runtime theming.

TECHNICAL OWNER

  • Adopt CSS variables for theming

    • Upgrade to Bootstrap 5 (which uses css variables). Note ie11 is not supported.

    • Compile and publish Paragon SASS core, and each component sass independently as separate css files.

      • expect theming to be done via CSS Variables

Ensure Paragon support Webpack 5 module federation

Increase awareness of Paragon’s offerings

TECHNICAL OWNERDESIGN OWNER

  • Develop and run regular Paragon trainings for engineers and designers

Ease of Use

🔥 Identify and fix inconsistencies between the Paragon design spec and component implementations.

TECHNICAL OWNERDESIGN OWNER

  • Catalog and fix implementation discrepancies

  • Fix lingering bugs.

  • Remove aging dependencies like sanitize-html

🔥 Improve the clarity of the Paragon component documentation

TECHNICAL OWNER DESIGN OWNER

PAR-416 - Getting issue details... STATUS

Make the Paragon component api easier to use

TECHNICAL OWNER

  • Develop strict guidelines on React component design in Paragon

    • prop naming

    • controlled vs. uncontrolled component paradigms

    • method of providing escape hatches for customization

    • standard levels and methods of flexibility in components

  • Refactor old components to conform to the new standards

Improve the clarity in design specs about where Paragon components are used

DESIGN OWNER

  • Discover and create better ways to deliver design specs to engineering teams.

  • Share/teach this method to the design team

  • Encourage designers to understand the current state of implementation of components they use in their designs.

Increase the frequency that there is a component that matches our needs

DESIGN OWNER TECHNICAL OWNER

  • Solicit feedback from designers and engineers on what is missing or on what they have made that may help others.

  • Review the OGSPs for product delivery teams and develop a list of potential additions.

Increased Power and Value

🔥 Add internationalization support
(enables language-forward components to be added to Paragon)

TECHNICAL OWNER

PAR-411 - Getting issue details... STATUS

Add i18n support with no dependency on frontend-platform

Add analytics features to clickable components

TECHNICAL OWNER

  • Make Hyperlink and Button work with frontend-platform analytics service out of the box. For complex components (Collapsible) offer an api that can track events at varying levels of component hierarchy.

Reduce the risk of making changes to components

TECHNICAL OWNER

  • Independently publish and version components via Lerna or other tool

    • Per component

    • icons published independently

Componentize common a11y needs

TECHNICAL OWNER DESIGN OWNER

Make it easier to write a new component in Paragon (linting/code generators)

TECHNICAL OWNER

Outline of responsibilities

Design Owner

DESIGN OWNER Adam Butterworth (Deactivated)

  • Drives the design direction of the system.

  • Supports designers using and contributing to Paragon

  • Helps to facilitate Paragon Working Group meeting

  • Fixes or improves design documentation

  • Triage and resolve design bugs

Technical Owner

TECHNICAL OWNER Adam Stankiewicz

  • Directs the architectural roadmap

  • Implements the architectural direction: individually, via blended development, or may escalate to theme leadership to assemble a tiger team.

  • Ensures incoming Paragon bugs are triaged and resolved, as needed

    • Leveraging time from the working group to triage and support the design system.

  • Helping to facilitate Paragon Working Group meeting

  • Ensures engineers are supported in contributing to Paragon

  • Ensures pull requests are reviewed in a timely manner. Any frontend engineer at edX is permitted to perform code reviews at the discretion of the TECHNICAL OWNER.

  • May implement new component designs when appropriate

Paragon Working Group

PARAGON WORKING GROUP (informal group of engineers and designers)

  • Provides feedback and approval on proposed design additions, technical additions, and architectural changes

  • May also assist with the responsibilities of the design owner and technical owner

  • Participate in a support and triage rotation to continue to maintain the design system.

Engineering Squads

ENGINEERING SQUAD

Writing and maintaining UI components is a core part of User Interface Development. We want to foster and encourage a culture of writing components needed by a given team, to a standard level of maturity, and then introducing those components directly into the Paragon ecosystem for sharing and re-use.

This development should be done in tandem with, and under the design and technical guidance of the design team and Paragon Technical Owner to ensure that components are as mature and effective as possible.

  • Squads are responsible for the development of components they need.

    • If a squad does not have the frontend expertise to build a component that they need, they should escalate the need to their theme leadership. We recommend that each theme should have at least one frontend expert. Other options for development include: blended development or negotiation with other squads.

  • Reviews pull requests. Any frontend engineer at edX is permitted to perform code reviews at the discretion of the TECHNICAL OWNER.

Squad Designers

SQUAD DESIGNER

  • Identify needed components in the course of squad work

  • Design and document new or updated components or design system features in Figma

  • Support engineers building components and design system features from specs in Figma

  • Identify Paragon components and design system features used in design specifications

  • No labels