View UI UX
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. From here, the user can navigate to searched song history page from homepage.
We found during usability testing that history and recording features had 100% usability test success at meeting expected number of clicks per task. This gives us confidence in this current design.
As discussed above, the user is prompted to record song on app’s homepage. The app then attempts to record and identify song audio when user presses record button, thus generating exactly 10 seconds of audio. If audio can not be identified as a song, app displays song not found page and prompts user to “Try Again”, restarting the recording flow. During recording, 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 and thus found this to be a potentially useful feature)
This flow begins after user input audio recording is identified as a song. First, the "Song found" page appears, displaying movie titles and years containing the identified song in their soundtrack. This view containts 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 through various apps.
However, 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.
Additionally, 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. Thus, 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”.
Even with these updates, however, we found this interface to be somewhat misleading due to its logical separation of songs and movies. Thus, we went through another redesign during our MVP phase. This is discussed in the final heading below "Our final UI/UX flow for the MVP".
After identifying movies containing recorded song, the user can select a movie to view additional information. This page is contains scrollable movie information and 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). We include multiple icons at the top of the page, including links to home, history, and share song/movie info pages.
It is of note that 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.
However, these discrepancies further influenced our decision to redesign the manner in which movie information is presented in the MVP phase (see "Our final UI/UX flow for the MVP")
After the movie is identified, user can share movie information. The user has the 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.
Due to reasons cited above throughout our UI design, we redesigned the way that movie information is presented during our MVP phase.
- The Frontend records the audio for 10 seconds and sends it to the ML algorithm
- Run the ML algorithm on the backend which will return the song name if the song can be recognized from the audio
- From the backend, send the relevant movie data using the song name returned from the ML algorithm.
- Then, the frontend will display the song name with the relevant movie info.
Since we did not obtain enough feedback for the MVP features from our initial series usability test, we decided to conduct another usability test to make sure our UI/UX design for the MVP functions work well enough. Below are some issues we found after performing a new usability test specifically on our MVP UI.
- Since we have limited our ML training to just the Top 100 movies with their song(s), it turns out there is only a very limited number of songs in the list that appear in more than one movie. So the user didn’t realize that they could click on the single movie title to see view more information about the movie. When we prompt our users to find movie info, they either click the song, or can’t figure it out at all. Therefore, we find that it does not really make sense to show just the single recognized movie on one screen.
- In the original UI testing conducted in class, it was also not clear that users could scroll down on the film page to see more information. So again, we feel like the features aren’t clear to the app users.
- We also found out that some users know movies by posters rather than names, so having to click on each movie to see the poster was a pain point for them. Therefore, we decide to combine the two separate views of returning song name and movie information. This combined display screen is shown below.
Implementation of Song/Movie View
