Iterative Wireframing and Testing

To turn the concept into a concrete UI, the prototyping method was used to create wireframes of the tool's main pages.

To improve the fidelity of the wireframes, four iterations of changes were done based on the feedback received from three peer review discussions with the company mentor. The fourth and final iteration was the creation of an interactive wireframe prototype of the concrete UI.

To discover and fix usability issues before starting realising the concept further, the interactive wireframe prototype was tested during two usability testing sessions with a filmmaker and an ordinary user.

Wireframes

Using the Concept Creation phase's findings as a starting point, a user flow was created. This user flow shows how a filmmaker would use the AI music discovery tool to find suitable music for a film project. The following steps were considered:

1. Create new project: The user starts their music searching journey by creating a new music searching session from the tool's dashboard.

2. Provide input: The user describes what kind of film project they are creating and what music is needed so that the tool can use some context on which to base the music suggestions.

3. Explore music results: After the tool has found music suggestions, the user starts browsing through the loaded results and can choose whether to browse one-by-one or from a list view.

4. Filter music results: Optionally, the user can further fine-tune the results by adding more filtering options.

5. Choose music: The user chooses music by marking the songs they liked.

6. Access music: The user reviews in a dedicated page all the marked songs and can download them.

Based on the above user flow, the following final wireframes were created after applying several iterations of peer review feedback from the company mentor:

Wireframes of the "My projects" page with additional pop-up screens.

Wireframes of the "Music results" page with additional states and pop-up screens.

Wireframes of the "Song details" and "Liked songs" pages, alongside the "Download song" pop-up screen.

The wireframes are depicted in grayscale to emphasize the structural layout and hierarchy of elements, without distracting the viewer with colours or detailed visuals. This rough style allowed to focus on the overall structure, placement of elements and the flow of information within the UI. This facilitated discussions and iterations before committing to the final design.

The complete extensive iteration process with all the choices and considerations can be found below.

Interactive wireframe prototype

The above final wireframes were incorporated into an interactive prototype which shows the navigation and interactions of the pages:

Usability testing

The above interactive wireframe prototype was then tested with a filmmaker and an ordinary user. The filmmaker’s feedback was needed to verify how user friendly the tool is when used by professional filmmakers, while the test with the ordinary user was done to see how a beginner would handle the tool. Several small fixes were discovered such as changing the name of a label or placing additional elements, but the most crucial improvements were the following:

• There should be two modes for the tool - one for professionals and one for ordinary users who don't need advanced settings to find music. This change will make the tool more user friendly for both beginners and professionals.

• There should be a toggle to switch between "Strict" and "Relaxed" modes when providing input. The “Strict” mode will make the AI strictly follow the prompt input, e.g. if the prompt says “high happy music”, then all the music results must have “high happy” mood associated with it. The “Relaxed” mode will make the AI give more loose music results, e.g. if the prompt says “very angry music for a tense scene”, then the music results might also feature music that is not necessarily angry but is more suitable for the given prompt.

• There should be an option to select from which library to search music - the tool could suggest music results based on music that is available only on Spotify, for example, or from a royalty-free music catalogue. In the first case, the user will not be able to download the music from Spotify but at least could get music inspiration which can then be used as a song reference input for the royalty-free music catalogue where the user can download the music because it is royalty-free.

For the full usability testing plan and results, see the extensive document below.

As a good amount of usability issues were discovered after conducting these two tests, more usability testing sessions were not needed at this time.

Creating a user flow provided a good overview of the user actions and overall pages. Final wireframes were created after four iterations of improvements based on peer review feedback. A validated interactive wireframe prototype was created which shows how the concept works and what the layout of the pages looks like.

The next step was creating a design prototype to show also the look and feel of the tool and a technical prototype to show the working AI music discovery functionality.