Underground Desi

WEB DESIGN
IxD

An online database to discover and support music artists with South Asian roots.

Underground Desi header image.

Background

For my senior project, I wanted to get creative and go beyond designing for a prompt. I chose to design and prototype a website that acts as a database of music artists with South Asian heritage. The purpose of the website is to introduce people searching for new music to the sounds of these artists, in order to support South Asian creatives who are breaking into the modern music industry.

Challenges

The primary challenge for the site design was creating a visually engaging interface that also allowed for a seamless search and discovery experience. It was key that the data relevant to each artist and desired by users hoping to learn more about them was presented on the site in a clear, consumable way. Visually, my aim was to bring the design of a traditional database to life, with a bit of South Asian flair and without compromising functionality.

Discovery and ideation

Comparative analysis
In order to gain a stronger understanding of what kind of content should live on Underground Desi and how it can be organized effectively, I conducted a comparative analysis of a website with a similar mission called Black Artist Database.
Annotated comparative analysis.
Site mapping
I created a site map to illustrate the organization of the content on the site and to decide on the nomenclature of the navigational elements. The hierarchy of nodes represents the relationships between each piece of content—what information will be nested under what page and alongside what other information.
Site map.

Wireframing

Given time constraints, I focused on wireframing the more content heavy “Database” page and an example artist page in Figma. Below are low- and mid-fidelity wireframes for those pages.
Low-fidelity wireframe of homepage.
Mid-fidelity wireframe of homepage.
Low-fidelity wireframe of artist page.
Mid-fidelity wireframe of artist page.

Testing and iteration

I periodically tested the wireframes and an interactive prototype with users throughout the design process, incorporating their feedback related to the navigation menu, alphabetical sort and shuffle functions, grid layout, and song preview overlays. The final prototype has a more concise filtering experience, a more visually balanced homepage, and more functional components.
High-fidelity wireframe of homepage.High-fidelity wireframe of artist page.

Design system

I put together a basic design system in Figma as I made color and typography choices, determined margins and grid rules, and designed reusable components for the wireframes.
Colors, typography, and layout grid.Component library.

Final prototype

A recorded walkthrough of the prototype, highlighting the functionality and interactivity of the site, was showcased at an open event for graduating design students. I received much positive feedback from those who attended regarding the site’s purpose and potential impact, lively yet inviting UI, and comprehensive search and discovery flows.
VIEW PROTOTYPE

More works

TravelBoss header image.

TravelBoss

UX/UI
IxD
Wasteless header image.

Wasteless

UX/UI
IxD
WISE Summit header image.

WISE Summit

BRAND
WEB DESIGN
SOCIAL
PRINT
SWAG