In Q1, the team set out to do a large redesign of Ditto (have you checked it out yet?). This redesign involved building a handful of net new pages, as well as a UX refresh of existing pages. With these changes came a lot of text updates, and a lot of inputs across teams: from product, to engineering, to marketing, to leadership, everyone had an opinion to share on the refreshed product copy.
So how did the team manage this big, cross-functional UX redesign? With Ditto, of course! ✨
The team started with designs in Figma, and our engineering team was able to start building as they wired everything up with Ditto. By connecting application’s frontend with the string files from Ditto’s CLI, the engineering team was able to start building with confidence — even as the copy changed significantly through stakeholder revisions and personalization, manual code changes required of engineers were minimal.
This unlocked parallel workflows like we’ve never seen before: we were able to run congruent workflows between product design, content, and development. It made the product text open and accessible to everyone, and reduced the pressure to have everything “figured out.” We didn’t spend too many cycles at the onset to figure out the words, because we could use Ditto as we went. All the while, Ditto’s collaboration capabilities maintained organized review cycles and clear audit trails to make sure decisions were tracked through the process.
Nobody said it better than Ditto engineer Jordin: “I felt a ton of peace of mind that any copy could be created in Ditto and as long as it was wired up, I didn’t have to make sure that copy was perfect. The copy existed somewhere that it was always accessible for review. People who were spending a lot more time on it could make edits without having to document the parts of the code that I needed to go back and edit manually.”
The Ditto team was able to ship the full UI redesign in about 1.5 months, all the while saving a minimum of 2 weeks by allowing the team to work in parallel. With Ditto, our entire team was able to work in sync, without getting in the way or creating rework. Ditto enabled us to parallelize the workflow between product design, content design, and development, to iterate and get constant feedback on product text without slowing down the cycle.
This was also the first time we were able to bring in different types of stakeholder reviews — we were able to get product marketing input at the end of the project, without the headache of opening a slate of new engineering tickets just for copy optimization.
Not only did the core copy in our product improve, we were also able introduce to new levels of personalization to your Ditto experience. By leveraging variants, we were able to create more copy for specific personas, while our engineers could plug into the Ditto API to simplify handling all the different varying text that personalization requires.
Our product team was able to work much smarter, too: We were able to drastically reduce the threads checking in on this copy, updates. We avoided multiple PRs, endless threads, UI iterations, and UI nits that would've been par for the course just months ago. We automated the copy pull process, to ship copy changes on a constant basis.
“Use all the tools at your disposal — integrate with vscode, Figma dev mode + Ditto dev mode, CLI, API, webhooks. The more integrated with the tools you get, the faster you can move.” — Jrod
“Utilize Slack notifications. It allows developers who aren’t normally in Ditto to have context when something changes, and if that requires a new pull of Ditto text. That combined with our GitHub action allows for frictionless text updates with minimal need for redundant communication steps between content and devs.” — Ash
“Build code abstractions around your Ditto components. This makes it easy to keep text consistent throughout a project, reduce repetition, and extend Ditto's functionality. You can create your own tooling around Ditto; it's flexible enough that you can extend it.” — Kaden
“I felt like a lightbulb went off when we started to lean into Ditto's pluralization capabilities. We were able to rip out a ton of hacky logic designed to compute plurality and replace it with simple in-code references to Ditto components. All of the pluralization complexity was handled on the Ditto side, and the quality of the code we were writing improved massively as a result.” — Jordin
“Ditto components are a superpower for keeping you in the flow of your dev work. With Ditto, you can build components for any text that might need to get updated as you work, so you can be confident that any updates will be included automatically, and get back to doing what you do best — presumably not writing Lorem Ipsum.” — Reed
We didn’t just ship faster and work smarter with this project in Ditto. We also identified improvements, bug fixes, and general quality-of-life updates we could make for you, our users! Here’s a quick hit list of some of the things our engineers fixed as a result of spending so much time in your shoes:
