This was a 2 week course project for a programming course in Python.
UI Designer
Developer
2 Weeks
Alli Hishikawa
Jordan Yoon-Buck
Vishaka Nirmal
Figma
Python
The challenge was to use Python and an API of our choice to create an application that adds value to your chosen API. When my teammates and I were brainstorming ideas, we wanted to create something related to music.
During our brainstorming, we touched on common struggles experienced regarding music, and realized we all wanted a better method of creating a running playlist. Sometimes, songs were too slow for the pace we wanted to go at; sometimes it was the reverse, the song was way too fast for the ideal running pace, throwing us off guard. Other times, a song we've heard just one too many times plays right when we're really getting into the best part of the run. Running with music should be easy – and that's why we made ZoomyTunez.
Common problems
Some songs are too fast for the ideal running pace
Repeat songs make running less interesting
Lack of balance between old and new songs
My teammates and I chose to build on Spotify's API. I worked on programming parts of the backend using Python and designed the UI using Figma.
If you have a Spotify account, you can try it out!
Using the Spotify API
My teammates and I spent some time reading through documentation for Spotify's API and identified parts of the API we'd need to use to complete our application. Below is a screenshotted snippet of our Python code.
The finished screens
Using Figma, I designed the UI for the screens.
When designing the initial onboarding screens in Figma, I wanted to make sure the ZoomyTunez experience was as personalized as possible to the user's preferences. If it's your first time using the app, we'll ask you for your height, intended run length, pace, and run trajectory in the beginning. In case these questions felt a little invasive, I also added information at the bottom to explain why we were collecting this information and how it would help us improve the ZoomyTunez experience.
To create a new playlist that's still new but uniquely you, we ask for five of a your favorite songs or artists. We combined this information with the previously collected information about their desired pace, looking at song genre's and the BPM (beats per minute) of songs within those categories to create a delightfully new playlist.
Visually, I wanted to make this as simple as possible, while also showing the collected artists/songs to ensure the user that their information was being successfully collected.
Almost done! Once you've chosen at least 5 artists/songs, the app moves into a brief loading screen (with some running icons) to give the impression that the ZoomyTunez is hard at work synthesizing all that information to curate the best songs for your playlist. The next screen leads into the finalized playlist, as well as a visual representation graph showing an approximate trajectory of your running pace based on the chosen songs. The playlist will automatically be added to your Spotify account that you initially logged in with! Enjoy, and godspeed. :)
This was a really fun but challenging project to work on. It involved some longer-than-expected hours working, several cups of coffee, some white-boarding (see pictures below), and a phenomenal group of teammates. I had previously only briefly worked on backend and APIs, so this project required a lot of learning on the spot (many thanks to Stack Overflow). It was also my first time having to thoroughly read through API documentation to program something – I have a newfound appreciation for all who work hard to create well-written documentation for any sort of system (thank you, Spotify engineers).
Also, one of the best parts of this application is that I actually use it. I always listen to music when I run, but often struggled with finding the right playlist for the way I run. I don't have this problem anymore, since I can just use ZoomyTunez to create my perfect playlist.
A quick visual exploration
When applying to UX positions, I was asked to pursue a short design challenge building upon this project. It had been a while since I'd thought about ZoomyTunez, so it was fun to look back on my thought process before and consider ways of improving the application, now that my understanding of design has matured a bit.
Since I initially didn’t focus on a mobile application, I wanted to explore what ZoomyTunez could look like in the mobile form.
To do this, I mocked up a screen that shows time blocks to indicate each song. When a runner achieves the target pace for a song, the song block is shown in ZoomyOrange.
Song blocks where a runner didn’t quite meet the target pace are in a lighter orange. The time block also shows how long they have been running for, as well as the total playlist time.
An encouraging message also lives at the top to motivate runners to reach their target pace.
To imagine how I might show the same information on a web version of the application, I also designed a web version with a bit more additional information. This might be to remember a run afterwards on your laptop or desktop.
Relive a run by listening to a ZoomyTunez playlist later on your desktop. Here, you can watch a dynamic route map that changes for each song and observe a visual graph of your run pace. Also see fun song insights (pulled from Spotify’s API) and see which songs help you achieve your best pace.