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
#3C01FF
#7C01FF
#A1A1A1
#3C01FF
#232323
#000000
#7C01FF
Logo
%201.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).
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.
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
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.