Home

Work

Resume

About

HalfNote

Making music accessible for all

Role
UX/UI Designer

Tools
Figma
Notion

Procreate

Timeline
Mar2025 - May2025

Timeline
Mar2025 -
May2025

Methods
User Testing

Wireframing

Collaborators
Angel

Maddie

Daniel

Overview

HalfNote is a group project that focuses on providing users of all ages with the ability to pursue a music education at anytime through our pop-up service. Enabling people to rent instruments, learn from professionals, and advance their understanding of music.

Introduction

Iterate

Final Product

Music Education

Music education is something that is widely offered at many schools, allowing students to experiment, learn, and discover their potential passion for music. But there are many underprivileged places that forgo music education, leading to students never having the chance to explore this facet of learning. Me and my group decided to tackle this problem by digesting it into three objectives:

The Reach

How can we reach users in
multiple places and spread information?

The Right Instrument

How might we help find the right instrument for each user?

Ongoing Support

How can we ensure users
are guided and supported
throughout their music journey?

How can we ensure users are guided and supported throughout their music journey?

The
Solution

To help those who never had the chance to pursue music education, we created a pop-event that serves as a way for users to get acquainted with different instruments, talk to teachers and instructors and have the chance to rent out instruments and attend rehearsal or one-on-one guidance from professionals!

ITERATE

Content Definition

When establishing what was needed to have in each screen, I didn't want to overwhelm or take too much time away from the

users since they'll be at our pop-up event, so I focused on keeping things straight to the point and easy to read and skim.

When establishing what I needed to have in each screen, I didn't want to overwhelm or take too much time away from the users since they'll be at our pop-up event, so I focused on keeping things straight to the point and easy to read and skim.

User Flow

Once a solid idea of what the contents of screen would have was formed, the next step was to establish a visual flow to
ensure visually everything is cohesive and makes sense for the users.

Once I had a solid idea of what the contents of screen would have, I moved on to establishing a visual flow to ensure visually everything is cohesive and makes sense.

While designing the flow, there were multiple changes and iterations to ensure we made something that
would be simple to execute and not overwhelming to navigate for the user.

While designing the flow, there were multiple changes and iterations to ensure we made something that
would be simple to execute and not overwhelming to navigate for the user.

User Testing

When designing the wireframes, I went through multiple rounds of team and user testing to ensure the user navigation made sense and to see how users went about going through an early rough of a site. Below are the major iterations passes done for the kiosk site.

Lesson Schedule

Ver.01
Users preferred having a calendar to the left and time selections all viewable.
Ver.02
Users have difficulty pressing buttons on calendar and wanted more motion and interest.
Ver.03
Designed a scrollable date picker for a more enjoyable experience.

Instrument Selection

Ver.01
Search bar, array of instruments, description of instruments along with materials.
Ver.02
Added filter for instruments, reorganized layout so everything is visible, and show more instruments at once.
Ver.03
Changed instrument arrangement due to it being too condensed and find tuned pre-existing spacing and padding for the layout.

Summary

Ver.01
Started with the concept of a summary screen that would inform users that they've successfully completed the process and that they'll receive an email confirmation.
Ver.02
User concerns wanted to be able to see what they agreed and signed up for, wanted more confirmation.
Ver.03
Confirmation screen entailing action users did as well as a email confirmation about their scheduled events.

The Solution

Final Solution: HalfNote

Lets do a quick recap of how we got here:

01. The Goal

Create an application that allows users to rent and find the right instrument for them, and schedule one-on-ones with professionals.

02. Pain Points

Finding the right instrument.

Lack of musical guidance.

How to reach and teach multiple users.

03. Solution

A kiosk interface that ensures users get the materials and guidance needed to start their journey.

The Sign Up gathers basic information from the user for communication and allows users to select their current skill level so we know what to expect
from them and cater to their needs effectively.

Consultation Flow

Scheduling a consultation allows users to meet with a professional beforehand to inform the user of what the program entails and help users find the instrument that best suits them.

Instrument Rental

Renting an Instrument guides users on the available instruments in store while also educating users a little on what the instrument is, its place in a group, and the materials that come along with it.

Rehearsal Flow

Scheduling Rehearsals lets users choose their instructor based on their chosen instrument and skill level to ensure the best match possible between student and teacher.

Reflections and Next Steps

I had a wonderful time working on this project! This was my first group project I've done and we recieved the highest grade out of the class! It was really inspiring to learn from others workflows and how to work with others as well! It's something I'm realizing I want to do more of when it comes to designing in general.

Though I'm happy with how everything turned out, there are some glaring errors I'm working on correcting besides just what I did in my role as a UX Designer:

The yellow is an accessibility issue that needs to be fixed.

Need to better show users what they did was saved through messages or confirmation overlays.

Clear iconography language, mainly changing the plus sign in the confirmation screen.

Check out my Other Works!

UX | Desktop

E2E

GradLaunch

Platform that help

tracks graduates application

status and build community.

UX | Desktop

E2E