Beat Balance
UI/UX Design: Mobile Application @ HackHarvard 2023
Software: Figma
Team:
1 Designer
3 Developers
About:
Beat Balance is a mobile application that understands that music isn't just about beats per minute, but about syncing with your emotions and activities. Whether you're seeking the invigorating rhythms of an intense workout or the soothing melodies for winding down, the app tailors playlists to your heart rate, ensuring the ideal soundtrack perfectly accompanies every moment. Let the music mirror your energy and elevate every experience!
Created within the short time frame of 2 days at HackHarvard, I worked with a team of 3 developers as the sole UI/UX designer for the application. The idea was synthesized to solve our group's common issue with finding suitable music for specific scenarios, as well as to utilize new technologies such as Terra API, an API that grants developers access to mobile & device-tracked health data.
The Prototype:
The Design Process:
Stage 1
Ideation & Research
As a team, we identified the problem that our application aimed to solve and defined the specific functions that our interface would incorporate. This involved determining the permissions that would be accessible to developers on the backend and the features that would be available on the front end.
To generate ideas for designing the music application, I scoured the web for inspiration, looking particularly at typefaces, colors, and permission screens.
Stage 2
Branding
During the research process, the team strongly resonated with technical-esque colors such as purple and bright teal, and wanted minimal branding throughout the application.
Stage 3
Medium Fidelity Wire Frames
Due to the time constraints of the hackathon, I dove into mid-fidelity screens after establishing the core brand strategy. The screens do not contain in-depth animations, loading screens, or more detailed user permissions & preferences screens, but still illustrate the overall layout, structure, and essential elements.
Stage 4
High Fidelity Prototyped Wireframes
Transitioning from mid-fidelity to hi-fidelity wireframes, I ensured that the designs retained the essence of the initial concepts while incorporating more refined visual elements and polished user interfaces
Reflection:
In my experience working on design projects with tight deadlines, effective communication between designers and developers becomes crucial, especially when rapid implementation is required. Ensuring that my designs not only met the functional requirements of our application but also aligned with the capabilities and limitations of our development team was paramount.
During this process, I checked in regularly with my team on their thoughts with my workflows, design assets, and button components, to ensure that our visions aligned in terms of functionality and design concept. Though some steps of the UI/UX design process were sped through, I maintained a strong emphasis on usability and overall user experience.