top of page

Chordable iOS Business Planning & Design & Development

September - December 2023

The team was tasked to develop an innovative iOS app aimed at addressing a niche market gap while contributing positively to the community. Over the course of a semester, we meticulously planned, designed, and developed an application for guitar beginners. This endeavor culminated in a presentation before a distinguished panel of judges representing Capital One. Out of a competitive field comprising 21 teams, our team secured an impressive 3rd place and a category award for the Most Educational App. 

Why

The learning market for instruments does not present an effective solution for online learning. Especially for guitars, being the #1 instrument people want to learn, do not present an app with a one-stop-shop platform.

How

Design

  • Figma

Development

  • Swift

Project

Mobile App Development Course (67-443)

Team

Ariel Kwak

Minjoo Kim

Owen Gometz

UTILIZING THE MOBILE ENVIRONMENT

The Mobile Mindset

This app would be a perfect guitar learning platform for individuals who are not motivated or do not want to go through the hassle of taking lessons from someone. Not having to find a teacher, schedule a meeting, waste a lot of money, and go around carrying the guitar, these problems could all be solved by our app. The app will take advantage of the fact that taking a lesson can be done by simply opening the mobile app. 

Strengths of Mobile Platforms

Mobility

Using the easy portability of the mobile, users wouldn’t have to go through the hassle of carrying around their guitar and other pieces of equipment to find a place to learn, but they could comfortably stay wherever they want(even in their bedroom!) and just open up their phone to start learning.

Universally Accessible

Before, certain education was only accessible to privileged people, but with just a download of the app, users could have unlimited access. Our app will leverage this fact to provide an easy-going learning app and help people learn how to play a guitar without having to find a teacher.

Learning Made Personalized

Another aspect of teaching is to make it interesting so the users can be motivated to continue learning the guitar. We do so by allowing users to play along with their favorite songs from Spotify. Learning how to play the guitar and at the same time learning how to play their favorite song will give a personalized experience for the users.

Focused Target Groups

Our focused target user group is beginners and we are planning to create beginner-friendly teaching systems to grasp the attention. We have not clarified yet if we would want to target intermediate and advanced-level users, but both will still be able to use it by playing the guitar along with their favorite song.

INITIAL RESEARCH

We conducted a brief user survey to determine the needs of our users and gauge the desirability of the app. The following are some of the main points from the results:

24 out of 37

respondents stated that they have wanted to learn the guitar in the past

The top reasons that respondents were unable to learn include:

(1) not knowing where to start

(2) not being motivated enough

(3) not having enough time

36 out of 37

respondents stated that having an app that provides feedback on audio input would be helpful in learning

33 out of 37

respondents found that they would use the app to learn a new song, especially if it had songs they wanted to learn and more so if there was a scoring system for each song

Our research showed that there is a population of potential new guitar players who would find this app helpful. We were able to see the main blockers in guitar learning and determine features of the app to help new players get around them. Additionally, we found through the survey that the audio feedback system and curated song list would be desirable aspects of the app and guitar learning.

APP OVERVIEW

App's Main Features

Popular Song Choices

The app stores 188 different songs of different genres that users can learn from. these songs are imported from a git repository Users can click on these songs in the “Songs” tab to view the chord charts and timing information.

Motivating Users to Learn

As mentioned earlier, users could have song choices under the “Songs” tab. However, the user doesn’t know any chords yet! All songs start off as locked for users. In order for a user to be able to learn a given song, they must have learned all the chords present in the song.

Chord Learning

Other than the “Songs” tab, there will be another tab called “Chords” which contains 24 unique chords a user can learn. All chords start off as incomplete. The app knows the vast majority of existing chords, and users will display those chords in a grid-like format in ascending order of difficulty. Users can click on chords to learn them.

Auto Detection

When users click on a chord, they have displayed the chord shape on a guitar neck and are guided through the process of putting which finger where. When they feel they are ready, they can start a 2-3 second recording and play
the chord. The app will detect if the chord was played properly, and if it was, the chord is marked complete.

 

Song Learning & Feedback System

Once users have learned all the chords required for a given song, they will be displayed the chord chart of that song and will be able to practice at their own leisure. Once they feel like they want some feedback on how they are playing it, they
can again record a snippet of their progress, either the verse or chorus, and the app can provide feedback. Our feedback will mainly track how long it is taking users to go from one chord to another.

LO-FI WIREFRAMES FEEDBACK OVERVIEW

For initial user testing, the team has created the low-fidelity wireframe to gather insight from users and set the ground for the designs, usability, and user flow for the app. The table below details the user testing feedback and responses from the low-fidelity wireframe.

User Feedback:

Users did not notice “Completed” vs “Incomplete” text immediately on the individual Chord cards, and took time to discern which chords were still incomplete

-> On the chords tab, the team decided to organize the number of chords by complete and
incomplete chords.

From several rounds of user research on our Lo-Fi prototype, our team was able to identify ambiguous elements of our App’s design and visual layout, eliminating as much gulf of execution and evaluation as possible. Our team’s highly thought-out mental model made it quite easy to navigate various features of our App, but unbiased user research allowed us to understand the unclear nature of our Lo-Fi design.

 

For one, our chosen icons to include in the tab bar (which allows users to navigate between Home, Chords, and Songs), and movement thereof, made for a confusing experience. When users were asked to find Chords to learn and Songs to play, few were able to correctly identify which tab to click, if they even noticed the tab bar.


Additionally, our user research enlightened our team on ways we can separate out action items for our users. For instance, splitting chords into complete and incomplete, and similarly songs into locked and unlocked, allows users to more clearly identify chords they might want to learn and songs they have yet to unlock.
 

Also, we found ways to simplify the app’s design for more clarity, transitioning from a 2-view plan for the songs list to just one view for viewing songs. Users were under the impression that each view was responsible for displaying different sets of songs, which was not the case.

APP IDENTITY

Colors

#FFFFFF

Rectangle 33.png

#3C01FF

#7C01FF

#A1A1A1

#3C01FF

#232323

#000000

#7C01FF

Logo

app_icon (1) 1.png

Typography

Aa

Barlow Extra Light

Aa

Barlow Medium

Aa

Barlow Extra

Light Italic

Aa

Barlow Medium

Italic

Aa

Barlow Regular

Aa

Barlow Bold

Aa

Barlow Regular

Italic

Aa

Barlow Bold

Italic

Below are the illustrations made by myself using Figma. I created illustrations for all 24 unique chords, but I have attached a couple for demonstration purposes (here you can see illustrations for all 24 chords). 

A#_Minor.png

HI-FI WIREFRAME FEEDBACK OVERVIEW

Based on the team’s user feedback from the low-fidelity wireframe, the team developed high-fidelity wireframes and has done another round of user testing based on the high-fidelity wireframes. The above link icon is attached to the high-fidelity wireframe before user testing and the link icon right above the result table is attached to the high-fidelity wireframe after user testing.

Intro - Beginner.png
Intro - Experienced.png

User Feedback:

The team found that users mostly skimmed the description for “beginner” and “experiences” options, and mostly they simply focused on the bolded words within the description.

-> Team got rid of beginner or experienced selection and narrowed the target audience to beginners.

The results from the team’s user research on the hi-fi prototypes gave us insight into design features that were missing or confusing for users. Most of the changes made were changes in the placement of buttons or features, as well as some additions to make things clearer to users. The team found that there were some things that our team thought were straightforward, but our users did not; subsequently, there were features that our users found unnecessary or distracting. The following are a few of the important lessons the team learned from this user testing:

  • Important features relating to app navigation should be highlighted (our tab bar was not very noticeable, so it took some users some time for them to find it)

    • The team discussed several ways to make the tab bar more distinct and decided to add a colored line to separate it from the rest of the screen

  • Some users have no idea at all how to play a guitar, and they may expect the app to introduce them to that

    • Our team decided to add additional instructions on how to hold and strum a guitar

 

  • Some of the screens that users were defaulted to were not intuitive

    • The team discussed this and reorganized some of the landing pages to make more understandable

KEY FINDINGS - USER TESTING HIGHLIGHTS

With an additional final round of user testing (out of 3 rounds), the team found out some users don't know how to hold the guitar so the team has added a button to describe how to hold a guitar. 

OVERVIEW OF CHANGES

Below are the wireframes and final prototype links with highlighted changes.

Lo-Fi Wireframe

Hi-Fi Wireframe (Changes made from Lo-Fi Wireframe)

  • Got rid of two different view options for song selection

  • Addition of connection to Spotify

  • Organized chords by level of difficulty 

  • The chords page layout changed from a vertical listing to a grid layout with 3 chords for each row

  • Added a chord hearing button for each specific chord page 

  • Changed the navigation bar shape to be more simplified 

  • Organized songs by playlist on the songs page

  • Added finger position guide button

Hi-Fi Wireframe Refinement (Changes made from initial Hi-Fi Wireframe)

  • Added interactive beginner's instructions when the app is first started to instruct how to navigate the app

  • Added guitar holding guide for each chord page

  • Eliminated the background image on each song

  • Eliminated the toast function of newly unlocked songs when a user successfully completes a chord

  • Minimized explanation of the difference between beginner and experienced

  • Eliminated the icon on the far right for unlocked songs 

  • Instead of fading out incomplete chords, applied gradation to the completed chords and left the incomplete chords with a black background

Prototype (Changes made from Hi-Fi Wireframe Refinement)

  • Eliminated beginner or experienced level selection as the app will solely focus on beginners

  • Eliminated interactive beginner's instruction as tailored the app towards beginners and made it more intuitive

  • Eliminated the number of songs imported from Spotify on the Home page

  • Eliminated option for users to edit user info as users will only be able to customize name with elimination of different levels

  • Eliminated filter or sorting options for songs and chords pages

  • Added a personalized message for chord recognition feedback

  • Organized songs by genre instead of Spotify playlist 

  • Added scroll bar for chords and songs page

  • Drastic changes on individual song pages so a user can solely focus on chords and eliminate distracting information or buttons that do not enhance the user's learning experience

TECHNICAL ASPECTS

CoreData 

In the pursuit of delivering a seamless and highly optimized user experience on Apple devices, the team has chosen to use Core Data, Apple's own robust and comprehensive framework. This natively stores and manages our application's data, ensuring that our solution is not only well-integrated within the Apple ecosystem but also benefits from the efficiency and advanced features that Core Data offers. This decision allows for faster data access speeds and the ability to function seamlessly without the need for a continuous Wi-Fi connection. Further, since our app does not store a very large amount of data, employing Core Data does not impose significant storage burdens on our users' devices, thereby maintaining a lightweight and efficient user experience. The data requirements also fit well with the Object-Relational Mapping framework, since all of our data is easily represented with entity definitions and relationships between them. Below is the ERD of how the team organized the data stored in CoreData.

CoreData ERD.png

Below is a further implementation of how the team has organized how data is utilized for each screen with code samples and reading data from CoreData.

Launching Page & Home Page

Machine Learning

In order to complete a chord, users can utilize the “Try It” feature to record themselves playing a strum of that chord, to which the app will respond with success or try-again feedback. Powered by our chord_recognition machine learning model, if it was a success, that chord has been completed.

In regards to the machine learning model that powers the app’s chord recognition capabilities, this model was built from scratch. Albeit with the use of the handy sci-kit-learn Python library, all of the training data was recorded personally by the developers. The model is trained on 75 raw audio files for each of the 24 chords, totaling 1800 files in total. The recordings were gathered using various guitars in different settings to justify a generalizable model. Further, to artificially increase the sample size, 5 iterations of augmentations were applied to add white noise, slightly increase & lower pitch, and speed up & down the files. This totals 10,800 pieces of training data. All this was done in an effort to produce a model that will make accurate predictions in the variety of settings that users may find themselves in. In terms of deployment, this ML model was embedded within a Flask app, which was uploaded to a pythonAnywhere-supported environment, from which the app could make POST requests from our IOS app.

Spotify Connection (API)

The team has integrated with the Spotify API to further benefit our users. When browsing through songs, the album covers are acquired from the Spotify endpoint so that users have a higher likelihood of recognizing a song, and in turn, becoming more motivated to unlock it and play along. Additionally, when users unlock songs, they can view an animation that shows when to transition between chords while the song is simultaneously playing in the background. This is made possible through our use of the Spotify API.

image.png

Audio Recording

In order to give users accurate feedback to accommodate their journey in learning to play the guitar, the team embedded a chord recognition ML model (aforementioned) which requires audio recording from the users. Utilizing the iOS environment, the team was able to implement audio recording permission with a limited time duration of 5 seconds after a 3-second countdown to give users time for preparation.

TECHNICAL CHALLENGES

Finding Chords  

The team tried to utilize Ultimate Guitar's API for importing chord information for each song. However, as Ultimate Guitar's API is not public the team instead used a GitHub repository where the repository owner has organized chord information for 188 songs. Thus Chordable supports 188 classic songs from the late 20th century that are recognizable, with mostly simple progressions. Users will find that perfecting chord transition timing is made much easier when there is a simple and slow progression and when they recognize the tune. The data on these songs have been gathered from a public GitHub repository, credits to tmc323: https://github.com/tmc323/Chord-Annotations/tree/master.

Spotify

Initially, the team thought Spotify API would include different chord information for each song but the team was still proven wrong. By utilizing a GitHub repository instead, the team soon realized the team's initial plan of importing a user's song and playlist information was not attainable. However, the team still decided to utilize Spotify's API to not hardcode song information and increase data storage for each user's device on CoreData (thus decreasing the loading time for the app's launch). The team utilized Spotify's API to import information on each song like the song audio (for background playing while a user is learning to play a song), the song's artist, the song's title, and the song's album cover. 

Eliminating Initial Tutorial

Initially, when the app first launches, the team was planning to implement an interactive tutorial where users would learn step-by-step how to interact with the app. However, the team has eliminated this tutorial by further simplifying the app for the tutorial to be unnecessary. The team pivoted the app to fully focus on beginners instead of having different levels available (beginner and intermediate players) and further simplified the design to decrease users' mental overload.

FINAL PROTOTYPE 

Interact with the prototype below!

PITCH

Below is the pitch deck the team utilized to present in front of the judges from Capital One (some slides including videos have been eliminated). The team won 3rd place and most educative app.

bottom of page