How WellSaid Labs Built Their Adobe Express Add-On

Add voice to your multimedia designs and hear from the developer about their team’s experience of extending the Adobe Express platform.

Colene Chow
Adobe Tech Blog

--

A trusted AI platform, WellSaid Labs enables users to turn text into voice-overs in seconds. They provide a simple and easy-to-understand UI through their Studio web app, direct access to the AI voice model through their API, and a wide variety of voice avatars to choose from with different regional accents and performance styles. As a result, brands like Netflix, FedEx, and Peloton are able to create engaging and natural-sounding experiences, saving on time and cost.

WellSaid Lab’s text-to-speech technology is now also available as an Adobe Express add-on, so we caught up with Daniel ‘Dandie’ Swain, senior product engineer at WellSaid Labs, to find out about the team’s experience of building an integration for the Adobe Express platform.

WellSaid Labs’ process of building the add-on

The new add-on is a lighter version of WellSaid Labs’ Studio: It offers the ability to choose from all their voices, create any number of clips depending on the subscription plan, and then use them directly in an Adobe Express project.

“We decided to build for Adobe Express once we caught wind of the app marketplace,” Dandie explained. “We had been in the process of building out a similar integration into another app, so it felt like the right time to invest in creating this experience with partners that have aligned goals.”

To kick things off, the product team carried out a sprint to understand Adobe Express’s component library, app ecosystem, and design guidelines. Taking the code and knowledge the team had gained from previous integrations, they were able to have a working prototype ready within a week. The subsequent review process was equally fast, and the team was able to iterate quickly and find the right market fit for the app.

The WellSaid Labs team also received immediate support from Adobe, which accelerated the release of the add-on further. “In previous integration projects we found that longer review times would destroy momentum,” Dandie remembered, “but because of how quickly we were able to turn around feedback, we knew exactly what to address and submit in a timely manner.”

Digging into Adobe Spectrum components

When the team was working on the Adobe Express add-on, they were already very invested in improving accessibility across the Studio app. So the team was delighted to see the wide range of Adobe Spectrum web components available, including Aria support for creating accessible UI primitives in design systems.

“The components’ level of fidelity and quality when it comes to the look and feel, accessibility, and developer documentation is incredible,” Dandie said. “I’d highly recommend going through the code on the GitHub repo as it’s so readable and well documented.”

Dandie was also impressed by the animation quality and style of the components. “They allowed us to achieve a smooth user experience with out-of-the-box components from the Spectrum library,” they explained. “Even when it came to extending the components to fit our needs, their organizational structure made it easy for us to add simple styles to augment the components.”

WellSaid Labs’ Adobe Express add-on enables users to add lifelike AI voiceovers to their design projects

Putting ethics into practice: A shared focus on responsible AI

WellSaid Labs’ approach aligns seamlessly with Adobe’s own ethos and commitment to both accessible design and responsible innovation. Ethical AI has been at the heart of what the company does from the beginning.

“We take responsibility for the impact of our products, prioritize data security and privacy, and are transparent in our work with our stakeholders,” Dandie pointed out. “Like Adobe, we lean on the principles of Responsible AI to guide our product designs and decisions. We also share a commitment to treating creators and talent with respect.”

This means WellSaid Labs doesn’t create deepfakes, i.e. voices that sound exactly like any specific person — alive or dead. The team won’t clone someone’s voice without their consent. Every voice actor the company works with is compensated for their work and receives ongoing revenue share payments based on how much their voices are used on the WellSaid Labs platform. WellSaid Labs is also transparent about the use of the actors’ voice data and committed to protecting their privacy.

How the development environment compares to other platforms

For Dandie and their team, two factors made building for Adobe Express stand out from other platforms: the rich and open source library of components, and the lightweight development environment to deploy and work within.

“The development environment has been the easiest I’ve worked with, thanks to the documentation and the examples,” Dandie said. “In other environments, the example starter apps to take inspiration from aren’t quite as good, and it’s often more difficult to figure out whether they could seamlessly integrate with our current application.”

As a result, Dandie’s team could very easily get started with sharing in-development prototypes with the rest of the product team for testing. Plus, they enjoyed using the library so much (especially the tools included with React Aria), they’ve even started using some of the components in the Studio app.

Try the Adobe Express add-on for free by creating an account with WellSaid Labs. As part of the trial you get five credits that you can use to make five voiceover clips, which are yours forever.

To learn more about building Adobe Express add-ons and get started yourself, visit our developer site. And to explore add-ons that are currently available, check out our Behance add-on showcase.

--

--

Sr. Product Marketing Manager at @Adobe helping your friendly neighbourhood developer