Stash, the investing and banking app with more than 2 million members in the U.S., has scaled quickly over the past seven years.1 From the beginning, the product team has focused on key metrics, including time from concept to code. This metric captures what it means to efficiently ship good products and deliver value to users, as well as all of the roles that were involved in the process — from designers to developers to writers to compliance review.
As a consumer fintech application, clear and compliant text is core to Stash’s product. However, as Stash scaled — the company now counts close to 500 people around the country (they have a fully-hybrid working model) — they noticed a core bottleneck in their concept to code process: the writing and editing of product copy. In fact, with over 14,000 hardcoded strings spanning web and mobile platforms, 9% of all engineering tickets were copy-related.
With over 14,000 hardcoded strings spanning web and mobile platforms, 9% of all engineering tickets were copy-related.
Without a single source of truth, the process of chasing down edits and feedback across projects and comments and design files and pull requests was sucking up time for everyone involved. When describing the team’s process, Devin Wilmot, Stash Design Systems Lead, remarks, “You've all played telephone in grade school, and this is no different.”
A single edit might take 3 hours of time across at least 3 people, with writers going back and forth with the compliance team, designers, and developers. This process happened 10-20 times a week. When they took a step back, the team realized that, if they continued with their current process, it would take 6.39 years to manually audit and review all of their strings. Wilmot found himself asking, “How can we have everyone focusing on novel problems, as opposed to going back and forth checking what was written before?”
Stash evaluated solutions by their ability to eliminate as many intermediaries as possible and ultimately landed on Ditto to handle all of the text in their product — from design to development.
On the design side, the team integrated Ditto directly with their Figma design system. Each text string in their design system is a primitive token in Figma that’s linked to a Ditto content component. Those tokens are organized by purpose and then nested into functional components like buttons, trays, and more. When working in Figma, designers can immediately select on-brand and compliance-approved text variants in Figma. And if the text is ever updated in Ditto, Figma components and designs are automatically updated instantly.
On the developer side, Stash integrated Ditto’s API so that developers could fetch the latest text as a JSON of Ditto text IDs mapped to strings, instead of manually copying over each string from mockups. Additionally, the engineering team built a client called Banjo to work with Github Actions and automatically open pull requests for the updated Ditto string files. With the push of a button, PRs with the latest text changes get opened across 5+ repos and a version gets published to an Amazon S3 bucket. Wilmot describes the solution as “the dream — engineers never have to write a piece of copy again.” Engineer Anthony Maldarelli adds, “Ditto is great because it allows me to work on code and not copy. Separating those concerns makes my job easier and my code cleaner.”
"It's the dream — engineers never have to write a piece of copy again."
The team also determined a naming convention compatible with Ditto’s forward-slash component naming convention and applied it across Figma components, Ditto components, and text IDs used in development: [Purpose] / [Intent] / [String Function]. For example, a component in their Ditto library might be named: action / executeTransaction / addCash. This organization made it easy for those using the text to think about the utility of the text as it was integrated in the product.
With Ditto integrated from end to end, several other teams are also able to avoid the scattered back and forth core to their previous process. Stash’s compliance team is now able to track edits and approvals to text in a single location, and QA teams only have to check the version of text being deployed in the latest release.
Stash estimates that Ditto saves over 12,000 hours of work each year. Additionally, when considering shorter planning, faster review cycles, fewer requests, faster feedback, and reduced meetings, Stash estimates Ditto results in a 20% reduction in their concept-to-code timelines.
Ditto saves Stash over 12,000 hours of work each year and shortens concept-to-code timelines by 20%.
The best part? The ambitious and growing team doesn’t have to worry about scale. Unlike the maze of back-and-forths across roles, projects, and tools that the Stash team previously relied on (which only got more complex with more stakeholders), Ditto’s component system simplifies the copy process into a single source of truth. For the pioneering fintech company—one of the fastest-growing in the industry—this change helped the team execute and innovate faster. Thanks in part to Ditto, the Stash team is able to increase the value they bring to everyday Americans who rely on Stash to invest in themselves and build wealth for the long term.
Ditto currently manages all of the strings in Stash’s product, maintaining text across both design files and web/iOS/Android platforms.
1 Bank Account Services provided by Green Dot Bank, Member FDIC.
This content is for educational and informational purposes only. Nothing in this content should be construed as Investment, Tax, or Legal advice.