Company:

Linkfire

What I did:

Research

Interaction Design

Visual Design

Documentation

Company:

Linkfire

A digital marketing platform for the music industry, Linkfire helps record labels and independent artists route millions of fans across the globe to the content they love within the apps they love.

Background

Music marketing professionals are using Linkfire’s platform to setup embeddable widgets and use them to promote music content on their branded websites. Their main goal is to route fans to external services (streaming platforms, artist stores, ticketing providers, etc.).

The task

Redesign the widget to improve user engagement and conversion rate.

widget-levels-mockup

Research

During the research phase, I sought to uncover the needs of the customers who promoted music through widgets and how their fan base engaged with the embedded content.

data-analysis@2x

Data Analysis

Data Analysis

I used previously-gathered anonymized data to gain insight into various usage metrics such as engagement rate, conversion rate, and traffic sources.

customer-interviews@2x

Customer Interviews

To better understand their perspective, I interviewed several customers who used the feature to promote content on entertainment blogs or music websites.

use-cases@2x

Use Cases

To gain a better understanding of how the widgets were being displayed, I reviewed several client websites and documented the common use cases.

prior-knowledge@2x

Prior Knowledge

With help from product owners and developers, I collected all the previously reported usability issues, client feedback, and technical challenges.

report@2x
report-2@2x

Key findings

The research phase concluded with an investigation report which included metrics consolidated through data analysis, documentation of significant case studies, an overview of user needs outlined through the jobs-to-be-done framework, a breakdown of the technical requirements and high-level findings:

01

Two objectives

The customers were using the widget to either showcase releases or route fans to external destinations (Spotify, Apple Music, Ticketmaster, etc.).

02

Usability issues

While users knew the widget was an interactive element, there was no clear way to differentiate between albums, tracks, playlists, or videos.

03

Backward compatibility

The new widget version had to work with content that was already online on various entertainment websites.

04

Modularity

To ensure better scalability, flexibility, and reusability, a modular design framework had to be implemented.

Ideation

I sketched several ideas and brainstormed some possibilities and features with the product team. The significant areas I focused on during the exploratory phase were layout, playback controls, and use of color.

ideation-icons
color-processing

Use of color

The design of an album’s cover is a crucial aspect of the album itself. I wanted to have the artwork as the core branding element of the interface. To achieve this, I explored methods of using it not only as a graphic element but also as a source for extracting accent colors automatically. 

To ensure enough contrast when working with various interface elements, I systematized a series of steps to manipulate the hue, saturation, and brightness of the accent color - all while keeping in mind the minimum contrast ratio requirements.

Solution

To adhere to the ways customers were using the previous version of the widget and address the key findings of the research process, I designed two separate widget types. They use the same set of information but display it differently based on the intended purpose.

Showcase Widget

widget-showcase (2)

It highlights the artwork, and it’s primarily employed for displaying a release as part of a collection or gallery.

Click-Through Widget

Click-Through Widget

widget-clickthrough

It displays all options when loaded, and it’s primarily utilized for directing fans to external platforms.

It displays all options when loaded, and it’s primarily utilized for directing fans to external platforms.

phone-widget-demo-v2@2x
full-width-widget@2x (1)

Flexibility

The building blocks of the interface can transform and rearrange according to the size and aspect ratio of the widget. Scaling down to the minimum size still supports essential click-through functionality by discarding the playback controls.

widget-big@2x (1)
widget-med-small

Modular Design

To ensure better scalability and efficient design to development handover, I built a small modular design framework based on reusable interface elements.

Feature Scalability

The layout of the widget is built with scalability in mind, allowing for components to be rearranged or updated to support multiple types of content.

dummyimg