<- Back to all posts

Dogfooding Ditto: How our own engineering team launched a full UI redesign 30% faster, by using Ditto

The Ditto Team
May 8, 2024

How Ditto used Ditto

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.”

Let’s talk about the nuts and bolts of what we did in Ditto:

  1. Component Library: The team created a consistent, approved library of messaging for the project with Ditto’s component library. The engineers also heavily used Ditto's Figma plug-in to pull in text components, make quick changes, and review in the context of the designs.
  2. Variants: We built out variants for any product text that we’d be personalizing for our different user types, with interpolating variables included to reduce the amount of code we had to write to handle names, numbers, countdowns, and pluralization. This made the code easier to read and handle for our engineers when it came time to actually build the varying pages. As another wonderful Ditto engineer, Reed, explained: “Variants made our work so much faster because any time I came across personalized text in the product, I knew I didn’t have to handle that because I had pre-written code to cover that.”
  3. Streamlined feedback and reviews: The team centralized all the product copy discussions and decisions within Ditto collaboration features, so everyone on the team could weigh in, give feedback, and suggest changes to product copy on their own timeline. All the while, the Ditto + Slack integration made it easy for the engineering team to monitor progress and track changes with automated alerts, so they could know when it was time for engineering to pull the latest copy.
  4. Automated PRs with the Ditto CLI: By getting plugged into Ditto’s API, our engineer were able to do a quick pull down to see any changes that had been made to product copy, and merge those updates into production in moments, no tedious manual PRs required.

The impact: What we accomplished with Ditto

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.

BONUS: Best practices, straight from the Ditto engineers

“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

BONUS #2: The Ditto “Dogpile”: Product improvements we released because of our own experience

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:

  • Added a new option in projects to view all pages, making it easier to review everything assigned to you in a given project
  • Fixed UI overflow states in the project and frame headers
  • Added the ability to resize the left-side bar for projects and components
  • Improved the “assignment” flows
  • Added icons to show who was assigned something within a card
  • Added project metadata stats for % componentized, % in review, and % final
  • Included names of the last person that edited a project (rather than just the time)
  • 🐞 Fixed a bug in the Figma plugin when you’d be in the middle of an edit only to have the resync finish and the plugin refresh and all edits in progress were deleted
  • 🐞 Fixed a bug in react SDK when using plurals: If the count is zero for a number variable whether using useDittoComponent or <Ditto> component, it would display the example value instead of zero
Success! 🥳 Look forward to Ditto updates in your inbox.
Oh no — something went wrong while submitting the form. Please try again!