Today, design Design and technical ownership leadership for Paragon lives with Adam Butterworth (Deactivated)occurs within 2U/edX. 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 is the technical ownerlead. Gabriel Weinberg is the design lead. This document outlines the state of Paragon and its roadmap, followed by the responsibilities of the
| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
...
The state of Paragon
Paragon contains designed and implemented over 47 50 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.
| Iframe | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
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:
Ease of Access
Ease of Use
Increased Power and Value
Ease of Access
🔥 Make it possible to use Paragon in as many codebases as possible
|
| ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
🔥 Make it easy to stay on the latest version of Paragon.
|
| ||||||||||||||
🔥 Decouple component SASS to increase component modularity and enable runtime theming.
|
| ||||||||||||||
Ensure Paragon support Webpack 5 module federation | |||||||||||||||
Increase awareness of Paragon’s offerings
|
|
Ease of Use
🔥 Identify and fix inconsistencies between the Paragon design spec and component implementations.
|
| ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
🔥 Improve the clarity of the Paragon component documentation
|
| ||||||||||||||||||||
Make the Paragon component api easier to use
|
| ||||||||||||||||||||
Improve the clarity in design specs about where Paragon components are used
|
| ||||||||||||||||||||
Increase the frequency that there is a component that matches our needs
|
|
Increased Power and Value
🔥 Add internationalization support
|
Add i18n support with no dependency on frontend-platform | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Add analytics features to clickable components
|
| ||||||||||||||
Reduce the risk of making changes to components
|
| ||||||||||||||
Componentize common a11y needs
| |||||||||||||||
Make it easier to write a new component in Paragon (linting/code generators)
|
...
Outline of responsibilities
Design Owner
| Status | ||||
|---|---|---|---|---|
|
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
| Status | ||||
|---|---|---|---|---|
|
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
.Status colour Green title technical owner May implement new component designs when appropriate
Paragon Working Group
| Status | ||||
|---|---|---|---|---|
|
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
| Status | ||||
|---|---|---|---|---|
|
...
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
.Status colour Green title technical owner
Squad Designers
| Status | ||||
|---|---|---|---|---|
|
...