Redesigning Youradio Mobile Apps

Youradio Redesign — Mobile project I was working on since last year with Cleevio was finally released last week. This is a short post, that explains the concept and some of the decisions that we made during the design process.

Youradio is available for iPad, iPhone and Android devices.
Check the Behance Case Study

––

See the apps on Apple App Store or Google Play or read more about it on Youradio website.

This is my 7th article on Medium, you can find the others here.

Background

Youradio by Lagardère Active is music application, that was first released in Autumn 2013 and is very popular alternative to other music streaming services like Spotify and Apple Music in Czech Republic.

The goal of the app is to combine elements of radio with easy controls and catalogue of popular music, where you can choose from favourite artists or your own playlists. It also provides offline mode, where you can download the playlists to your phone and listen without internet connection.

The apps went through many different versions, until the most recent version from Spring of 2014, which was designed by http://charlieisslander.com, which had very original and advanced design for the time, where iOS7 was just released few months earlier.

You can see the previous iOS version of the app below:

Concept

The app was kept in its latest iteration until end of this year’s summer without any significant updates. It was still functional, but sadly lacked some of the functionality and design updates for newer devices, such as iPhone 6 and 6Plus sizes and other things.

It still remained very popular, but it was time to change the way it worked and looked.

––

I was part of the project earlier as well, where I designed the Windows Phone version, which was based on the iOS/Android design, but based on the platform GUI.

Design

We started working on the redesign in fall 2015. My work was based on some of the earlier mockups, that were done previously and my goal was to continue the vision for the new version of the app, which I mainly worked on with Jan Castek and David Bezdeka.

Our main focus was to create more modern looking design, that was based on the updated functionality of the previous app version.

––

My initial idea for the redesign was based around research of how the previous design grew over the years. The radical ideas of the design were great for the time, but didn’t look very good on newer devices and bigger displays.

Things like thin icons, that iOS7 had at that time, were already not used anymore and it was time to make something that would feel more at home with today’s design trends and possibly outlast them.

It was also needed to unify the iOS and Android versions more.

–––

We wanted to create a design, that would use the space more efficiently, but also didn't look old after year, no matter how would iOS or Android evolve.

See more in my Behance Project

Playlists

We’ve started working on couple different versions of the design direction, where we tried to find the right stylistic approach for the main parts of the app, which were the new main Mood and Player screens. Most of the wanted functionality was already discussed, so it was only matter of styling and interactions.

––

Our idea was to make the Mood part the actual starting point of each time user opens the app, rather than opening the Player screen like it was before.

This meant revisiting how people use this part of the app and sort the activities to smaller sections, where the user can clearly see the headline and few examples of content.

This was not a solution to make the list smaller, but at least more organized and clear, which we felt was good compromise.

––

The Mood screen is home to number of items depending on if you have Premium or Regular account.

Such as:

  1. Your Playlists
  2. Recommendations
  3. What others are listening to
  4. Genres
  5. Moods and activities
Example of different stages on iPhone

Player

Other big part of the redesign was the Player section, which is where users spend most of the time and where the main focus should be the currently played song.

We've made the decision to drop some of the functionality like Volume Toggle or AirPlay, which can user control on the OS level and focus on making the rest of the controls better organized and more traditional.

We’ve moved the Share/Fav icons to the top, made the album cover float on the blurred background and got rid of the red overlay on the album cover.

The overlay was a nice touch, but sadly didn't look great with all the album covers.

––

The updated version looks always great with every cover, but still feels like Youradio, which was important to keep.

We also redesigned the Share sheet menu, Premium popups and Offline menu as well as other parts like Profile and Login — which you can see here.

Platforms

Even though the both platforms respect their guidelines, they are still trying to share similar elements when possible.

These main differences can be seen in the overall button placements in navbars and different typefaces, that replaced the overused Proxima Nova.

The choice went for the system fonts — Roboto for Android and San Francisco for iOS.

Tablet version

The tablet version for iPad and Android was another item on the list, that needed some refresh. Most of the UX here stayed the same and we mostly focused on improving the way the menus appear and how everything was layered.

This meant coming up with better system, that worked in both Landscape and Portrait.

Most of the main screens like Mood or Profile are now always stacked to the left and always overlay the left column (which is the same size as iPhone 6). The right side is reserved for the Player screen, so it's always accessible.

Rest of the screens for creating New Playlist, Notifications or Editing, are done with big modal window in the middle of the screen.

CarPlay & Auto

One of the last things I was working on for the project were concepts on how would the app look when connected to Android Auto and Apple CarPlay.

These are some of the concepts that are respecting their current limitations and guidelines, but show, what could be possibly built. Both of these systems are still very early in their beginnings, but it was still interesting to have a chance to create something for this new platforms.

You can check the apps on Apple App Store or Google Play or read more about it on Youradio website.

––

Check the Dribbble project of work in progress here
Developed by Cleevio.

––

Thanks for reading!

Michael Dolejš
 www.michaeldolejs.com

You can find me on:

www.twitter.com/michaeldolejs
www.dribbble.com/michaeldolejs
www.behance.net/michaeldolejs
www.soundcloud.com/michaeldolejs

See more in my Behance Project