View UI UX

Our initial UIUX Flow:

Identisound welcome page appears briefly, before auto transitioning (or user swiping) to the app’s homepage
On app’s homepage, user is prompted to record song
User can navigate to searched song history page from homepage
History and recording features had 100% usability test success at meeting expected number of clicks per task.

User is prompted to record song on app’s homepage
App attempts to record and identify song audio when user presses record button
If audio can not be identified as a song, app displays song not found page and prompts user to “Try Again”
A loading bar is included to indicate progress of recording completion (we found during user tests that 2/7 users had difficulty knowing when to stop recording)

User input audio recording is identified as a song
Song found page appears, displaying movie titles and years containing the identified song in their soundtrack
Multiple icons included at the top of the page, including links to home, history, and share song/movie info pages

After the song is identified, user can share song information
User has ability to choose which app to share song info with
Users had issues finding the button for "open in another app" when it was designed with the plus icon, resulting in 264% error from expected clicks to completion when conducting task “Open song in Spotify”. Thus, we changed the “open in another app” icon to a music icon. This change should be more intuitive when attempting to open the song in spotify or another music app.
Users often shared movie information instead of song information without realizing it. As a result, the task “Share ‘Eye of the Tiger’ with a contact” only had a 14% completion rate. When clicking on the share button, instead of saying just “Share Via”, we distinguish the item being shared by saying either “Share Movie Via” or “Share Song Via”.

After identifying movies containing recorded song, user selects movie to view additional information
Scrollable movie information page displays title, cover photo, director info, general movie info as well as soundtrack information (where layout of additional movie information was easy navigate in user tests as evidenced by 100% success in meeting expected performance at related tasks).
Multiple icons included at the top of the page, including links to home, history, and share song/movie info pages
During user tests, 2/7 users had difficulty realizing you could scroll on the movie information page, causing them to attempt to complete tasks by reading the poster alone. Thus, we added an icon at the bottom of the screen that should indicate that you are able to scroll on the page.

After the movie is identified, user can share movie information
User has ability to choose which app to share movie info with
As mentioned in "Song Sharing and Open in Another App", we distinguish between movie and song sharing through text cues due to users being confused during testing over what was being shared.

The Frontend records the audio for 10 seconds and sent it to the ML algorithm
Run the ML algorithm on the backend which will return the song name if the audio clip is being recognized.
Also from the backend, retrieve the relevant movie data using the song name returned from the ML algorithm.
Send all the information back to the frontend, and the frontend will display the song name with the relevant movie info.