The process of designing Voice Recognition Manager

As you can see from the picture above, our first version is pretty simple. The empty status (left) consists of only one default voice file on the file list. When it is detecting your voice (center), the animation only shows on the left side of the page. It does not refer to the sense of searching within those voice files. And the search result (right) also seems a little bit bland. Besides, the color of those files does not represent the right status visually. A light gray color usually stands for a disable or an unavailable status.

Since the voice AI detection system is the key function of our product, we had some discussion about how to improve the experience through better visual design and interaction

Laboratory style
First, we started with the layout. Removing the huge white spaces replaces with scientific feeling to make the visual story more compelling. 

Empty status
Instead of hiding all items on the list, those empty boxes help users understand what they will be able to do once it has content. Users can click on an empty box to add a new voice file directly.

Feedback
Motion confirms voice analysis and shows how many percentages much with the list items.

See for yourself!