Overview

role:

ux/ui designer

timeline:

12 weeks

tools:

figma

photoshop

type:

e-commerce page

responsibilities

research

information architecture

ui design

design system

component library

user flows

developer handoff

Designing a scalable e-commerce platform for vinyl enthusiasts

Vertigo Vinyl is an online record store offering thousands of products alongside editorial content, artist pages, labels, and collections. The challenge was making all of that content easy to explore without overwhelming users.

The project focused on creating a scalable interface system that improves product discovery while supporting future growth.

Design Challenges

The platform combines commerce with editorial content, requiring users to navigate a large amount of information without feeling overwhelmed.

  • Large and diverse product catalog.
  • Editorial content alongside ecommerce.
  • Reusable templates for future expansion.
  • Consistent experience across desktop and mobile.

Project Scope

Unlike a marketing website or landing page, Vertigo Vinyl required a complete e-commerce ecosystem capable of supporting different user journeys and a growing product catalog.

The project included the design of:

  • Homepage
  • Mega menu
  • Search mechanisms
  • Shop pages
  • Product Detail pages
  • Artists and Label pages
  • Cart
  • FAQ
  • About
  • Contact

Each page was designed as part of a unified experience rather than as isolated screens, allowing users to move seamlessly between browsing, discovering artists, purchasing products, and accessing support.

Design System

A scalable design system kept dozens of pages and templates visually consistent while making future expansion easier.

  • Reusable UI components for product, editorial, and account pages.
  • Standardized typography, spacing, colors, and interactions.
  • Flexible layouts adaptable to different content types.
  • Shared components that simplified developer handoff.

This approach reduced repetitive design work while keeping the experience cohesive across the platform.

Information Architecture

The platform combines shopping, editorial content, artists, and record labels, requiring navigation that stays clear despite the amount of content.

  • Progressive disclosure to reduce cognitive load.
  • Consistent navigation across every page type.
  • Predictable layouts for faster exploration.
  • Clear hierarchy between editorial and commerce.
  • Quick access to purchasing actions.

The result is an experience that remains easy to navigate as the catalog continues to grow.

Responsive Experience

Desktop and mobile were designed in parallel to provide a consistent shopping experience across devices.

  • Layouts adapted to each breakpoint instead of simply shrinking.
  • Navigation optimized for touch interactions.
  • Readable typography and spacing across screen sizes.
  • Consistent visual language from desktop to mobile.
All Projects