The product
D-ID is a key player in the Generative AI ecosystem. The app enables users to create videos using an AI avatar that looks, sounds and talks like a human. Creators and businesses can bring their ideas to life and animate the talking avatars to engage and create a real conversation with their audience. Pretty cool!
Opportunity
As one of our users said, one of the keys to success in the AI era is to make such a complex technology easy for everyone to use. And we managed to do that.
Our goal was to create an editor that feels high-end and provides a seamless and simple experience for creating professional-looking videos and we kept on optimizing the experience along the journey. This was not only an opportunity but also a fun challenge.
đ Product of the week December 4th on Product Hunt
đ Best User Experience 2023 Award on A-Team
Process
From launch to 1M downloads
I led the design, closely collaborating with the product team, PMs, and Devs to ensure the way we defined the experience was reflected in the implementation. Starting with an MVP, we delved into discovery, research, and design exploration to define key user flows for the app. It needed to encompass essential features, providing a simple and smooth user experience for video creation.
During the app's architectural phase, I established the Visual Language and Design System as its foundation. We kicked off design with crucial elements to get users in, delivering main screens like Library and Profile, along with a streamlined Signup/Login flow.
Continuously enhancing the user experience, we optimized patterns and fine-tuned features, incorporating personalization and editing capabilities for unique creations, ultimately improving user engagement.
Create a video - Flow:
* Select an avatar from the existing library or create their own
* Add a script by typing, recording or importing audio
* Select a voice, pick a specific accent or tone of voice to match the presenter's appearance
* Generate a video, see credits used, rename and select format
Flows Zoom in
Type, record or import a script
Iâve been iterating to find the most intuitive way for the user to switch between different script input methods: typing, recording and importing. It was all about using the right pattern and promoting the different methods.
* Clicking on âScriptâ takes the user to the script edit page, where they can start working immediately.
* âTypingâ is set as the active mode and users have the flexibility to switch between the methods without exiting the screen or losing their progress. Controls to switch methods are positioned at the top and make it easy to navigate.
* The last method selected before confirming replaces the existing content as users would expect. We added a modal toast to communicate this without being intrusive.
Take a selfie
We selected this feature as a must-have for a mobile experience. Taking a selfie is easy and common for users, and also a way for them to create their avatar.
Visual Direction
In terms of visuals, I anchored design decisions in finding a harmonious balance between human-centric and technological elements. Functional screens adopted a lighter theme with smooth edges for a human touch, while the editor embraced a dark mode with sharper edges to evoke a sense of "AI" technology.
Establishing this foundation, I expanded and refined the Design System to extend the visual language across various products and platforms, thereby elevating the standard for D-ID product design.
Iterations
Goal: Help user confirm their change and navigate between essential and secondary tools
It was all about finding the sweet spot between 'auto-save' happening in the background vs. giving users that extra level of confirmation. We wanted to build the logic and respect consistency.
It was all about finding the sweet spot between 'auto-save' happening in the background vs. giving users that extra level of confirmation. We wanted to build the logic and respect consistency.
