Case Study

GROOVSY

Frontend dev Media site Platform: Web

Entertainment, Web Development, Web Design

Overview

A music player interface, designed to keep the album art in front

GROOVSY is a front-end build for an entertainment and media brand, focused on a clean, media-forward layout for browsing and playing content. I designed the identity and built and styled the interface; it is front end only.

Role: Branding, design and front-end build
Scope: Interface only, no back end
Focus: Player, track list, responsive layout
Platform: Web: desktop, tablet and phone

Media-Forward Layout

The album cover leads, the controls stay close, and everything else stays out of the way.

Interface

One layout, three screens

Desktop, tablet and phone. The same structure on every screen: a dark header with the vinyl mark, the cover art, the player, then the track list.

Close-up of the GROOVSY player on a tablet and a phone: album cover, play control with time and volume, and a track list with title, artist and a heart with a count — **Player close-up.** Play, progress, time and volume sit directly under the cover. Each track in the list shows its title and artist, with a heart and count at the right.

Branding

A vinyl record as the logo, three colours to match

Logo and colour. A vinyl record with the name on its centre label, and a palette of black, dark navy and a single green accent for interactive details.

Feature Breakdown

What the interface includes

Audio player

Play control, progress with elapsed and total time, volume and an overflow menu, under the album art.

Track list

Each track shows its title and artist in a simple, readable list below the player.

Likes

A heart and a count on every track.

Responsive layout

One layout that holds on desktop, tablet and phone.