UX Engineering for design systems

What’s a UX Engineer?

Facilitating design alignment

  • Anatomy : How we reference each element
  • States : What happens during a user interaction
  • Variants : Alternative forms of the component
  • Configurations : Supported options that end-users can choose from
  • Standard/Defaults : What comes out of the box

Establishing constraints

Architecting scalable blueprints

  • Defining the relationship between components
  • Defining the relationship between parent and child components
  • Determining if a variant is a separate component or defined through a prop
  • Establishing what configurable aspects get exposed to an end user
  • Creating and implementing design tokens

Optimizing performance

  • Bundle size
  • Tree shaking
  • CSS over SVG
  • Asynchronous loading
  • Strong types
  • Typography
  • Line length
  • Contrast ratios
  • Minimum tappable area
  • High contrast mode
  • Reduced motion styling
  • Alt text/aria props
  • Keyboard navigation
  • Dark mode support

Writing tests

  • Whether elements did or didn’t render
  • If certain classes were applied
  • The render matches values from the design specs

Providing demos & documentation

Iterative reviews

Advocating for the community

  • Helping users onboard to the system
  • Answering questions
  • Making sure their voice is heard during sprint planning
  • Addressing feedback
  • Guiding users to the right team members

What success looks like

  • Goes with the flow and doesn’t mind throwing away code to make something better
  • Feels comfortable explaining technical constraints and requirements to non-technical audiences
  • Tends to push back on one-off, unscalable designs
  • Puts ego aside to listen to the community AND willing to collaborate on solutions
  • Has intuition on how to add extra polish to an experience

Wrapping up

--

--

--

www.kellyharrop.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Upgrade the UI with iOS 13

Design Trends 2020: Digital User Experience

Who Owns My Logo?

Ask Cityscape: Could I build two ADUs at my house?

Internship Week 11

Four things I learned from testing my first prototype

Learning by Doing: How I Planned my Own Product Idea

‘they said we could not do it…but we did ‘ #4

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kelly Harrop

Kelly Harrop

www.kellyharrop.com

More from Medium

Releasing the new QuintoAndar brand through our design system

Design systems are for the people, by the people.

Design system: How to build a library?

Building a Global Design System — Case Study

Introductory graphic showing a screenshot of the system in Figma