Documenting and consolidating design patterns to implement brands' styles consistently and efficiently.
CaaStle is a B2B platform that provides a turnkey fully managed service
for retailers. Our design team creates mockups of what these experiences would and should look like for both our clients and our developers. The challenge in working with different retailers is having to design for each of their brands. Before this project, every implementation of a brand was done manually, meaning every font style, color palette, and photoset were being changed one by one for each screen.
While this takes up a substantial amount of time from us designers, it also creates a wider margin of error. We needed to find a find a way that minimizes error and time taken to complete these implementations so that we could shift our focus to other features of the service.
To build these brand templates, we had to begin by creating a design system that allows us to build quickly and consistently. With defining text styles and color palettes and creating components like headers, footers, buttons, modals, and more, we are able to put together templates as simply as putting together building blocks - almost literally, since Figma's auto layout feature makes organizing components as simple as a drag and drop.
An additional feature of Figma's that helped us build faster is the ability to create variant components, seen here. Every component that has a variety of states has variants, making it easier to choose the base component we need and quickly change its properties and/or state.
Along with our developers, the mockups we design and build are used by our marketing team when speaking with potential brand clients. Because we want our mock ups to look exactly as if the client implemented our service at the time of the meeting, we include real time prices and dates. We use placeholder text to be able to update these accordingly each implementation. There are many instances where placeholders are used so instead of manually updating them, we use one of Figma's plugins by Jackie Chui, Find and Replace. So much time is saved as mock ups go from templates to final deliverables in seconds.
Another Figma plugin we use is Batch Styler by Jan Six, seen above. While Figma lets us define text styles and color palettes, we aren't able to update all of them simultaneously. With Batch Styler, we are able to style both texts and colors to match clients' brands with the click of a button.
Before this project, manual designing and updating would take days and now take only minutes. The amount of time saved allows our product and design team to ideate and build features for both client facing as well as internal services.
Design team: Tyler Young, Ana Hernandez, Cat de Leon