← Home
Button TextButton TextButton TextButton Text

Guvera: Music Streaming App

My responsibilities...

My responsibility was to assist the Lead Product Designer with adding new functionality/features, improving the overall app user interface, adding micro-interactions, creating pixel perfect icons, as well as putting together concept designs and wireframes within presentations which we proposed to the CTO. I also assisted the Lead UX Researcher with concepting UX flows, creating and refining personas, and with UX research tasks.

for

Guvera Australia

|

June 2016

We constantly re-imagined existing features and explored completely new ideas to improve the platform and to bring free music to 14,000,000+ users across 8 countries.

What’s a Rich Text element?

Sunheading

Another subheading

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

And here is a really important quote that I'll want to highlight.

• • •

• • •

My responsibilities...

My responsibility was to assist the Lead Product Designer with adding new functionality/features, improving the overall app user interface, adding micro-interactions, creating pixel perfect icons, as well as putting together concept designs and wireframes within presentations which we proposed to the CTO. I also assisted the Lead UX Researcher with concepting UX flows, creating and refining personas, and with UX research tasks.

• • •

Project details...

Guvera’s core user experience and interface revolves around discovery, recommendations and building up your taste profile. These three pillars define the foundation that brand engagement is layered on top of.

It was mid 2015, when I first transitioned from Graphic Design to Product Design. This is were I found my affinity for product design, and learnt much of my skills as a product designer, much thanks to my colleagues. Here I worked directly alongside Lead Product Designer Adam Zelinski (now FLG Fitness), Lead UX Researcher George Fonseka (now Flight Centre) and Android Designer Dan Ross (now Shopify).

We thought of Guvera as an ecosystem that will serve both music enthusiasts and brands.

Guvera Music Player taking advantage of the device space

The Guvera music player picks average colours from the album artwork. To make sure the text and icons were always visible we levelled out each of the RGB values to a minimum. ie. RGB (10, 100, 100) and the minimum was 50 it would end up as RBG (50, 100, 100)

Album Covers on Guvera using the average colour picker

At Guvera, we have created various ways to integrate native branding directly into the app, developing layouts for standard and premium ads as well as sponsored content that feels like natural extensions of, and partnerships with, the Guvera brand rather than distractions from the experience. This was accomplished through curated playlists, video content, articles and custom brand channels.

Promoted Article on Givera, displayed on iPad and iPhone

We know that 90% of users don't want to pay for music so by creating these experiences, we have been able to attract a wider audience.

Brand Profiles on Guvera


Feature: Buffered Music

Incentivise Active Users by Giving them Access to Buffered Music

To increase our free user's time listening to music via our app, stakeholders requested we add a 'Buffered Music' section within all of our free user's 'Your Music' area. Listening to stations and playlists here would save the user data, however, they were requested to listen for a period of time in order to unlock the feature.

"The required listening time was not to be communicated to the user, a limitation we were required to work with."

Understanding that this feature could come across as confusing and frustrating to the user meant that we wanted to communicate as much as we could to the user, including both the benefits and the eligibility of the feature. We made discoverability of the feature easy by surfacing it within the user's 'Your Music' section, as it is akin to the 'Offline Music' feature (for paid users) and acted in a very similar way, as well as passing the Your Music criteria of being music / artists / playlists that the user had actively 'liked' or listened to completely. We chose to display the 'Buffered Music' section even before a user had unlocked it, in order for them to discover the feature, open and learn about it's benefits, so they can choose to increase their listening time if they wanted to unlock it.

We used both written and visual cues to inform the user that a requirement was to be met before the feature could be unlocked. A progress bar gave the user a sense of progression, without needing to communicate the specific listening time to the user. We also included the instructions "Keep listening to unlock this feature" to make it completely clear what the requirement was.

A preview of the Buffered Music user flow
I proposed to measure the success of the feature following the below criteria:
  1. Test the discoverability of the feature: over 1 month, find the total number of free users that had opened 'Your Music', and determine the percentage that opened 'Buffered Music' – if below 50%, consider displaying a new feature tooltip/hint
  2. Test the value and desirability of the feature: over 1 month, find the total number of users that opened 'Buffered Music' and see if their streaming has increased and by how much, and how many have successfully unlocked it or not. If percentage is lower than 10%,
  3. Test the achievability: Conduct user surveys on users that have and haven't unlocked the buffered music after 1 month and measure their awareness and satisfaction of the feature.

Project: Guvera 3.0

Guvera 3.0 marked the release of many new and exciting features, as well as improved profile, artist and playlist layouts.

Myself and the Lead Product Designer worked together to prepare the app for our 14,000,000+ users across 8 countries.

• • •

Applications Used

Sketch (UX/UI designs), Principle (micro animations), Atlassian (workflow management), Slack (team communication)

Applications Used

Sketch for UX and UI Designs

Illustrator for Iconography Design

InVision for low-fidelity prototyping

Principle for high-fidelity prototyping

Slack for team communications