[{"id":2772,"title":"Building Wealthfront’s multi-platform design system","permalink":"https:\/\/eng.wealthfront.com\/2022\/05\/10\/building-wealthfronts-multi-platform-design-system\/","content":"\n
Over the past two years at Wealthfront we\u2019ve been building a design system from the ground up across all our frontend platforms: Android, iOS, and web. If you\u2019re a Wealthfront client you may have noticed sweeping, iterative visual changes across our apps as we introduced new components and migrated features to adopt these components.<\/p>\n\n\n\n
At this point, the core design system components have been implemented on all platforms, so we wanted to share a bit about our journey building a multi-platform design system.<\/p>\n\n\n\n
In the past, design patterns, reusable components, and other shared utilities grew organically on all platforms. If this was already happening, why create a design system in the first place?<\/p>\n\n\n\n
An organic, bottoms-up approach led by individual designers and engineers can work well for small, nimble teams but begins to break down as teams scale.<\/p>\n\n\n\n
First, there is no guarantee that components are always being built with reusability in mind, nor that they solve all the necessary product use cases. This can lead to code duplication and extra effort which can result in an overall lower development velocity and an inconsistent user experience.<\/p>\n\n\n\n
Furthermore, when reusable components are built, there is no guarantee that the equivalent components are built on other platforms. For example, if iOS builds a If these reusable components are built on all platforms, there is no guarantee that designers are aware, nor that an equivalent component exists in their design tool: Figma. This can lead to churn redesigning an existing component, which in turn can lead to further code duplication and a fractured user experience.<\/p>\n\n\n\n Finally, even if all platforms have implemented a component and designers are aware of each platform\u2019s individual capabilities, there is still no guarantee that the components are implemented with the same look and feel on all platforms. This too can lead to confusion, asymmetrical effort spent on different platforms depending on the state of the component, and an inconsistent user experience across platforms.<\/p>\n\n\n\n In the face of these growing challenges, we decided it was the right time to begin a concerted design system effort at Wealthfront.<\/p>\n\n\n\n Before immediately jumping into building the design system it was important to set the stage. The design team explored various future states and an overall design direction for the product. This initial exploration directly inspired many of the components that are currently being used in our design system and the current state of the product.<\/p>\n\n\n\nButton<\/code> component but Android and web don\u2019t have this same component, it can introduce more confusion and inconsistency for engineers and designers.<\/p>\n\n\n\n
The design vision<\/h2>\n\n\n\n