Pan radio

Mobile UI Design and Development

Initial Design: 2017
Interface Re-Design: 2018
Tools: Android Studio, Photoshop CC, Axure RP 8


Pan Radio was a project initially created during late 2017, later redesigned in early 2018 with the goal of building from the ground up an interesting mobile application. What Pan Radio turned out to be is an interactive music player with an audio visualizer and mini-game that tracks the user’s dance moves.

demo of UI (new)

demo of application (old)


What Pan Radio’s context within the application ecosystem, was to answer the niche idea on desire of rocking out on your favourite tunes in a more engaging approach. The project evolved from simply building an audio visualizer into keeping the user’s physical interaction as part of the design. This became the groove sessions which tracked user motion, essentially them dancing, towards a point system. Users can also compete with other people as user’s progress were stored locally and published globally within the app. I also took this idea to try and incorporate Spotify within the application, and have user’s an option to a larger music selection and customized playlist rather than having a limited library of songs that are saved within their devices.

Initial Design

The initial design of Pan Radio was just a normal music player, as I began building the general interaction and implementing the player functionality, I began to explore more unique ideas. Since I was building within an audio environment, I first started pursuing the idea of a rhythm game. However after some critiques and discussion, Pan Radio began to evolve towards the “grove” idea. After finalizing the interactions that I wanted to have within the application, I began implementing rudimentary motion tracking and score tracking. Pan Radio finally reached its final design regarding its functionality.

initial interface and core interaction

Interface Redesign

The completed design of Pan Radio left a lot to be desired, and so I looked at the project holistically and completely redesigned the main interface and interaction of the application. I first started with establishing the main interaction and activities that already exist within the application and began refining a site map that I was content with. Since I already built the application, I treated it as a very rough wireframe and began building mockups in Photoshop and Axure. I then implemented the final style towards the application. While rebuilding the entire application within the new style was out of my scope, I was able to have a product that I was satisfied with.

mockups of interface


Pan Radio was an interesting project where the design process took a culmination of different types of skills and learning a lot on the way. Pan Radio helped me learn the intricacies of working in back-end and front-end process of an entire application design process.

I think to really flesh-out this project is to fully bridge the gap between the interface redesign to encompass the built functionality of the original application. I think solving this problem takes this project a step towards a fully marketable product. I think I am satisfied with the end result of the final product and was able to answer plenty of the ideas I sought out to build.