I was the lead designer on JB Hi-Fi’s music streaming service, JB Hi-Fi NOW Music from 2012 to 2015, where I was responsible for the complete redesign of the product and a range of other apps and services.
As well as leading the design of the UI and UX, I have also provided strategic consultancy to the executive team, and created branding materials and marketing for the product.
From humble beginnings.
When I came on board to redesign the app, it was an entirely usable music service, but wasn't the world class experience that JB wanted.
My first priority when approaching the redesign was easy: feedback. What do our users love about our app? What don't they love, how can we be better? Why do they use us over the competition?
It needed to be a better experience, but without alienating the passionate set of core users that used the app on a daily basis. Changing any core functionality might hurt the experience for our loyal customers.
Through app reviews, feedback suggestions, and user testing, and our users were all telling us very similar things.
What they loved.
- The usability of the app. The song swipes were a hit, and quick links core functionality resonated well across audiences.
- The functionality of our player, and being able to make playlists easily.
- Saving songs to your device, and the way that the app cached songs that you had played to save wasteful data usage.
What needed work.
- “Where can I see similar albums?” Our users wanted more to listen to, but had trouble finding it. They also wanted more information about the music that they loved.
- “Why cant I just save albums one at a time?” Saving songs to your device was one of most praised features of the app, but the interface and experience of for doing so seemed invisible, and confusing. Instead of a list to manage, they wanted to save albums on the go.
- “How do I play an entire album?” While the existing yellow two tone button was on-brand, it didn't communicate that it was a play button to our users.
It needed to be easier to play music.
The core functionality of the app was to play music, and our number one feature request was an easier way to do so. This was my first priority.
The focus of every screen needed to be to play music. But while I was doing so, how could I improve and promote the rest of what users loved about our app?
The end goal was to allow users to achieve the main functions of every screen easily, naturally, and enjoyably. I needed to take away all barriers.
I played with multiple solutions to put the emphasis on playing music, but I found that they detracted from the rest of the functionality, and pushed the content too far down the screen.
My next thought was to overlay the primary actions over the album art, and try and bring the information back up the screen. Promoting the primary functions for each page (and not just playing music) was on the right track, but the execution didn't quite feel right.
It was just out of reach on the newly released, bigger iPhone 5, and some Android devices, and the icons were too small to tap reliably with a finger. Making them any bigger would cover more of the album image, and detract from the full experience. I also found that only having two main functions was limiting, as I found that most pages needed three.
The functionality needed to be big and instinctual, but so did the context and imagery. I wanted to make it effortless, and to have the main actions on any page large, clear in their functionality, and in the perfect position.
In the past, the iPhone 4 and similarly sized Android devices had made putting functionality below the middle of the screen difficult to reach. But with the recent increase in screen sizes across the board, it was clear that they were only going to get bigger.
While searching for the perfect position, I came across a lot of research into how people were using their devices. The most inspiring of which was an insightful article by Steven Hoober on how users preferred to hold their devices.
The landscape was changing, and putting functionality lower was now going to benefit the user, which lent to my previous designs, but I’d also learned that just having play as a primary function wasn't enough.
The user needed access to other functions as well, and the magic number was three.
A new way of thinking.
Original images by Steven Hoober
I created a new layout based on my findings. Three main functions for each page, that didn't cover the artwork, and instantly it was easier, faster, and more enjoyable to use. It was working, and it felt right. After some fine tuning and tweaking, it was ready to be rolled out into the rest of the app.
It was working, and it felt right.
The album page's main functionality was simple. What do you do with an album? You play it. If you love it, you add it to your favourites so you can play it later. You save it to your device so you can listen on a plane, overseas, or out of reception.
All of these core functions were being neglected in the old design, but now they were available, all in one comfortable tap.
Artist pages proved to be different. Again, the focus needed to be on a user being able to play music easily, so I added a Play Artist button, which plays the artists trending songs: a "just give me some music!" button, and it worked really well.
But how else can we empower the user to play music? Firstly, allow them to start start a radio station based on that artist. Also, let them share artists with each other, all at the tap of a button.
I found our newly dubbed Fancybuttons were flexible enough to allow us to add powerful functionality to other screens as well.
A lot of users were using the singles chart to listen to new music, and even creating mixes from it. This was an important way that they were using the app, and giving these functions fancybuttons meant that they could do what they wanted, even faster than ever.
Adding some colour, adding some meaning.
The use of colour to communicate function has been a huge usability boost for the app. Colours have been found to evoke emotional and instinctual responses in people, and I used them to liven the interface up, while also reinforcing the flow of the app, and managing the users expectations.
The increased focus on playing music had to be consistent, and clear. The colour Green inherently signifies advancing, and to go forward. Being that the end goal of our app is to play music, green seemed like a natural fit, and a way to subconsciously guide the user to enjoying the product.
To do this, I applied a green theme to all playing functionality, from the icons, to text links, all the way down to the action sheets.
To take this even further, I wanted to apply this logic to other facets of the experience, and I found that all functionality in the app could be represented in three main categories: Playing content, creating content, and removing content.
Green meant to play music, and in a similar sense, I used the colour blue to signify the entirety of the creation process. Be it making a playlist, a radio station, creating content was now all themed blue, and I found these themes were adding a natural sense of context to the app.
Red naturally means to stop, or a warning. Using red to signify the removal of songs, albums and playlists gives the user fair warning and avoids confusion and regret.
Doing More, with less.
Our users were clear that they wanted more music to listen to, and easier methods of discovering it. They also wanted more information about music they loved, more ways to share.. They wanted more. We had a lot of information on the web app that wasn’t being utilised in the app. We had detailed bios on the artists and albums, we had similar albums, content wasn’t the problem.
What I had learned.
- I had learned from earlier concepts that pushing any functionality below the track list was harmful to the experience, and it became unusable in the case of large song lists.
- The new designs were really working, and the functionality felt right, but we needed to add in more information, without taking anything away.
- I knew that I needed to add a lot of information to each page, but needed a viable and naturally usable way to navigate the plethora of content on offer.
Should all content be placed into expandable accordions, including the track list? No. There was a use case for looking for a single song from a release, and adding that extra step made it far too much effort, and vexing. Just give me my song!
The idea of an accordion boiled down, is a small navigation that expands to rich content, and it was a good one. But how to do that without taking away from the page as it was? Was it small text links that linked off to other sections? No, but that idea was recycled and reused to expand our collection views.
Realistically, it needed tabs. But it needed to be more than just a boring tab bar. There was so much playful energy in the other interaction of the app that a simple bar wouldn't cut it.
The seed to the original Fancybuttons concept came from an enhanced tab bar, that offered more to the user. We had a lot of functionality, and I wanted it easy to reach, so my first concept contained the most important function besides playing music, right there in the tab bar, with all other functions in a ••• more menu.
Switching to a new page, in essence, was like creating a new experience, so the highlighted state had to be our Create blue. I loved how the light gradient didn't detract from the content too much, but therein lied a problem: interface needs to have clarity and contrast, but on lighter backgrounds it was hard to see, and the highlight felt more like a button than an active state, as it was lacking a connection to the other elements.
I made the gradient darker, but it clashed with the stark white edge, and wasn't working. It still needed work. To try and give more of a semblance and correlation between the page and the navigation, I used the page itself as the active state. It was clear, but again lacked a connection to the other options.
It needed to be a cohesive, and reusable unit of navigation. It needed to be visible, yet not entirely block out the information below it. And most of all it needed to be fun.
I was making efforts to have as much consistency in the app as I could, so I based my final concept off the existing navigation. In conjunction with our new navbar, these tabs framed the content perfectly, and the solid block of colour bought all of the elements together.
Now that it looked right, it need to feel right as well.
I wanted fun interaction, and to do something that I hadn't seen before, but also needed to be careful not to make something that was too advanced, or difficult to use..
I've always been inspired by UI experience that let the user you play around with it. For example, I'd find myself spending time playing with apples core UI, especially trying stretching things to see how far it would go. It always felt fun, and a little magical.
It needed to be fun, and capture that playful spirit that kept me in other apps longer than I needed to be, but without losing focus on the goal of this navigation: to let you get to your content faster.
When approaching the redesign, I was looking at the parity between the UI and UX of iOS and Android, to try and create an experience that felt natural to users of both platforms. One of my favourite experiences from android was swiping the screen to move between tabs, which was used to great effect in the Spotify app.
This would've been perfect, but wasn't going to be possible with our current mechanisms. For usability, we allowed the user to swipe on any song, and we also utilised shelves of content heavily, and not being able to swipe on these ares would be inconsistent, and would ruin the experience.
So how to get he best of both worlds? Easy. Context, and consistency. Keep the swipe interactions confined to context.
Swiping within the header changes the artist image.
Swiping on a song shows options.
And swiping on the navigation bar, changes the active tab. And it's really fun, you should try it! Our existing users can tap to switch between tabs, so it doesn't harm their experience.
For those who like to tap, swipe, stretch and pull every part of an app the first time they use it, like myself, there are power user features hidden throughout the app, to make the experience easy, and a pleasure to use. I thought I would get over it, but I find myself using it every day.
Attention to detail makes an experience beautiful, and memorable.
Responsively Designed, with Pixel Perfection.
With the knowledge that screen sizes were only getting bigger, the design needed to be flexible enough to accommodate all sizes and ratios. Responsive web design had long been a passion and focus of mine, so tackling the redesign of the music app as a responsive layout rather than fixed sizes seemed to be the only logical decision.
I believe it's the attention to detail that makes a product or experience beautiful and memorable. As a perfectionist, I designed every icon and interface carefully with careful precision, all aligned with the pixel grid to ensure they had the crispest detail on high resolution displays.
Australia’s Music Streaming service.
Nominated in the Aria Awards for Outstanding Digital Service against the likes of iTunes, Spotify, and YouTube.