Rene Diaz UX Product DesignerRene Diaz UX Product DesignerRene Diaz UX Product DesignerRene Diaz UX Product Designer
  • Case Studies
    • ULTIMATE EAR TRAINER
    • Delta In-Flight App
    • Teach & Share
    • Positive Grid Bias Pedals
  • More
  • About Me
    • Bio
    • More Designs & Music
  • Contact

MUSE

    Home MUSE

    MUSE

    The Natural Way Of Learning Music

    The Natural Way Of Learning Music

    The Natural Way Of Learning Music

    Company Overview

    Focusing on music educational apps that “that are personalized and go beyond the boring, traditional way of learning to bring music learning to engaging new levels!”

    Objective

    Design a high-fidelity prototype app, with embedded audio to simulate teaching users musical recognition by ear

    Create a lesson IA that offers an Interactive, customizable way of learning music

    Business Goals & Technical Specifications

    MUSE identifies what learners really want, the mising link to lerning songs and developing ear training in applications on mobile platforms and smart devices. Employing anticipatory design and the latest AI technologies the App delivers a customized and engaging way of learning.

    My method was to use design thinking and a user-centered design process to make a product based on a deep understanding of the user's needs, behaviors, goals, and motivations and to empower them with a powerful tool with great user experience.

    Phones

    Problem Statement

    Typical ear training apps quickly jump right into testing your ability to distinguish notes chords or melodies without giving you comprehensive lessons to train your ear. Some might quickly review intervals and give not so useful tips which in the end do not get quick proven results.



    Our users want engaging* ways to recognize melodies and chords so that they can figure out the songs they want to play instantly and hear them in live performances. *engaging meaning non-repetitive, non-passive, and not boring.


    Hypothesis

    The Ultimate Ear Trainer actually teaches you by having you listen to examples you are already familiar with, in engaging ways to get you quick results. Then when you are ready you are appropriately tested of your new learned skills so you can properly advance to new levels and even play ear training games with others.


    We believe that by creating an app that teaches Elton to recognize melodies and chords in an interactive way using songs of his choice, we can help him improve his ability to play the music he hears around him and in his head onto his instrument spontaneously.

    Engaging so you want to practice and improve

    Lessons with songs from your play lists

    Features

    Connect to your Music Libraries : YouTube, iTunes, Spotify, Pandora,

    Sign or Hum Recognition

    Games: Play with your friends

    Looped Listening Exercises

    Sing Into App
    Phone with MUSE Song progression UI
    PLAYER MODE

    Deliverables:

    Onboarding
    Animated walk through of instructions on how to use the app and lessons

    Profile set-up:
    • Layout
      Instrument
      Genre
      Optional assessment & evaluation
      Questions to help customize lessons for users 
      Select music library to be used
    •  
    IA and User flow
    • How to structure the lesson

    What features to include that would benefit the user
    Gamification of lessons

    Design of leader-board (friends vs global in-app users)
    Footer items (3 - 5 items)

    For testing purpose, we used pre-loaded songs while the music library algorithm is being set up 

    Lo-Fi testing from paper sketches to rapid wireframes 

    HiFI UI and Prototypes
    Style guide

    Competitive Analysis Report

    To plan my design direction, I began researching the competitors to better understand what products the target customers are using to solve the problem. I researched over 20 apps, including online courses and asked, what are the competitors doing right, what are they doing wrong, and what strengths and weaknesses are in our own product. What I discovered helped me see how I can create compelling competitive advantages and user experiences that are superior.

    Click Here To View The Complete Competitive Analysis

    Key Findings

    From the 20 plus apps I researched, none of them took time to actually teach how to distinguish notes, chords or melodies. They all just quickly jump right into testing your ability with little or as in most cases, no adequate lessons on how to do so. They claim to be teaching apps, but in actuality they only test.

    User Survey

    Gather quantitative data pointing us to the general direction of the problem.

    User Interviews

    Qualitative approach used to dive deeper into the the survey insights.

    ULTIMATE EAR TRAINER

    The Natural Way Of Learning Music

    Initial User Survey, Interviews and Testing

    User Survey

    Gather quantitative data pointing us to the general direction of the problem.

    User Interviews

    Qualitative approach used to dive deeper into the the survey insights.

    Research Goals

    The goal of the research is to find out the motivation and pain points of ear training, what the users want to achieve from learning music by ear and what would help enhance their learning. (Ear training/ music aural)

    Methodology

    User interviews were conducted remotely. The sessions lasted 30 - 45 minutes and included a short briefing, a user interview session, as well as a usability test of the existing ear training app. 

    Affinity Mapping Insights

    1. Pain points of learning music: It is repetitive and they are not playing what they want to play
    2. Education apps are cost effective, accessible and engaging (visuals and progress tracking) 
    3. I am unable to ask questions with the app
    4. I enjoy collaborating with other users (encouragement, share success)
    5. Users generally welcome gamification idea, but too much might be distracting
    6. The level of challenge must align with their ability
    7. I want to learn ear training so that I can play the songs I like on the spot
    8. Streamlined content
    9. Ear training is good to have, but I am unsure of where to start
    10. I learnt ear training through trial and error (experiential) and through music lessons
    11. I think ear training has to be coupled with practice on an instrument

    Enjoyment

    Users prefer to learn with recreational activities, opposed to focusing on being tested without lessons to fist develop their ears.

    Performance

    Users want to play the things they like alone and/ or in front of others

    Engaging

    Users want to also learn with music they love and want challenges that align with their musical ability

    Click Here To View The Survey

    Click Here To View The Usability Test Metrix Of Existing App

    Information Architecture, User Flow, and Site Map

    The complexity of the Sitemap and Information Architecture was implementing the lesson structure into the design in a way that was seamless and easy to navigate.

    From the interviews and initial user test, I got really interesting and valuable insights about our users that was helpful about the users' tasks and their pain points. We then create an experience map to extract pain points, goals, and persona information. It also helped to depict the user's path through their task in a way that highlights the order of the actions and the pain points they experience along the way. And helped to see how everything fits into the big picture.

    User Flow
    IA

    Persona

    Elton 27 

    Goals and Needs

    Wants to learn to play the songs he likes

    Wants to learn to recognize the melody and chords of the song

    Wants to jam with other musicians

    Pain points

    Finds ear training and music theory boring but he knows it is something he has to get through

    Practice exercises are repetitive and not engaging


    Scenario

    Elton has been learning piano recreationally for a few months through YouTube videos. He has a few friends who play other instruments and he would like to jam with them.  To do this, he needs to be able to identify melodies and chords by ear quickly, and thus, he is searching for a way to learn ear training on his own. 

    He hopes that by doing this he is able to identify what chords and melodies the other band-mates are playing, and quickly play the exact musical ideas in his head on his instrument literally without missing a beat while also having a great time jamming with his friends.





    Problem Statement

    Typical ear training apps and other tools, quickly jump right into testing your ability to distinguish notes, chords or melodies without giving you comprehensive lessons to train your ear. Some might quickly review intervals and give not so useful tips which in the end do not get quick proven results.


    Elton needs an engaging* way to recognize melodies and chords so that he can figure out the songs he wants to play instantly and for live performances. *engaging meaning non-repetitive, non-passive, and not boring

    Hypothesis

    Essential Ear Trainer actually teaches you by having you listen to examples you are already familiar with, in engaging ways to get you quick results. Then when you are ready you are appropriately tested of your new learned skills so you can properly advance to new levels and even play ear training games with others.


    We believe that by creating an app that teaches Elton to recognize melodies and chords in an interactive way using songs of his choice, we can help him improve his ability to play the music he hears around him and in his head onto his instrument spontaneously.

    Our Design Focus

    Unlike other ear-training apps in the market, our focus is NOT to come up with an extensive sound library but to cater to users who have no formal musical background and little ear-training skills.

    Contextual

    Teach users music recognition using songs that they are familiar with

    Proper Scaffolding

    Provides  bite-sized information + experiential

    Interactive

    Include recap sections + games to reinforce their learning

    I then got the team to  brainstorm ideas by doing a Design Studio. We sketchedthe  up simple wireframes to quickly ideate solutions that address customer goals.

    Changes to the existing app:

    • Have a drop down on the heading to switch to different tonal organization (easy navigation)
    • Allow users to set goals/ reminders 
    • Change leaderboard layout from ‘This Week/ All Time’ to ‘Friends/ In-App Users’
    • Recommend users songs that are not in their playlist but of similar genres with the chords that they are learning 
    • Gamification (explore ways to make learning fun)

    Usability Tests 1st Iterations

    6 Participants

    01

    Onborading

    Process


    02

    Profile & Icon

    Layout


    03

    Melody Lesson

    Plan


    04

    Chord Lesson

    Plan


    05

    Game Interactive Design


    01

    Onborading

    Process


    02

    Profile & Icon

    Layout


    03

    Melody Lesson

    Plan


    04

    Chord Lesson

    Plan


    05

    Game Design


    User Test

    Click Here To View The Usability Test Metrix For 1st Iterations

    Usability Tests 2st Iterations

    01

    Onborading

    Process


    02

    Profile & Icon

    Layout


    03

    Melody Lesson

    Plan


    04

    Chord Lesson

    Plan


    05

    Scales Lesson 

    Plan


    06

    Rhythm Lesson 

    Plan


    07

    Games:

    Instructions


    08

    Games:

    Leader Boards


    5 Participants

    01

    Onborading

    Process


    02

    Profile & Icon

    Layout


    03

    Melody Lesson

    Plan


    04

    Chord Lesson

    Plan


    05

    Scales Lesson 

    Plan


    06

    Rhythm Lesson 

    Plan


    07

    Games:

    Instructions


    08

    Games:

    Leader Boards


    Second User Testing

    Interactive Prototypes

    For our high fidelity interactive prototype, I decided to go with Adobe XD because of its newly implemented Audio features that go hand in hand with our ear training app.  We focused on a smooth and delightful interaction design and usability heuristics.

    In the end the interactive prototype helped in our user testing immensely. The users were actually excited that it felt "like a real ear training app". They provided useful ideas and gave valuable feedback.

    Research Goals

    The goal of the research is to find out the motivation and pain points of ear training, what the users want to achieve from learning music by ear and what would help enhance their learning. (Ear training/ music aural)

    Participants

    These are the primary characteristics of the study's participants:

    ·       Age 20 - 30

    ·       Knowledge of at least 1 musical instrument

    ·       Basic to intermediate music knowledge

    Methodology

    A user interview were conducted remotely with the participants. The sessions lasted 30 - 45 minutes and included a short briefing, user interview session as well as a usability test of the existing ear training app. 

    User Insights

    Users prefer to take music as a recreational activity as opposed to an examinable subject (Recreational player).

    Users want to play the things they like alone and/ or in front of others (How to incorporate the social aspect).

    Users want challenges that align with their musical ability.

    Click Here To View The Usability Test Metrix For 2nd Iterations

    Design system, Style Guide and Specifications for Developers

    The complex nature of the app necessitated more than 70 screens covering user on-boarding, playlist and audio setup, lessons, quizes and games and support.

    To maintain consistency and ensure efficient design to dev handover, I developed a modular design system based on reusable components and their states, such as cards, list items, and controls. Every component can be rearranged and combined with others while maintaining design consistency and recognizable UI patterns for the user. 

    In building the style-guide I focused on keeping consistently across the brand:

    Color Schemes,
    Fonts, Typography
    Design Patterns
    Language

    Specifed UI Behaviors such as:

    Onboarding
    Modals
    Error Handling
    Animation
    Accessibility
    Sound Design

    TEST MODE
    PLAYER MODE
    Style Guide

    Prototypes

    As a Product Designer I bring to the table a holistic approach to creating products that offer people a better Life Experience.
    Drawing Sketches
    Like what you see right?
    Drop me a line to grab a drink, to joining forces on a project, or just say hi.

      • Case Studies
        • ULTIMATE EAR TRAINER
        • Delta In-Flight App
        • Teach & Share
        • Positive Grid Bias Pedals
      • More
      • About Me
        • Bio
        • More Designs & Music
      • Contact
      | All Rights Reserved Copyright 2020 René Díaz Product / UX Designer
      • Case Studies
        • ULTIMATE EAR TRAINER
        • Delta In-Flight App
        • Teach & Share
        • Positive Grid Bias Pedals
      • More
      • About Me
        • Bio
        • More Designs & Music
      • Contact
      Rene Diaz UX Product Designer
      Phone with MUSE Song progression UI
      PLAYER MODE
      User Flow
      IA
      User Flow
      IA
      User Test
      User Test
      User Test