Role:
UX
Tools:
Figma
Procreate
INTRODUCTION
HalfNote
Making music accessible for all.
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.
What to Expect
HMW's
User Flow
Screen Content
Wireframes
Final Design
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 education. Me and my group decided to tackle this problem by digesting it into three objectives:
1
How can we reach users in
multiple places and spread information?
2
How might we help find the right instrument for each user?
3
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!
View Hi-Fi Prototype
Project Timeline
A quick summary and separation of what the case study has to offer.
01. Iterate
Creating HMW's
Establishing screen content
Creating User Flows
Creating and user testing low-fidelity wireframes
ITERATE
Content Definition
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 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.
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 Scheduling Iteration 1
User testing revealed many users enjoyed the idea/concept of being able to swipe between different months and selecting different dates on a calendar, making the process feel more interactive and fun to them.
Summary Iteration 1
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.
Hub Space and Skill Level Iteration
These last screens were added on toward the end after realizing that users have no place to pick and choose what they want and that we didn't have a system set up to gauge or ask for a users current skill level.
Below you can scroll and look through the major iterations of the kiosk screen.
1st Pass
2nd Pass
Final Pass
The Solution
Final Prototype: HalfNote
Lets do a quick recap of how we got here:
The Goal
Create an application that allows users to rent and find the right instrument for them, and schedule one-on-ones with professionals.
The final prototype offers users to interact with different communities of people that are beginning their careers for the first time, giving the users the opportunity to grow and learn with like minded people, whether for work or just to socialize. GradLaunch offers gives users the power to identify jobs with descriptive tags to help others when not waste time or energy looking for jobs, while also providing a tracker to monitor where you are in the hiring process.
Sign Up Flow
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:
1
The yellow is an accessibility issue that needs to be fixed.
2
Need to better show users what they did was saved through messages or confirmation overlays.
3
Clear iconography language, mainly changing the plus sign in the confirmation screen.
4
Experiment more with layouts for the summary screen and introduction screen. Lacks information.
Check out my other works!
GradLaunch
SparkFit (Coming Soon!)