Overview of Design

This is a composite design that focuses on providing users with the maximum number of functions (playback, reporting, search, custom views etc.)

  • Motivation: The motivation behind this design is the desire to incorporate all the tasks and subtasks listed in our GR1 milestone. In this design we attempt to fulfill all tasks with just one application.
  • Design Idea: Since most modern-day music players contain most of the functionalities mentioned in GR1, the design emulates common music play interfaces (iTunes, MediaMonkey etc.). 
  • Scope: From the interviews, it seems that importing new music and reporting to CMJ are the most essential tasks for a music director, while flushing old music is only secondary and can be easily achieved automatically in a digital database. As a result, KaJaM! will focus primarily on importing and reporting (first 2 tasks in GR1), as well as all of their subtasks.
  • Pro: maintains externally consistency and enables users to use knowledge in the world since it is similar to common music players.
  • Con: for less technically inclined users, this interface may appear to be a bit overwhelming and confusing at first.

An overview of the entire interface is shown here, details regarding each component will be explained in the storyboard below.

Storyboard

Sketch

Explanation


  • Lana comes into the station and wants to upload some of the digital media she has received via email, in zip file format
  • This is the Login Screen (Home Screen) for the KaJaM! application Lana will use
  • Lana will need to fill out her assigned username and password, then click on the "Login" button to access the main KaJaM! application

  • Once Lana is logged in, she will have to drag and drop the downloaded zip files into the designated area of the KaJaM! interface
  • This area is located at the right side of the application, as seen in the overview of the design

  • After Lana drag and drops the zip files, a queue should appear in the same space (at right side of the application)
  • The queue displays a list of files that are currently importing (or recently finished importing)
  • The files are imported and listed in chronological order
  • Each file has a progress bar attached to it, indicating how much of the file has been imported into the library already
  • Lana can set a maximum number of simultaneously imports, so that her computer is not overwhelmed
  • The default number of simultaneous downloads is 3, as files finish importing the next file in queue starts being imported

  • After all the files get imported, all new music tracks have been added to the library
  • Lana now wants to take a look at the music tracks she just added, but does not know where to find the tracks exactly
  • She notices there are 2 sections in the library (circled in red in the sketch)
  • The first section "Imported This Session" shows all the music tracks that have been added to the library during the current session, since Lana logged into KaJaM!
  • The second section "Previously Added" shows all music tracks that are considered "New Releases" as well (they are less than 3 months old), but these tracks were added during previous sessions

Select the song to play
Use playback control panel to start/pause the song
Use the Now Playing panel to monitor song progress

  • Now that Lana has found all the music she just imported, she wants to start listening to them
  • She selects a particular song track she wants to hear
  • Lana then turns to the top of the application for the playback control panel, and clicks on "Play" to start playing the selected track (note the position of the playback control panel relative to the entire interface can be seen in the design overview)
  • As the song starts playing, Lana can pause, skip to the next song, or skip to the previous song by using the playback control panel as well
  • Lana also uses the now playing panel at top of the application to monitor progress of the song, and drags the progress bar to middle of the song so she can listen to the chorus only

Double click on song to expand to edit mode
Click on individual fields to modify track information

  • Lana decides she likes the albums she just imported and now she wants to make sure all the information is complete 
  • She double clicks on a song to activate the edit mode, where the track expands to show a thumbnail of the album art, genre tags, and individual fields for each of the song properties (name, artist, album, date imported, release data, record label and play count)
  • Lana notices some songs have bad information such as "Track 01" and "Unknown Artist"
  • Lana proceeds to edit the wrong information for the track by clicking on the individual field, which brings up a blinking cursor that allows her to type in the correct information
  • She can also click on the album art thumbnail, which brings up a file prompt that allows her to upload a new picture as the album cover
  • Lana also adds more genres to the song by clicking on the "plus" button, which allows her to choose another genre to attach to the song
  • If Lana finds a mistake with the genre, she can always click on the "x" beside the genre tag to delete it from that particular track

Add a new view
Select the genre for the new view

  • After a while, Lana notices she is working with some other genres as well because they had recently been imported into the library by someone else
  • Lana does not want to work with the entire library, she is the music director for RPM so she is only concerned about the RPM tracks
  • She clicks on the "plus" sign beside all the existing tabs, which allows her to add a new view to the library
  • A view is simply a "subset" of the library, characterized by music genre
  • Lana selects "RPM" as the view genre and now she can work with all the RPM music only

  • As Lana edits the newly imported tracks, she sees a song missing the "Record Label" field, but she does not know which company the artist belongs to
  • She remembers that this artist has some other songs in the library already
  • Lana looks to the top of the application, beneath the playback control panel there is a "Search" bar
  • Lana types the artist's name into the search bar, all songs matching that artist are listed in her view and she finds the record label's name



  • After Lana spends some more time editing all the newly imported tracks, she looks to the clock and realizes she has to start preparing for her radio show
  • Lana wants to delegate the rest of the tasks to her "Elf", Adam, who can finish editing the imported tracks for her
  • Lana quickly marks the unfinished tracks, or tracks that she thinks need work with an exclamation mark
  • The exclamation mark can be activated by clicking on the first column of in the library, clicking on a blank will place the exclamation mark while click on an existing exclamation mark will clear the field again
  • The "Elf" Adam can then log into KaJaM! at any time and look for all tracks with an exclamation mark, meaning Lana wants him to edit them

  • During her radio show, Lana finds herself with some free time, so she decides she will use the time to submit her CMJ list
  • Lana logs back into the KaJaM! application, enters her RPM view and clicks on the "Plays" column header to sort all the tracks by play count

  • After she sorts her RPM view by "Plays", she can export that particular view by clicking on the "Export this view" button on the upper right hand corner of the application (again, for location of this button relative to the entire interface, refer to the design overview)

  • A dialogue pops up with a preview of the view to be exported, it looks very similar to a regular track listing, except the list is explicitly sorted by "Plays", in descending order (this matches Lana's view)
  • If Lana is not satisfied with the list, she can click "Cancel" to return to her view
  • However, Lana actually finds the list satisfactory, so she clicks on the "Save View" button to save this list as a csv file on her computer
  • There are some minor, subjective changes Lana wants to make to the list, so she can always open and edit it freely in Excel
  • After Lana is done with the list, she can then submit this excel file to CMJ by importing it into their online system

Analysis of Design

Learnability

This design is focused on providing the most functionalities to users, hence the comprehensive interface appears to be quite crowded and busy, which decreases the learnability aspect. However, this disadvantage is mitigated by the fact that the interface is modeled after common music players such as iTunes, MediaMonkey and Spotify. This maintains external consistency, allows users to utilize knowledge in the world, and enables them to get familiar with the interface quickly.

  • Importing Digital Media
    • Facilitates easy learnability due to visual cues and affordances (Drag and Drop sign and Currently Importing progress bar)
  • Media Playback
    • Control Panel is familiar to the average user (similar to other popular music players)
    • Search function is displayed prominently to help users locate specific music tracks
    • Tabbed view design is modeled after popular browsers (such as Chrome, Firefox and Internet Explorer), with a "plus" button that hints strongly that users can create new views.
  • Editing Track Information
    • Not obvious that double-clicking on a track bring up the edit mode, maybe a hover message will be helpful to inform users of this
    • Once the user enters edit mode, many affordances such as blinking cursor, custom tags and datepicker help users realize the editable fields
  • Exporting CMJ List
    • Export view button is displayed conspicuously on the interface, allowing new users to easily realize how to export and save a particular view for CMJ reporting.

Efficiency

The focus of this design is completeness of functions, so aspects of efficiency may have to be compromised to maintain balance with learnability of all the different functions:

  • Importing Digital Media
    • Importing process maximizes efficiency by allowing multiple file drag and drops. 
    • Users can drop a multitude of zip files all at once onto the KaJaM! interface, where they will get queued up
    • Allows simultaneously importing, with the exact number customized by the user
    • Importing is asynchronous, so users may start previewing and editing music tracks while they get imported
  • Media Playback
    • KaJaM! is focused on importing digital media instead of playback, the playback process is not designed for efficiency.
    • No playlist where users can edit their current playback sequence, hence there is no way to add multiple songs to the queue
  • Editing Track Information
    • Editing information is performed individual for each track (cannot edit multiple tracks), exposing a major efficiency disadvantage
    • This is the tradeoff between efficiency and safety, where this design leans towards safety to prevent users from accidentally changing information of multiple tracks
  • Exporting CMJ List
    • The exporting function is simple, fast, and omits trivial information from list generation (CMJ reports do not contain date imported and release date) to maximize efficiency.

Safety

Due to the complexity of this interface, we decided to favor safety aspects of the design over efficiency to prevent user errors midst confusion. Many features of the interface emphasize safety:

  • Importing Digital Media
    • Importing feature has been designed to maximize efficiency through multiple uploads, but it is also safe because we prevent accidental importing by allowing users to cancel the import at any time
    • Hovering over a current import will bring up a "delete" button which will cease the import process and dequeue the file
    • Once the file finishes importing, there is no way to delete the album except through individual removal of the tracks
    • Possible improvement would involve an "undo import" function which effectively removes all imported music from the library
  • Media Playback
    • Playback control panel allows for easy adjustment of play, pause, previous, next, as well as position in the current playing song
    • All user mistakes are recoverable by simply dragging the cursor back or using the playback buttons
  • Editing Track Information
    • Safety is a primary concern for editing track information
    • Double clicking on any track brings the user into the edit mode, which is made obvious by expanding the track into a view with album, genre tags, as well as individual editable fields
    • User can directly edit each field, but the undo function is still applicable in the application, hence tolerating a certain degree of user errors
    • As mentioned in the "efficiency" section, we decided to disallow multi-track editing to avoid user mistakes propagating to a large number of tracks
  • Exporting CMJ List
    • The exporting view function prevents user errors by first giving users a preview of the view to be exported
    • User have to "confirm" and actually save the CMJ list view to disk
    • At any time, if the user notices an error in the export, the "cancel" option is available to return the user back to the main KaJaM! interface.
  • No labels