top of page

Music Listening Guide

Project Brief

Design an application for the music students to have an interactive learning experience of any particular music piece given to them by instructors. The application would be rolled out to university students through McGraw Hill’s ‘Connect’ music platform.
icon-research.png

Requirement Gathering - Workshops

As part of requirement gathering, I participated in multiple workshops with the business and product stakeholders from the client side to understand the requirements, target audience and platform constraints/considerations.
Summary

The expected outcome of the project is a music player for a specific piece of music, which displays annotations (notes containing text and some images) in sync with the section of music playing. The Listening Guide combines text and visual cues to guide students through a piece of music as they are listening to it and teaches them to listen critically.

Target Audience

  • Listening Guides (LGs) are targeted at undergraduate college students who would study Music Appreciation via MHE's Connect Music platform. These students typically take this course to fulfil a General Education requirement (i.e., not their major). Most of them are enrolled in on-campus classes that include an online component, although some are enrolled in online-only courses.

  • Students do the majority of their personal music listening on mobile phones. In addition, there are many parts of the world where phones are the primary—if not the only—platform students use to access the internet. They wanted the Listening Guides to easily adapt to—and take advantage of—these trends.

McGraw Hill’s 'Connect' Platform Study

Platform study was essential to understand the possibilities of creating the Listening Guide within “Connect” ecosystem, where already multiple content tools were hosted by McGraw Hill and is been used by universities across the world.
Different modes to be created as a platform rule

  1. Author mode

  2. Instructor mode

  3. Student mode

  4. Instructor/Author preview mode

  5. Post submission mode

Generic User Personas of any 'Connect' content tools

  1. Authors: They create content in “Connect” platform, who are generally the SMEs of the subject and are mostly in-house associates of McGraw Hill.

  2. Instructors: They use the content created by authors, might do few edits/tweaks allowed specifically for the tool, create courses/assignments using these content and give it to students in their respective class.

  3. Students: consume the content by reading or interacting with the content, sometime through answering and submissions.

Existing Connect Music

There was a music library already existing in the connect platform. This library had the capability for SMEs/Authors to upload a music piece, and add a separate annotation document for the student to refer any important information on any portion of the music piece. But, for a student, the music player provided and the annotated content were not synchronised to each other as they were accessible from different navigation points. A sample annotation document is shown below:

Screenshot 2022-01-12 at 9.18_edited.jpg

User Research - Workshops

The user research was planned and proposed by me, being the UX researcher, facilitated by the product owner from McGraw Hill and was conducted over call with the user contacts we received from McGraw Hill's associated universities. Participants are as details are as below:

  • 5 music professors who teach and engage music students in their class.

  • 3 SMEs from McGraw Hill's internal team, who are incharge of uploading music piece and the annotation document.

  • 10 music students who access the existing music library from connect.

icon-findings.png

Key Findings

Generic:

  1. The number of students who take music as one of their subject are much more (85%) as compared to the students who take music as their major (15%).

  2. The students do use smartphones / tablets in the class for their academic purposes and it is mandatory in most of the universities in US. Almost all US universities have digitally enabled class rooms.

  3. Professors share the music piece from the connect music library. This will have an audio file and a PDF annotation document. The annotations are downloaded to learn information at important timestamps of the music piece.

  4. Each stanza and every note of the music piece might have important learnings for the students.

  5. The details in the document are not just explanation in plain text, it also have image files to explain certain aspects.

Pain Points

  1. A student spends enormous amount of time to go through the audio and the annotation document in parallel, due to the lack of synchronisation.

  2. Professor finds it difficult to synchronise audio file and annotation document in a class room scenario while teaching, even if the class is digitally enabled.

  3. Students generally ask a lot of question to the professor on a given music piece and on individuals notes/time stamps. At present it is difficult to ask question and get answers, as they need to pin point to a particular timestamp

  4. Students do lot of discussions around a music note and are very much into peer learning. At present it is difficult to have a discussion w.r.t a timestamp.

  5. Students do listen to the music pieces at their free time or when they are at home, but usually waits till the next music classes to get any doubts clarified, either from their peers or from the professor.

  6. Language of the annotations are an issue for few students and also the English speaking students find it difficult to learn music piece from a different language.

  7. Conducting an assessment/test and getting response on a given music piece is not possible and is identified as a requirement from professors

Persona

Persona 1 - Student
LG-Persona1.png
Persona 2 - Instructor
LG-Persona2.png
Persona 3 - Author
LG-Persona3.png

Solution Overview (Work Flow & Feature Requirements - High Level)

Authors (SMEs) of McGraw Hill

Add title of the music,

general and background information

Upload music piece

Create sections for annotating

Add notes/annotations on specific sections

  1. Author should be able to upload the music piece

  2. Author should be able to add annotations at specific sections/time stamps, and later edit/delete if needed.

  3. Author should be provided with rich text editor for any formatting needs

  4. Author should be able to add music notes in multiple languages so that student can switch to any language of their preference

  5. Author should be able to add special characters related to music

  6. Author should be able to add title of the music, general information, background information etc.

  7. Author should be able to provide links of the song to any external websites so that student can purchase it from there

  8. Author should have the ability to preview the content being authored

  9. Author should have the ability to publish the content once authored

Professors - Instructors

Select the content

Assign to students

Teach students

Comments, Discussions & Answer any query

Test & Assessments

  1. Professor should be able to create a music course  - search and add any music, assign the music to students of his/her class.

  2. Professor should be able to monitor the progress of student's learning and activity

  3. Professor should be able to add comments/instructions on any given timestamp of the music

  4. Professor should be able to respond to any query of the students

  5. Professor should be able to conduct tests and evaluate students

Students

Select the assigned content/song

Listen to the music, read & learn annotated content, and other information

Comments, Discussions & Ask a question

Test & Assessments

  1. Student should be able to listen to music piece

  2. Student should be able to read the annotations in different sections without hindering the music piece played

  3. Student should be able to comment on any timestamp, respond to a comment, ask a question to the instructor or peers and if needed anonymously as desired

  4. Student should be able to read the background / history of the music piece, purchase or download the music piece from Amazon/Spotify etc.

  5. Student should be able to take part in a test conducted by the instructor

Information Architecture

A detailed analysis of the workflows and features resulted in identifying logical grouping of the information. The Information Architecture was created to get a birds eye view of the student application.

Authors (SMEs) of McGraw Hill
LG-IA2.jpg
Students
LG-IA1.jpg

Final Designs

The designs in the documents below are output of more than a dozen of iterations on the wireframes and eventually the UI Designs and additionally based on feedbacks from the stakeholders as well as user (Authors, Professors & Students) on multiple phases of the iterations. Key decisions made during the design phase was are below:

  • Instructors would have access to both Author and Student mode, as part of the standard platform rules and the access configurations allowed. Therefore separate UI was not made for instructions.

  • The assessment/test part was decided to keep outside the Listening Guide console as 'Connect' platform already have capabilities for assessment, collecting responses, capture and manage student score etc.

​

A usability study was conducted with 30+ students to see how they respond to the UI, how they were able to perceive the information, and how easily they could complete few given tasks. Another study was conducted with the in-house McGraw Hill authors to see how usable the authoring side was designed. There were few iterations made on the visuals as well as functionality based on their feedback.

Author Mode Designs
Student Mode Designs
icon-findings.png

Conclusion

The process I followed during the discovery phase of the project helped me to have close interaction with the users, and thus capture few of the critical issues/requirements. This is one of the favourite project because of both the process and the UI outputs. The new design flow from authoring to consuming the music increased the experience for the users tremendously as per the responses received after the launch of the product.

​

The in-house UX department of McGraw Hill appreciated the designs very much because of the novel interactions introduced in the UI. Few of the highlights are listed below:

  1. The way of dividing music by pin-pointing at a time stamp for adding notes/annotations. (Author)

  2. Moving the divider line left or right by dragging. (Author)

  3. Deleting a section/subsection from the player itself. (Author)

  4. The display of comments as dots in the music player, and how it get highlighted as in when the player reach that particular timestamp (Student)

  5. Vertical display of the annotations of a sub section and left/right swipe navigation to read the annotations in other sections/ subsections. It also allows navigation between the annotations in different sections/subsections without hampering the music played (Student)

  6. The re-sync feature (Student)

  7. The toggle feature for different languages (Student & Author)

bottom of page