PianoBud

Interaction Design
Timeline: January 2021-March 2021
Tools: Figma, Procreate, HTML, CSS, Javascript, GitHub, Heroku
Team members: Lara Canonizado, Avery Blas, Samuel Fleet
See project here!
See GitHub repo here!
Project Overview
PianoBud is a mobile application created for the Interaction Design course (COGS 120). It helps users learn basic fundamentals of the piano. It is for users who need motivation in order to learn, as well as for users who don't have the time to sit through the basics. This application features lessons and games that the user can access anytime.
My Contributions
My main contributions included creating the visual design of the app. I helped create the prototype design on Figma, as well as making icons, color scheme, and logo. In addition, I assisted with some parts of the code, such as creating the JSON files for games, implementing the log out button, and setting up the achievements page.
Overview
Telling a story of a student's perspective.
Laying out the wireframes.
Adding details to our wireframes.
Logo of the app - a green music note shaped like a sprout which is in a flower pot.
Visual assets of the app created with Figma and Procreate
Creating the static version of the app with HTML and Javascript
Implementing Google Login.
Final prototype of the app

The homepage of the app, featuring the today's goal function and the sprout

Notes on a Staff Lesson featuring a video

Quiz for Notes on a Staff lesson

User get instant feedback for quizzes

An example of the instructions of one of the games users can play, which shows an animated gif of instructions

One of the games users can play, Perfect Pitch features an audio file, which plays a note. Users need to pick the correct note

Users are able to see their position on the leaderboard after completing a game.

Completing certain achievements such as lessons gives the users trophies, allowing them to be motivated and continue using the app.

This project will be updated soon!
Powered by Webflow