Context
Our project group aims to explore effective ways to enhance music discovery and organization for users on our Song Catalogue platform, recognizing that many users seek a more personalized and engaging experience beyond typical streaming services. Our task focuses on developing a platform that is accessible, intuitive, and enjoyable to interact with, providing users with new ways to discover, catalog, and connect with music that resonates with them.

Team:
Roles: 2 Web Developers

Role:
Web Developer

Timeline:
April - May 2026

Technical and UX Skills:
HTML, CSS, PHP, SQL, User interface

Problem Statement and Design Goal

Many music enthusiasts struggle to find a platform that allows them to easily discover, organize, and engage with music in a meaningful and personalized way. Existing streaming services often prioritize broad recommendations over tailored experiences, making it difficult for users to explore music that aligns with their unique tastes and preferences.

To create an interactive, user-centered platform that enhances music discovery and organization by allowing users to customize playlists, explore trends, and access curated recommendations. This design will provide a more personalized and immersive experience, enabling users to connect more deeply with the music they love.4o

‍


‍

Song Catalogue?

Who

Built a server-side website designed for both music enthusiasts and potential clients, providing a platform to explore, organize, and share music.

What

The Song Catalogue website is a centralized platform for music enthusiasts to explore, categorize, and share their favorite songs and albums. It provides a personalized experience that makes discovering new music easy and enjoyable, allowing users to engage with music in a more interactive way.

Why

We created this platform to bridge the gap between casual listeners and industry stakeholders, such as artists or record labels, by offering an accessible and data-rich space for music discovery. By catering to both individual users and potential clients, the website aims to enhance connections within the music industry and offer a more engaging experience for all music lovers.

Design Justification/Reasoning

Design Choices

Color Scheme: Soft background tones with dark accents give a modern, creative vibe, making album art and song details pop for an immersive music experience.
Typography: Clean, sans-serif fonts enhance readability and professionalism, focusing attention on the music content.
Intuitiveness: User-friendly tiles make it easy for listeners to browse, while an organized table layout aids admin management.
Accessibility: High contrast, simple layout, and screen reader-friendly design ensure usability for all, enhancing inclusivity.
Interactivity: Subtle hover effects and transitions provide feedback, making exploration engaging and responsive across devices.
‍

Consumer Design

Tiles are more effective for consumers as they provide a visually engaging and easily scannable way to browse music.

Admin Design

The table layout supports quick editing and sorting by fields like song name, artist, and genre, making it ideal for administrative tasks.

Music Vibe

The website’s design creates an inviting experience for music listeners, with clean, visually immersive tiles that showcase album art and song details, like browsing a digital record collection. This sleek design keeps the focus on music, making exploration both enjoyable and intuitive.

Login Feature

Utilize Forms and Passwords to allow Admin users to have custom logins

Done using SQL insert queries

Admin Features

Admin View All Page

Admins on the Song Catalogue website have full control to edit content and access a detailed dashboard showing real-time data on user engagement and trends. This enables them to make data-driven updates that keep the platform current and tailored to users’ interests. In contrast, consumers have a streamlined experience focused on curated music content and recommendations without direct access to backend data or editing tools.

Admin Edit

The Admin Edit page enables logged-in admins to update song details and associated tags within the music catalog. It retrieves the selected song's data, pre-filling fields like song name, artist, album, genre, and release date in a form. Admins can edit these fields, upload a new image (with validation for type and size), and submit updates, which are saved to the database. Non-logged-in users are prompted to sign in, ensuring secure access to editing functions. This setup provides an intuitive interface for efficient song management in the catalog.

Consumers

Consumer Experience

PHP code powers a song catalog platform for both admins and Consumers to share music. Logged-in admins can add new songs by entering details, selecting tags, and uploading images, with validation to ensure data accuracy and file compatibility. Successfully submitted songs are stored in the database, ranked, and linked with tags, while the image file is saved in a designated directory. A confirmation message confirms the addition, and non-logged-in users are prompted to sign in to maintain secure access.

Filter

The tag filter feature is invaluable for both admins and users, as it allows quick and intuitive navigation through the song catalog. By categorizing songs with tags such as genre, mood, or artist style, admins make it easier for users to explore and discover music that aligns with their interests. Users can quickly filter songs based on specific tags, helping them find new music without manually browsing through extensive lists. For admins, the tag filter also streamlines content organization and curation, allowing them to manage song categories efficiently and ensure that users can easily access and explore new or relevant music.

Recap

1
Reflect

In creating the Song Catalogue website, I learned how crucial it is to balance user-friendly navigation with detailed, data-rich content. Designing an interface that accommodates both admin management and user exploration highlighted the need for clarity and intuitive filtering options, such as the tag filter, which enhances the music discovery experience. I also deepened my understanding of database interactions and user access controls, ensuring that the right content and tools were available to different user roles.

2
More time?

If I had more time, I would expand the customization options for users, allowing for more advanced filtering and personalized playlists. Additionally, I would implement real-time analytics for admins to help monitor trends and optimize content. Another enhancement would be a recommendation engine that leverages user interaction data to suggest new songs based on preferences, creating a more tailored user experience.

3
Joy

What I enjoyed most about creating the Song Catalogue website was designing the tile-based layout and tag filtering system, which brought both functionality and aesthetics to the platform. Building a visually engaging interface where users could easily browse and explore music made the project feel rewarding. I loved the process of balancing usability with design elements, ensuring that users could quickly find and discover new songs in a way that was both intuitive and enjoyable.

Feel Free to Watch or Scroll!

https://special-space-xylophone-4j767xjgr4g73jvw4-8080.app.github.dev/