Skip to content

View UI UX

Raef Maroof edited this page Nov 14, 2022 · 26 revisions

Final UIUX Flow:

image

Initial Landing Pages:

  • 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 features had 100% usability test success at meeting expected number of clicks per task, and thus remain unchanged.

image

Record Song Audio:

  • 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)

image

Song Identified:

  • 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

image

Song Sharing:

  • 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 when 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.

image

Movie Information:

  • 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
  • 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”.
  • 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.

image

Movie Sharing:

  • After the movie is identified, user can share movie information
  • User has ability to choose which app to share movie info with

image

Clone this wiki locally