Screen Component Design System

Production Designers at Square build and localize many screens at a given time. We grab all of our content from a fake item library that holds all of our info for 11 different locales that the screen will have to be made in. We have 3 main products that run on 4 different devices. And each one of those devices has a set of play flow screens. There are about 200 screens in a full set of screens for a product in all locales, and most of the time we will have to build out for two products. So when we build out these screens there is a lot of copying and pasting going on.

For one item name, it will show up 11 times in a set of Retail Product screens across all devices and different types of screens for one locale, then we would have to do that for the next 10. That's 121 times placing that item name across all devices, screens, and locales. That’s just the text, we will also have to go in and add the image too. And all of that is just for one item, so you can see it can add up very quickly. Most of the time we have to build out a set of screens for two products our Square Point of Sale and then Retail Point of Sale or Restaurants Point of Sale. So with this system we only have to place our content in once for each locale then we duplicate the screen we just placed the content in and it will carry all of the info to the next screen. If there is ever an update that was to come like a color change or font update, would only have to update the main component once and that change will then show on all screens made from the component.

Worked with another team to build in some features that some of the other products won’t really show. For the Retail Point of Sale screens sometimes they will need to show a return cart on the screen so I built in a feature to just that by adding a toggle you will turn on or off.

Below are some samples of the design system being used.