iHeartRadio: Mac App
ROLE: UI
Brief
Listening to music from the iHeartRadio website means that it was too easy to accidentally close it when managing tabs, but if it were a desktop app, a user could keep music playing in the background. At the time, there were no music service apps in the Mac Store for desktop, so our hack team (made up of an iOS developer, a UX designer, and me on visual design) decided to adapt our iHeartRadio iPhone app into a Mac desktop app in 24 hours.
Hack Day Process
We first figured out what goal of our Mac app would be: To make a basic version of our app's player that's meant to be played in the background and left alone, like how radios used to be used.
The UX designer and I decided what the most important parts of our app should make it to this desktop app if it were to behave like an the traditional desktop radio: The player (so users can change songs); Search (to find songs); Favorites (to behave like presets), Recents (because that was a commonly used feature),
Once she made wires, I chose a design direction based on UI trends at the time that seemed suitable for our demographic. I adapted how the iPhone used album art in the background of the player and applied it to this experience as well. I cut assets and made rough specs to pass to the developer and I'd give feedback on his builds.
We won!
Building for the Release
Since our app was going to be released in the Mac Store, I tightened the design up, rebranded it to match iHeartRadio's style guide for consistency, changed the tabs at the bottom to mirror the features we offer on our mobile app, made proper specs and cut assets. I also was responsible for checking the builds to make sure that the builds matched the designs (UAT)
Takeaways
Understanding of the process from start to finish, agile workflow, confidence in design choices