Native Voice Search

Project:

Proof of concept Voice Search

Company:

Fortune 10 Healthcare Company (under NDA)

Role:

UX/UI Designer

Progress:

Created a high fidelity prototype

Created animation alongside developers

Going into production q4 2024

Goal:

Leverage native voice to text to create an innovative voice search experience

Base future voice assistants off this prototype and flows used here

a collection of screenshots from an older, low fidelity prototype showing a voice assistant

How it started

a screenshot showing the new voice search ui

How its going

Original Hackathon Concept

What would a voice assistant look like for our experience?

low fidelity screenshot of the voice search entry phase

Home

low fidelity mock up of the voice search listening state

Listening state

visual spinner to indicate the app is listening

low fidelity screenshot of the voice search providing visual feedback

Feedback state

query is repeated to user as its heard by the app

low fidelity screenshot of voice search providing confirmation on the vocal input

Confirmation state

user confirms the query was recorded correctly

screenshot of low fidelity voice search navigating users to results

Navigation state

user is navigated to their destination based on query

Several pieces of information such as page contents, brand names, and other information has been redacted to remain compliant with NDAS**

High Fidelity Designs and Flows

Successful search

higher fidelity screen shot of the search entry point, in this case a home screen
a high fidelity mock up of the voice search listening state, providing visual feedback that the app is listening for input

Listening state

this state provides a visual animation to indicate app is listening

a high fidelity mock up of the voice search confirmation state, providing visual feedback that the app has heard the vocal input

Feedback state

this state provides visual feedback as to a successful search, and restate search term

a high fidelity mock up of the voice search navigation state, providing visual feedback that the app is navigating user to results, with an option to correct the voice input and restart the listening state

Navigation state

state where a user is going. allow user to opt out of navigation by tapping “not right?” button

search results for search input

Several pieces of information such as page contents, brand names, and other information has been redacted to remain compliant with NDAS**

Error States

a flow diagram of the error states a user might encounter

Several pieces of information such as page contents, brand names, and other information has been redacted to remain compliant with NDAS**

Permission States

higher fidelity screen shot of the search entry point, in this case a home screen
a screenshot of an ios alert dialogue asking user for permission to use microphone

We used an iOS native dialoguze to allow users to update settings, enabling voice search possibilities

a high fidelity mock up of the voice search listening state, providing visual feedback that the app is listening for input

Several pieces of information such as page contents, brand names, and other information has been redacted to remain compliant with NDAS**

Challenges

Creating an accessible voice search was a challenge, after many iterations we arrived at these designs

After close collaboration with a11y designers, we were able to ensure voiceover would enable non sighted users to use voice search

Bringing the animated waveform to life, from a figma prototype to a coded animation

Exported SVGs and worked closely alongside iOS developers to ensure the SVGs were animated in a way that matched the prototype without impacting performance

Next Steps

QA Testing

Once the build is deployed to our native testing suite, we can ensure the voice search functions as designed, including testing iOS VoiceOver behavior and error states.

Bringing the animated waveform to life, from a figma prototype to a coded animation

This proof of concept was designed and built to act as a foundation for a smart voice assistant. We plan on further search innovation by creating a helpful voice assistant that can help customers navigate our many offerings and take charge of their health.