Design Systems

Vivian

I was hired at Vivian as the first UX Engineer, charged with implementing a design system for a startup that helps healthcare professionals find work. With sustained success saving developers time, standardizing UI, and expediting feature work, the company allocated more and more resources. Today, our UX Engineering team is composed of four full time developers maintaining components across both web and mobile platforms.

Instructure UI

While working at Instructure, a Salt Lake based education technology company, I helped build our in-house design system. Open in new windowInstructure UI is now used by hundreds of engineers and millions of users daily.

Components

The following are some strong examples of my component contributions. All components are (at a minimum) WCAG AA compliant, are internationalizable, feature thorough documentation, and have exhaustive unit tests.

• DateInput
  • Open in new windowDocumentation
  • Open in new windowSource Code
• BaseButton (see also the Open in new windowupgrade guide for more details on how I refactored our buttons)
  • Open in new windowDocumentation
  • Open in new windowSource Code
• Button
  • Open in new windowDocumentation
  • Open in new windowSource Code
• IconButton
  • Open in new windowDocumentation
  • Open in new windowSource Code
• Calendar
  • Open in new windowDocumentation
  • Open in new windowSource Code
• Responsive
  • Open in new windowDocumentation
  • Open in new windowSource Code
• DrawerLayout
  • Open in new windowDocumentation
  • Open in new windowSource Code
• View
  • Open in new windowDocumentation
  • Open in new windowSource Code

Accessibility Utilities

Creating accessible software is one of my core values as a developer. Some of my proudest contributions to our library involved creating components and utilities that make accessibility easy to implement for our developers.

• Focusable
  • Open in new windowDocumentation
  • Open in new windowSource Code
• ScreenReaderFocusRegion
  • Open in new windowDocumentation
  • Open in new windowSource Code

Node Scripting

I spent a lot of time thinking about our upgrade process. One of the biggest challenges we faced while implementing our system was being able to improve our codebase while also making changes painless to adopt for our consumers. I created an entire suite of upgrade scripts to keep our consumers on the latest code.

• instui-cli - A command line utility with a well documented interface to make upgrade scripts easily executable
  • Open in new windowDocumentation
  • Open in new windowSource Code
• Prop Name Codemods - I enhanced these to allow for swapping of values, for example changing an enum value of `red` to a boolean value of `true` etc.
  • Open in new windowDocumentation
  • Open in new windowSource Code
• Import Codemods - This allowed us to migrate consumers from default imports to es style named imports.
  • Open in new windowDocumentation
  • Open in new windowSource Code