# Voice Assistant Interface Design Examples

| What to keep in mind 👍                                                                                                                                             | Avoid 👎                                                                                                                           |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| Decide what kind of information your chatbot will collect from users. This will help you determine what kind of UI elements you’ll need to include in your chatbot. | Too many messages or too much information in the chatbot’s initial greeting. This can overwhelm the user.                          |
| Think ahead about how users will interact with your chatbot. Will they be typing in questions or commands? Or will they be clicking on buttons or menus?            | Relying on user input messages without clear prompts, buttons, and instructions. It makes chatbots confusing and difficult to use. |
| Test your chatbot UI with real users before you launch it. This will help you detect bugs or usability issues that you didn’t anticipate.                           | Chatbot conversation flows that are too complex and try to solve too many problems all at once.                                    |

## **Design Examples on** [**Figma**](https://www.figma.com/community)

<figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2FZf8Azg8GtmoaDyxLx35E%2FScreen%20Shot%202024-03-08%20at%2009.01.43.png?alt=media&#x26;token=7bf7a21f-93e2-4c5e-9f7e-30579a97387d" alt=""><figcaption><p>By <a href="https://www.figma.com/@miquido">Miquido Design</a> and <a href="https://www.figma.com/@filryg">Filip Rygucki</a></p></figcaption></figure>

<figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2FmaKYNzp9AztgzUkX1eio%2FScreen%20Shot%202024-03-08%20at%2009.08.04.png?alt=media&#x26;token=dec87495-4ace-433a-a4b8-876d232f9511" alt=""><figcaption><p>By <a href="https://www.figma.com/@uimrhraju">Mrh Raju</a></p></figcaption></figure>

{% embed url="<https://www.figma.com/community/file/1316069776447695879/brainbox-ai-chatbot-mobile-app-full-100-free-ui-kit?searchSessionId=lthyv7tu-yi9dopf25yc>" %}
By [Debiyaq](https://www.figma.com/@UiDiv)
{% endembed %}

{% embed url="<https://www.figma.com/community/file/1248969555006205609/chatbot-ai?searchSessionId=lthz05to-n98ulal2h6>" %}
By [Jaxit Chavda](https://www.figma.com/@Jecky)
{% endembed %}

{% embed url="<https://www.behance.net/gallery/190768319/AI-ChatBot-App>" %}
By Alexandra Shleynova
{% endembed %}

{% embed url="<https://www.behance.net/gallery/187051735/AI-Chatbot-Mobile-App-Branding-and-Landing-Page>" %}
By Bato Web Agency
{% endembed %}

## Browse Community Designs

Browse here for other App UI Templates

* <https://dribbble.com/>
* <https://www.figma.com/community>
* <https://www.freepik.com/>

## **Example Voice AI Platforms**

### Amazon Alexa

{% embed url="<https://www.youtube.com/watch?v=gLyY6du6dHA>" %}
Video by Amazon Alexa
{% endembed %}

<div><figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2FJvQE2KZ8S0wDuDCjKg0E%2Fhow-to-enable-alexa-skills-2.jpg?alt=media&#x26;token=689bbb74-f8bb-424f-b6fe-f1c5ef671b55" alt=""><figcaption><p>Alexa Skills and Interface</p></figcaption></figure> <figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2F6vm7h8TO9UZzwhhnLPLU%2Fcegf6zxxx7171.webp?alt=media&#x26;token=1603b2e1-3d96-484a-9dc6-b8cc8dfe5971" alt=""><figcaption><p>Suggested Prompts</p></figcaption></figure> <figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2FJ0y23jXdY3qK18E1oZPI%2Fwhy-is-alexas-smart-home-skills-in-japanese-i-am-also-v0-awqozsc0jdz91.webp?alt=media&#x26;token=38395386-596a-4912-98cc-c500c21bfce7" alt=""><figcaption><p>Alexa Skill Store</p></figcaption></figure></div>

<div><figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2FJJGEDjBpGLXA5oZsa4aZ%2F317018-1280.jpg?alt=media&#x26;token=612aeae7-9853-4a50-873b-23461653ee76" alt=""><figcaption><p>Music, Weather, Shopping List Display</p></figcaption></figure> <figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2F7aa9PoMJLSrcHcUW5j9G%2Fskills1.jpg?alt=media&#x26;token=f7640d90-084d-4d6e-b4ff-2c5813286c3a" alt=""><figcaption><p>Home screen - Customizable</p></figcaption></figure> <figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2F4UVHlUbcSeXDBPUOOsHZ%2Fuk4tras7ky561.jpg?alt=media&#x26;token=351e205f-5ce0-435d-862c-544f39aafbdd" alt=""><figcaption><p>More Features List</p></figcaption></figure></div>

### Microsoft Cortana

{% embed url="<https://support.microsoft.com/en-au/topic/what-can-you-do-with-cortana-in-windows-f57ef46f-716a-9940-a8fc-09b3433d05ea>" %}

### Walmart Ask Sam

{% embed url="<https://www.youtube.com/watch?v=z8QmxfZSLD8>" %}
Video by CBS Philadelphia
{% endembed %}

[**Features:**](https://corporate.walmart.com/news/2020/07/29/helping-associates-succeed-at-work-while-elevating-customer-service-safety)

* Store Maps
* Price Look-up
* Product Locator
* Check Email
* Store Sales Information
* Printing
* Birthdays / Anniversaries

<div><figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2FLJYZEyTVr82iHrTScg8a%2Fask-sam-on-the-me-app-this-is-what-my-ask-sam-does-i-cant-v0-bef17gxy550b1.webp?alt=media&#x26;token=0e8ed608-af63-4325-9b83-0ddeae03cd29" alt=""><figcaption><p>Text Conversation</p></figcaption></figure> <figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2FtCCrHbdFlCQq498fC6dq%2Fme-ask-sam-struggling-with-basic-words-is-so-annoying-v0-b4l0elcg1wlb1.webp?alt=media&#x26;token=9d63b894-5009-447f-b2dc-2704c192820b" alt=""><figcaption><p>Search for Product</p></figcaption></figure> <figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2FotY6uLlLH5DqfIR6ikcS%2Fu3bn3gaom1c71.webp?alt=media&#x26;token=304d9c5a-9f22-4849-8d94-871c336380aa" alt=""><figcaption><p>Calendar/Schedule Retrival</p></figcaption></figure> <figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2FPwqYGXbrvXTRSmxEPkm0%2Fplaying-around-with-ask-sam-v0-w3xzwh21htoa1.webp?alt=media&#x26;token=b729379d-5921-4cad-8853-40fdf74b76e9" alt=""><figcaption><p>Search for Product 2</p></figcaption></figure></div>

<div><figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2F4ePlJQKEptqFaqwZlw5i%2FCvud2TylwOI_NZeF36f8NHAsxlhOtR1Oe6kE9sWTBQQ.webp?alt=media&#x26;token=cc37fc25-d0ac-4ef6-b09d-36bfb487877b" alt=""><figcaption><p>Covid Self Assessment</p></figcaption></figure> <figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2Fayyafpd6dk32wFwun0sg%2Fview-other-peoples-schedules-v0-buguu0x2atgc1.webp?alt=media&#x26;token=ccedd836-179e-4d52-a978-89f1838782b4" alt=""><figcaption><p>Team List</p></figcaption></figure> <figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2FIdgMRnOZ3wcPs0euXm0f%2Fhas-anyones-used-the-me-app-to-clock-in-idk-what-happened-v0-1i0v60t1u8nb1.webp?alt=media&#x26;token=b9088319-422a-4c57-bc5e-baf6d9831186" alt=""><figcaption><p>Store Shift Summary</p></figcaption></figure> <figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2FwyagAfvWgIz4FVYPlX1V%2F643x0w.jpg?alt=media&#x26;token=9fe557fe-2f45-49a4-9c6c-768d811574e9" alt=""><figcaption><p>Feature List</p></figcaption></figure></div>

### Bank of America - [Eria](https://promotions.bankofamerica.com/digitalbanking/mobilebanking/erica)

<div><figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2FWjCbNZUsefNuMtn0PJN1%2FImage_option1_v2.jpg?alt=media&#x26;token=58beeb75-3744-400f-9111-ed0237b3cc2c" alt="" width="563"><figcaption><p>Suggested Infocards</p></figcaption></figure> <figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2FlxiTN8Yc35XwuWElSK45%2FBAML-mobile-app-chatbot.png?alt=media&#x26;token=fcf9d70e-5d93-462d-a4bc-c41ef4ebb549" alt=""><figcaption><p>Graphs and Diagrams</p></figcaption></figure></div>

<figure><img src="https://3796124335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw0XARqi8dnIyHLYPelcu%2Fuploads%2FcoH9BwCeG2F6e1kE3D9j%2FSome-of-Ericas-features.webp?alt=media&#x26;token=188fb763-d5a9-4b34-a0d8-98068fcc73dd" alt=""><figcaption><p>Features of Erica</p></figcaption></figure>