Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents
maxLevel2
minLevel2
HIGH-LEVEL FLOW

Collaborators:

Status
colourPurple
titleUI
Status
colourRed
titleUX
Status
colourYellow
titleA11Y
Status
colourBlue
titleENG
Status
colourGreen
titlePM
Status
titleProposer
Status
titleDESIGN MGR

Responsible

Flow

Status
titleProposer

1

Start a component proposal

Identify new UI need and define the use case in a Google form submission or a Component Proposal. Bring it to the UI design team and #paragon-working-group to determine if it should be added to Paragon or a one-off solution.

Status
colourPurple
titleUI

2

Expand proposal into a component spec

Share the spec with the #paragon-working-group

Status
colourBlue
titleENG
Status
colourPurple
titleUI

3

Implement the component spec

Publish the design, as well as UI, UX, and dev documentation. Request QA of the implementation.

Status
colourPurple
titleUI
Status
colourRed
titleUX
Status
colourYellow
titleA11Y

4

QA the implementation

Status
colourBlue
titleENG
Status
colourPurple
titleUI

5

Finalize the implementation, UI UX doc, and dev (technical) doc

Announce and celebrate!


DETAILED FLOW

Step 1 – Start a component proposal

Responsible:
Status
titleProposer
Accountable:
Status
titleDESIGN MGR
Consulted:
Status
colourPurple
titleUI
Status
colourYellow
titleA11Y
Informed:
Status
colourRed
titleUX
Status
colourBlue
titleENG
Status
colourGreen
titlePM

If you need help creating a proposal submit a request (via Google form) to work with a

Status
colourPurple
titleUI
designer.

Before starting a proposal confirm that the need is not already supported. Does a net-new pattern need creating? If there is an existing pattern, does it work for a specific application/use case? 

  • Yes, it works (stop here if checked, and use an existing pattern)

  • No, it needs to get modified

Start a component proposal by creating a child page of “Component Proposals”

Use the Paragon Component Proposal template when creating the page.

Image RemovedImage Added

The proposal should start as a

Status
colourYellow
titleDRAFT
. Work through the proposal states below to take your proposal from
Status
colourYellow
titleDRAFT
to
Status
colourBlue
titleREADY For Review
to
Status
colourGreen
titleAPPROVED TO ADD
.

State

Description

Status
colourYellow
titleDRAFT

The proposal is just an idea. Discussions on the draft serve to gather feedback and help prepare the idea to be

Status
colourBlue
titleREADY For Review
.

Status
colourBlue
titleREADY For Review

The proposal is ready for a review when it has:

  • A succinct use case and purpose

  • Similar components in edX or in the wild (links)

  • At least a wireframe

  • General description of behavior or variants

Proposal Reviews start in person in the Paragon Working Group meeting and continue on Slack if needed. To get on the meeting agenda make a post in the #paragon-working-group channel on Slack.

The group will consider the following:

  • Review the use case from the

    Status
    colourRed
    titleUX
    and
    Status
    colourYellow
    titleA11Y
    perspectives and come to an understanding of the need.

  • Should this component live in Paragon?

  • Determine if the use case is unique. If so, it should remain be a one-off solution.

  • Do we agree on what to name this component?

Reviews can result in moving the proposal to

Status
colourGreen
titleAPPROVED TO ADD
,
Status
colourRed
titleDEFERRED
, or
Status
colourPurple
titleNEEDS CHANGES

Status
colourGreen
titleAPPROVED TO ADD

An accepted proposal is ready for design and engineering work. A proposal is accepted with three approvals (minus the proposer), one from each UX, UI, A11y, and Eng. Once accepted the proposer should begin building out the component spec with UX/UI/Eng/A11y (if they have not already).

Status
colourRed
titleDEFERRED

A deferred proposal should be designed and built as a one-off where it is needed. Move the proposal to a new folder in this space (TODO: when this happens the first time add a folder in the wiki in an appropriate location)

Status
colourPurple
titleNEEDS CHANGES

A proposal needs changes to become

Status
colourBlue
titleREADY For Review
again.

  • Once a proposal is
    Status
    colourGreen
    titleAPPROVED TO ADD
    , work to should proceed to create a component specification.

Step 2 – Create a component specification

Responsible:
Status
colourPurple
titleUI
Accountable:
Status
titleDESIGN MGR
Consulted:
Status
colourRed
titleUX
Status
colourYellow
titleA11Y
Status
colourBlue
titleENG
Informed:
Status
colourGreen
titlePM

Status
colourPurple
titleUI
develops the proposal into a component specs, filling out the component proposal sections. This spec doubles as design documentation.

Share the component spec in the #paragon-working-group channel.


Step 3 – Implement the component specification

Responsible:
Status
colourBlue
titleENG
Accountable:
Status
titleDESIGN MGR
Consulted:
Status
colourPurple
titleUI
Status
colourYellow
titleA11Y
Informed:
Status
colourGreen
titlePM
Status
colourRed
titleUX

Based on the design doc from the previous step:

  • Status
    colourBlue
    titleENG
    : Implements the proposed design and creates dev doc

  • Status
    colourBlue
    titleENG
    :Sends a link to the implementation for designer review

  • Status
    colourPurple
    titleUI
    : Updates the design doc


Step 4 – QA the implementation

Responsible:
Status
colourPurple
titleUI
Status
colourYellow
titleA11Y
Status
colourRed
titleUX
Accountable:
Status
titleDESIGN MGR
Consulted:
Status
colourBlue
titleENG
Informed:
Status
colourGreen
titlePM

QA: Identify bugs and design/implementation issues

  • Async: Use the #Paragon-working-group slack channel to review the implementation  asynchronously 

    • Sandbox (Adam has set up Paragon PR deployments)


Step 5 – Finalize the design and technical documentation & 🥳

Responsible:
Status
colourBlue
titleENG
Status
colourPurple
titleUI
Accountable:
Status
titleDESIGN MGR
Consulted:
Status
colourRed
titleUX
Status
colourYellow
titleA11Y
Informed:
Status
colourGreen
titlePM

Based on the QA findings from the previous step:

  • Status
    colourBlue
    titleENG
    : Fixes bugs/design implementation issues, and ships

  • Status
    colourPurple
    titleUI
    : Makes any needed updates to design spec for documentation, confirming with
    Status
    colourRed
    titleUX
    and
    Status
    colourYellow
    titleA11Y

Announce and evangelize the new design pattern throughout edX!

  • Share in Slack channels (which?)

    • Quarterly roll ups? Theme demos?

  • Have a drink or two (2 drinks per pattern)


See the RACI Matrix for detail on role definitions for Responsible, Accountable, Consulted, Informed.