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.
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.
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.
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!
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 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.
• • •
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.
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)
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.
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.
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.
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)
Sketch for UX and UI Designs
Illustrator for Iconography Design
InVision for low-fidelity prototyping
Principle for high-fidelity prototyping
Slack for team communications