Product
Found is a music discovery and connection platform designed to help independent artists present their work professionally and build stronger relationships with fans and industry professionals.
UX/UI Case Study
Product Design Dashboard
A product design and front-end development project for Found, a music platform that connects independent artists with fans and industry professionals through responsive discovery, profiles, authentication, and real-time messaging.
Role
UI/UX Designer & Front-End Developer
Product strategy, interface design, React implementation
Platform
Found Music App
Music discovery, artist profiles, messaging
Tools
Figma, React, Next.js
Tailwind CSS, Firebase, component-based UI
Scope
Design + build
Responsive UI, auth flows, real-time messaging
Artist profiles
Designed
Messaging
Live
Responsive UI
Built
Project overview
A responsive music platform for discovery, identity, and connection.
Found was designed as a digital product experience where independent artists can showcase themselves professionally and users can discover, browse, and communicate through a clean platform interface.
User experience
The platform supports artist browsing, profile exploration, music content discovery, authentication flows, and real-time messaging between users.
Product objective
The goal was to design and build a responsive, modern, user-centered platform that balances artist identity, discovery, and communication.
Implementation
The project combined Figma product design with front-end implementation using React, Next.js, Tailwind CSS, Firebase authentication, and reusable UI components.
Problem statement
Independent artists need a better way to be discovered and contacted.
The challenge was to design a product that balances music discovery, artist identity, and direct communication in one cohesive experience, then translate that system into scalable front-end views.
1
Independent artists need better digital spaces to present their music, identity, visuals, and updates in a professional way.
2
Music discovery platforms can feel crowded or impersonal, making it harder for emerging artists to stand out.
3
Fans and industry users need clearer ways to browse artists, view profiles, and move from discovery into meaningful interaction.
4
The product needed clean information architecture and scalable front-end patterns that could support profiles, messaging, and content modules.
Goals and product objectives
Design goals focused on discovery, engagement, and scalable implementation.
The project needed to feel modern and intuitive for users while also being practical to build with reusable components, responsive layouts, Firebase authentication, and real-time messaging.
3
Core user groups
Artists, fans, and industry professionals shaped the platform structure.
100%
Responsive coverage
Layouts were planned for desktop, tablet, and mobile viewing contexts.
Reusable
Component system
Cards, profile modules, navigation, and message patterns were built for scale.
Live
Firebase flows
Authentication and real-time messaging informed the product architecture.
Research and discovery
Product thinking focused on artist needs, fan engagement, and digital discoverability.
I approached Found as both a UX design challenge and a front-end product system. The experience needed clear browsing, expressive artist profiles, simple account access, and communication flows that worked across devices.
Artist identity needs structure
Artists need more than a feed. Profiles have to communicate sound, image, credibility, and current activity in a way that feels curated.
Discovery has to stay lightweight
Fans need quick ways to browse, scan, and decide where to go next without dense navigation or overloaded content blocks.
Messaging turns browsing into connection
Real-time communication adds product value by helping users move from passive discovery into direct artist, fan, or industry interaction.
Platform experience design
From product structure to implemented front-end views.
The workflow moved from information architecture and responsive Figma design into React and Next.js implementation. The goal was to make the platform feel cohesive from browsing to profiles to messaging.
01
Information architecture
Mapped the platform around discovery, artist profiles, content browsing, account access, and communication flows.
02
User flows
Defined paths for signing in, browsing artists, opening profiles, engaging with content, and starting real-time conversations.
03
Interface design
Created responsive Figma screens for platform browsing, profile modules, dashboard content, navigation, and messaging patterns.
04
Front-end implementation
Translated the system into reusable React and Next.js components styled with Tailwind CSS and supported by Firebase flows.
Interface gallery
More product visuals from the Found dashboard experience.
The screens below are presented larger and uncropped so the interface details, spacing, navigation, and product modules are easier to see across desktop and mobile.
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7
Core product interfaces
A polished platform experience for artists, fans, and music industry users.
The final solution combines responsive platform screens, artist profile interfaces, browsing flows, messaging patterns, and reusable UI decisions that translate cleanly into front-end views.
Discovery-first structure
The experience makes artist discovery feel immediate, giving users clear paths into profiles, featured content, and platform actions.
Artist profile modules
Profile areas were designed to support identity, music content, visual presentation, and professional credibility.
Messaging experience
Real-time messaging patterns support direct communication between artists, fans, and industry professionals.
Scalable front-end system
Reusable React components, Tailwind utility patterns, and Firebase integrations keep the product easier to extend.
Design system and UI decisions
A scalable UI system for a modern music platform.
The visual system aligns Figma design work with coded implementation. Typography, spacing, cards, navigation, profile modules, content layouts, and messaging patterns were designed to stay consistent across screen sizes.
#08090A
Ink
#F5F7FA
Surface
#9E62EC
Action
#D8066E
Signal
#7F56D9
Insight
#4B4F58
Text
Color
A dark digital platform foundation uses purple, magenta, and lavender accents to create a modern music-tech interface.
Typography
Large headings support artist identity and discovery, while compact body text keeps profiles, cards, and message areas readable.
Components
Cards, navigation, profile sections, content layouts, auth states, and messaging modules were designed as reusable patterns.
Accessibility
The system prioritizes strong contrast, clear labels, predictable navigation, and touch-friendly spacing across responsive breakpoints.
Outcome and impact
A stronger digital product foundation for artists and fans.
The project demonstrates how product design and front-end development can work together: a polished UX/UI concept supported by responsive implementation, reusable components, authentication, and real-time interaction patterns.
Stronger artist presence
Found gives independent artists a more polished digital space to present their work, identity, and activity.
Improved engagement
Discovery, profiles, and messaging work together to help fans and industry users move from browsing to connection.
Scalable product foundation
The combination of Figma design systems, React components, Next.js structure, Tailwind CSS, and Firebase creates a practical base for growth.
Next steps
How Found can keep evolving.
The next phase would deepen artist tools, improve discovery quality, and expand the messaging and dashboard system while preserving the reusable React, Next.js, Tailwind CSS, and Firebase foundation.
Expand artist profile customization with richer media sections, verified links, and release highlights.
Add smarter discovery filters for genre, location, availability, and professional opportunities.
Improve messaging with read states, conversation search, attachments, and safety controls.
Extend the component system with more empty states, validation states, and dashboard analytics modules.