MegsRadio.fm

Local Music Discovery

Case Study

Discover Local Music → Find Local Shows → Create Immersive Stations

MegsRadio is an ad-free, non-profit, personalized Internet radio system. The primary goal is to promote the work of local artists by contextualizing their music with songs by well-known artists.

Project Goals
  • New logo and new branding guidelines
  • Develop a design system based on Material Design principles across mobile and desktop
  • Reinvent app functionality to offer a better user experience
  • Make it easier to fine-tune your stations
  • Create a gorgeous high-fidelity product and seamless user experience
Position
Lead Design
User Experience

Version
4.0.0

Front-End
Foundation by Zurb
Angular JS

Back-End
Play for Java and Scala

Jimi Lab
Funded by The National Science Foundation

Brand Identity

We wanted to incorporate a memorable local landmark that would be slightly recognizable. We landed on a logo that gives a nod to Taughannock Falls. The "M" shaped logo both represents MegsRadio, a speaker, as well as the flowing water of the falls.

Our team continued to refine original ideas. The second example indicates a cleaner and tighter version of our concept with a slightly updated accent color.

Color Exploration

During the process of assessing our logo and initial branding for the app, we held team meetings where we discussed the importance of finding a color that made us stand out amongst the most recognizable of platforms like Pandora's blue and Spotify's green. Various shades of red felt too harsh and we agreed black was too depressing.

#e80000
#ff0000
#ff2525
#ff3a2f
#fc5c53
#eb5d5a

Spotify has its green. Facebook has its blue. Pandora has its blue. We wanted to create our own unique color choice for the MegsRadio brand that radiated homegrown and still felt like a music app. We initially started our research on Red and quickly determined it to be too harsh on the eye. Red is a color that is often not inviting and doesn't express warmth. Variations like "red-orange" continued to feel impractical. At the time Google Play had been orange, however we found a happy medium in a warm salmon-like color (see far right).

Wireframes

Designing for MegsRadio started with research of other music services, streaming sites and apps. Through this exercise we were able to clearly decipher how our competitors, whether direct or indirect, created their unique experiences. We did this by building wireframes of each individual screen interaction of Spotify, Rdio, and Pandora apps respectively.

From there we held user tests, focus groups and A/B testing on our original wireframe designs.

We found that a typical user would become overwhelmed when presented with endless choices. To combat this, MegsRadio suggests stations you might be interested in. From there, the user can get more creative by manipulating their station or starting a new one altogether.

The User Experience

Through A/B testing and numerous other user tests during the wire-framing process, we learned a lot about how our users interact with our system.



Above is the product of our research. Quicker decision time given pre-curated stations and the option to search for the exact artist or tag you are looking for.



Across MegsRadio Web and Mobile apps each button has significance in its placement and each feature has a strategic intention to make for the most optimal music listening and discovery experience based on our research.

Design Evolution

Old functional web app above (circa 2013).


Desktop Concept 1


Original desktop mockup centered around a main UX feature that we ultimately scrapped – draggable tags to influence your station.


Desktop Concept 2 (hover over image!)


Removing clutter. We continued toward clarity in our UX system and devised hidden elements to increase feature engagement within the app.


Final Desktop Concept


Final concept we decided on and shipped, using Material Design concepts and elements that felt more like an app and less like a "website."


Mobile Concept

Final Mobile Concept

Our original mobile design (left) was dark and cold. In order to set ourselves apart from other music apps, we decided to move forward with a bright design.

Web Onboarding

Clear call to action for first-time users and 2-step station creation.

Onboarding Screen



Onboarding – Create Station



Web Player


Brand Execution

Web App in Live Beta


Watch the user flow of our MVP web app in live Beta.

Growing Local Music


Founder Doug Turnbull describes the objectives and functionality of the app's 2013 version.






MegsRadio is the brainchild of Prof. Doug Turnbull, beginning at the SoundLab at Princeton University in the late 1990s. The idea has been evolving as Doug conducted active research on computational music analysis at UC San Diego, Swarthmore College, and now in his JimiLab at Ithaca College.

MegsRadio is an academic project that is currently supported by Ithaca College, Cornell University, and the National Science Foundation.