DEV Community


Discussion on: How do you test a design system?

joelbonetr profile image

You can check the implementation. Design implementation must be approved by the designers or at least a QA. There's no programming here so errors cannot happen, it's reduced to a bad or good implementation of it.

The tests to see if this design system works well for your customers can be made with heatmaps and tracking of the users actions inside your web app, so it really concerns to UX department.

Giving that a design system must be created with three departments or roles, together.

Designers: must create components that interacts well with other components, well looking and that intentionally gives the aspect you need to show on your business to achieve different things, well looking, fresh and so...

UX: must validate this design to see if there's a way to improve it to make the user experience much better or to achieve a specific action (get leads, sells or whatever).

Developers: must translate this designs into a proper code inside the project with performance in mind. If something can be modified a bit to ensure consistency of the code, devs must talk with UX to see this changes aren't bad for this field of study and if it's ok, ask designers to change it.

At this point you can, of course, use JEST, Puppeteer or whatever you like to perform snapshots, records and then analyse them, but at the end the most consistent way for testing it is a QA person that is implied on all this process testing it with different devices and browsers and pointing out things that can be polished from a department or another.

Forem Open with the Forem app