Layers

Overview

Layers, the world’s first social sampler, sought a designer to enhance the community platform’s visual experience in preparation for a soft launch in September 2022. The Layers team played a crucial role in shaping the details of this design refresh, identifying three application views that would benefit from an update before the launch, the user profile page, the post/player page, and the explore page.

Objectives

1. Visual Enhancement: Improve the overall look and feel of the site, making it more inspirational while retaining its functionality.
2. Metadata Exposure: Provide more contextual cues to help users explore and discover content and creators.
3. High-Fidelity Mockups: Create detailed design mockups and front-end code that would be delivered to the engineering team.

Our goal included adding a post’s metadata in a more natural place. These include but are not limited to, beats-per-minute (or BPM), audio stems, time-based comments, and endorsed flips. On Layers, a user samples someone else’s musical idea to create a flip and publish a new version. When the original creator publicly approves of this new version, an endorsed flip gets generated. Each post and video player appears in various places and states, so I approached things systemically. Posts live on a user’s profile in the Explore view and can be in an editable state.

The engineering team strategically decided to change the video’s aspect ratio to 9x16, enabling more consistent video capture from a mobile phone. I stress-tested the new aspect ratio across the application, uncovering and resolving visual bugs. The final deliverable included high-fidelity mockups for three key pages: the user profile page, the post/player page, and the explore page. Additionally, I updated the HTML and CSS for the Ruby on Rails application, delivered via a few pull requests on GitHub.

Design Approach

My design approach began with a thorough visual design pass for all three pages, focusing on typography and visual consistency. We optimized layouts for desktop and mobile web experiences to ensure the UI accommodates a variety of devices. Making space for more metadata throughout each page became one of the biggest challenges.

Impact

This visual refresh positions Layers for a successful soft launch, setting the stage for future growth and increased user engagement. By focusing on aesthetic and functional improvements, the redesign enhances the overall user experience and supports Layers’ mission to facilitate a new culture of musical collaboration.