I was hired at Chatham Financial as an intern on the design system team. This team maintained internal tools focused on keeping the look and feel of their products consistent. My primary role was to contribute to their component library by writing code. I also worked in Figma with UI designers to improve the design of several components and pages.

My main task throughout my 10-week internship was to address issues from a backlog for the component library. These issues were generally either bugs or feature requests submitted by developers using the component library throughout Chatham. Over the course of my internship, I created, added features to, or maintained 15 components, making 28 changes. These changes ranged from simple 30-minute bug fixes to week-long component overhauls.

Of these changes, I spent the most time working on their date picker and date range picker components, making three changes:

• Adding keyboard navigation to the date picker
• Adding keyboard navigation to the date range picker
• Updating the designs of both components

First, I worked on adding keyboard navigation to the date picker components. Prior to tackling these issues, the components had popups that were hidden from accessibility tooling and keyboard navigation. This posed several accessibility and user experience problems, including:

• The component becomes significantly harder to use for people who can’t or don’t use a mouse.
• Users familiar with keyboard navigation patterns will be frustrated by the components’ lack of support.

Adding keyboard navigation took a significant amount of time and effort because it came with many considerations. For one, the functionality should follow best practices and common patterns. I followed the ARIA Authoring Practices Guide while working on these issues to ensure my implementation met the gold standard. My implementation also had to be accessible, so all Chatham clients would be able to use the components easily. For example, visual indicators such as focus and selected states had to be clearly visible (i.e. meet a minimum standard for contrast and spacing). I worked with the screen reader NVDA to optimize the components for screen readers. I also wrote a custom solution for “focus trapping,” where keyboard-based focus is contained within the popup once the user focuses into the popup. This ensures that the keyboard users (and particularly screen reader users) won’t get confused by accidentally leaving the context of the popup while expecting to navigate within the popup.

These new features needed to be tested extensively, to ensure they work both at the time of writing the code as well as when future changes are made. I wrote dozens of unit tests in Jasmine for these changes, as well as refactoring many existing tests and deleting many that were obsolete.

I also took initiative to update the design of their date picker components. Originally, I noticed that they had a design in Figma that improved upon the version that had been coded. My initial plan was to simply implement this new design—however, I realized that it actually could be improved further. I collaborated with UI designers to make these improvements in Figma, then I implemented the changes in Stencil and SCSS.

I also spent around 2 weeks helping with Chatham’s implementation of design tokens^[1]. Their design system suffered from inconsistencies between designs and implementations, largely stemming from not having a system for variables; design tokens were an attempt at fixing this problem. My role in this process was to create a system for automatically transferring design tokens in Figma to variables usable by our developers.

Originally, I was given some research done by another employee into how such a system should be designed, weighing several different options. After doing plenty of my own research, testing, and talking to my mentors, I decided on the following system: a GitLab pipeline that runs daily, fetching variables from Chatham’s design system Figma file and converting them into SCSS variables. The pipeline then compares these variables to the most recently published package; if they’ve changed, it then uploads a new package.

The system I created came with several benefits:

• It automatically keeps the code up to date with UI designers’ decisions, while leaving the flexibility to manually run the pipeline in the case that an update is needed immediately.
• It is flexible, accounting for new variables and variables with different units, as well as future light and dark modes.

[1]

design tokens: "...[a representation of] the small, repeated design decisions that make up a design system’s visual style.” (Material Design). They’re essentially organized variables for color, font styles, sizes, etc. ↩

While my experiences from freelancing, schoolwork, and personal projects made me comfortable with TypeScript, frontend frameworks, SCSS, and more, I also had to overcome many challenges.

My greatest challenge was unit testing. I had only a surface-level understanding of unit tests from schoolwork, so throwing myself into a large project with complex unit tests was difficult. I spent a lot of my time learning syntax, understanding best practices, and debugging many tests.

Adding keyboard navigation to the date pickers was also particularly challenging. I had to try several different approaches before finding one that was best suited for Chatham’s needs. It also tested my knowledge of accessibility, Stencil and frontend frameworks generally, and TypeScript.

I spent a considerable amount of time creating a system design for the design tokens project as well. Without any template and very few examples to pull from, I had to find answers to questions like: How will Figma updates feed into code? What libraries do we need? What’s the best way to name things so that they’re understandable for designers and usable for code?

Finally, I had to learn how to use GitLab pipelines for the design tokens project. I had very seldom worked with pipelines before, so almost everything I created was new to me. I used examples from Chatham, researched, and talked to my mentors extensively throughout the process.

Overall, my experience at Chatham was incredibly rewarding. I learned much more than I had expected in such a short time frame. I deepened my knowledge of TypeScript, shadow DOMs, ARIA and accessibility, Stencil, SCSS, Git, and Figma. I also gained a working knowledge of pipelines, unit testing, and design systems. Additionally, I was lucky enough to work with talented, knowledgeable people, so I learned a lot about asking good questions.

One of the most valuable takeaways I had from working closely with experienced designers was to materialize every idea. When I first saw their Figma files, I was shocked to see how many ideas they would put down for one problem. I realized by watching and trying myself that it’s often easiest to generate great ideas when you’re not afraid to try everything.