Designer:
Ying You
yingyou.myportfolio.com
Advisor
Mike Strobert
Deborah Beardslee
Design Tool:
MediBang Paint
Adobe Illustrator
Adobe Photoshop
Adobe After Effects
Project Introduction
Problem
Target User
In today’s music theory class, it’s hard for music teachers to take into account students of different ages and skill levels, and it’s difficult and boring for children to understand the class content.
Music teachers
Children who are learning basic music theory
Solution
Design a music note learning card game that can be integrated into group music lessons so that students of different ages can play and learn in different groups according to their skill levels.
Approach
These games are designed for different levels of students. Basically, one set of cards collaborate with the app could be played in different ways to fit different students’ skill levels.
Students can learn from
Play Card Game
1.Game Rule Design
- Interview
In order to learn more about the current facts about music teaching, and get some professional suggestions, I have interviewed a piano teacher who also taught music theory and get some useful points of view.
- First, set the user scenario in a group music class.
- Second, focus on basic rhythm patterns.
- Third, give students a sense of accomplishment.
Rest Notes Basic Notes Time Signature
- Research
Before starting the card game rule design, I did some research about music notes and basic rhythm patterns. There are lots of music symbols, but for beginners, the essential part is the use of basic notes and rests. This card game will also focus on the arrangement and the combination of basic notes and rest. There are three types of cards, time signature cards, basic note cards, and rest cards.
- Principle of Game Design
To use these elements to design the rules of the card game, I researched the principle of game design, and these are the six aspects that should be considering during game design. Objectives; Constraints; Success criteria; Reward; Play; and Competition (sometimes). Based on these, I have explored several different versions of game rules before I got the final one.
Final Game Rule Design
2. Mobile App UI Design
-User Flow
The use of mobile apps in this card game is an integral part. It provides games’ target rhythm, audio, timing, and scores. Simultaneously, if players are not confident with their answers during the game, they can check the correct rhythm by scanning all the backside of note cards from left to right.
2. Mobile App UI Design
- Design Comps
- Homepage
The primary function of this mobile app is "scan" and "Game." The "Library" is a place for users to save some useful rhythm patterns that they have seen during the game or through scanning cards.
- Game Level Selection
On this page, users can select from three different levels of the game. The system will provide recommendations based on users' previous activities. There will be simple introductions below for each level of the game. Including game difficulties, suggested numbers of players, the design goal of this game level. The users can wipe up to see more details
- Preview Game Rules
To know about the game rule, the user can swipe the bottom description up to get detailed information. The game rule is presented by some simple illustrations to help users better understand it. Swipe left to see the next page of the game rule illustration.
- Get Target Rhythm
After the users read the game rules and select "get target rhythm, they can listen to the target rhythm on this page and start playing the card game. If They think this task is too hard to complete or useful, they can also check the answer or choose to add it to the library.
- Screen Used During Game
During the game, if students have trouble with the answer, they can choose "scan to check answer" at any time. There is also a timer for recording how much time the game has used.
- Scan To Check Answer
During the game, the users can scan the backside of note cards to get the correct answer, which will help them get professional instructions when they feel confused.
- Design Sketches
3. Card Design ( Back )
- The notecards have two sides, the backside is what used in the gameplay. They are plain note cards with different colored lines. Those colors are extracted from their front side to maintain visual consistency.
- In order to enrich the gameplay, besides designing single note cards for eighth notes and sixteenth notes, the author also designed a combination note cards for them. Players could combine two eighth note cards or four sixteenth note cards to make a quarter note.
Scan Cards to learn
1. Card Design ( Front )
- Overall Card Components
The front side of the cards which have animal illustrations used as learning cards for a single scan. The learning cards have four components: music notes, animal illustrations, names of the music notes, and the music notes' value.
1. Card Design ( Front）
- Basic Note Cards Design
By associating the characteristics of different animals with the characteristics of notes, users can understand the relationship between music notes in a more exciting way.
For example, use panda to represent whole note, a penguin as a half note, and cat as a quarter note. It is easy for children to think about these animations’ size is getting smaller, and their footstep is getting faster.
That is also the relationship between music notes. From the whole note to the sixteenth note, the note value is getting smaller, and their sounds go faster.
1. Card Design ( Front）
- Rest Note & Time Signature Note Cards Design
- Since sloth is always moving slow and even stay in one position for a long time, that meets the characteristic of rest notes, so I use sloths with different gestures to represent different rest notes.
- I use clover to represent time signature because the clover is also from nature. It has four leaves that could represent a quarter note. The number of clovers means how many beats per measure.
2. Mobile App UI Design
- User Flow
One of the primary functions that the mobile app has is to scan note cards and learn. The user can scan the note cards' front to get the music notes' information and intro-animation.
2. Mobile App UI Design
- Design Comps
- Scan Page
This page will appear when users select "scan" on the homepage. "Single scan" is for scanning the front side of the notecard. And "Multiple scan" is for scanning multiple notecards' backside during the game to check the correct answer.
- Note Profile Page
After scan the front side of the notecard, the users will get into this page. On the note profile page, users can watch introduction animations or check some detailed information about the music note.
- Introduction Animation
Users can watch introduction animation by clicking the play button on the note profile page. This animation will tell users the relationship between the music note and the animal, to help students better understand the music note.
- Note Profile, Detailed Page
On the note profile page, students can also check the tabs below to see more information about that music notes. Including note value, how to write this note and some sample rhythms related to that music note.
- Design Sketches
- Thanks for watching -