RoverHead.

Accessible Design System in Angular, the Execution.

The how we did it is paramount, in manifesting goals into reality.

Cover Image for Accessible Design System in Angular, the Execution.
Thirumalaa Srinivas
Thirumalaa Srinivas

Measure twice and cut once.


Started with the end in mind.

Started with the end in mind, circles image.!

We wanted the absolute best developer experience for the users. So, we settled after a few trials on a process that worked well for us.

  1. I set up working sessions between the component dev and myself.
  2. Every component started with its own markdown file to document the design.
  3. We put down the ideal developer usage and experience, for the component.
  4. We referenced our existing version, component tickets history and industry leaders.
  5. The states and interactions were then considered.
  6. Once satisfied, we sought feedback from the rest of the dev team.
  7. We also sought the feedback of some key dev community members.
  8. The final design would then be honed, ready for coded implementation.

Maker to maker work, is heavy meta.

The development process.

Started with the end in mind, circles image.!

Once implementation design was documented in place, the coded development of the component’s design moved forward with efficacy.

  1. The component developer would code up the design in the library.
  2. We built a docs app to articulate the usage.
  3. Accessibility of the component was tested, using the various tools.
  4. Unit tests added.
  5. PR raised.
  6. PR deployment links will be ready, through our CICD infrastructure.
  7. Dev review and feedback will be provided.
  8. The deployed link, ticket and PR will then be passed to the a11y test team.
  9. Once approved and merged, the development head code will be deployed at the appropriate url.

By Devs for Devs

Repeat.

Started with the end in mind, circles image.!

The implementation design, development, review, test and close process was repeated for the long list of components.

Ensure every new component either built on top of the others or played well with others.

Our team also channeled the following ethos.

  • Organic, immediate syncs with relevant folks, to iterate, improve and make progress.
  • Periodic working sessions between devs.
  • We would engage the a11y test team in a tandem build-test, on the tough challenges.
  • Regression triage dailies towards the last phases of the development, to drive to closure.

Key Processes

Started with the end in mind, circles image.!

I ensured the team had the following processes in place through this monumental endeavor.

  1. 3 stand-ups a week.
  2. Kanban board.
  3. Dashboard with various perspectives on gadgets.
  4. Implementation design & feedback sessions.
  5. Demo sessions after stand-ups.
  6. Working sessions of varying people cardinalities.
  7. Regression triage dailies, towards the end.

Conviction to figure things out as a collective. Intention to keep moving forward and make progress.


In the next episode, we will go over the abstract of the value we built and delivered for an Accessible Design System in Angular.