Esoteric Collective Website Design
Abe Treviño
Esoteric Collective
In 2022, I was contracted to design the website for a music artist collective I was collaborating with in Austin, TX. Their aim was to create a main hub for their collective's work, including creating an artist 'experience' for each of their popular artists / DJs.
Step 1: Discovery & Scope Definition
I began the process with mid-fidelity wireframes in Figma, putting down the layout for each major page: Home, Roster, Releases, and About, plus a base template for each artist’s unique experience.
These wireframes helped me define spatial hierarchy, user flow, and content prioritization without being distracted by aesthetics.
The objective was to create a central digital hub that showcases the collective's brand identity, promotes their artists, and drives engagement through music releases and live visuals.
Key requirements included:
A visually immersive home page with links to the artists' music
Artist-specific ‘experience’ subpages
A release archive
A clear and accessible About page
Technical Takeaway:
Gathered brand assets including logos, high-resolution album covers, video content, and branding guidelines.
Mapped out the sitemap:
Home, Roster, Releases, About, and dynamic artist pages nested under Roster.After wireframing & low-fidelity design, decided on Wix due to its flexible CMS, media-rich templates, and rapid prototyping capabilities.
Step 2: Setting Up the Wix Environment
Description:
Created a new project in Wix
Installed necessary Wix apps including:
Wix Gallery for high-res media
VideoBox for embedded performances
Wix Forms for EPK (Electronic Press Kit) requests
Step 3: Designing the Home Page
Description:
Built a scroll-based homepage using a full-screen hero video montage featuring footage from past shows and festivals.
Below the fold: introduced the collective’s identity, music philosophy, and a call-to-action to explore the Roster or Releases.
Technical Takeaway:
Used anchored sections for seamless navigation and scroll interaction effects (fade-ins, parallax) for added visual engagement.
Applied a color overlay and text-safe padding to ensure readability over multimedia backgrounds.
Mobile-first adjustments ensured visual harmony across devices.
Step 4: Developing the ‘Roster’ (Artist Page)
Description:
Designed the Roster as a card-based layout with artist cards (image + name).
Clicking 'experience' button takes users to a dedicated artist page.
Technical Takeaway:
Implemented dynamic pages using Wix CMS collections, allowing artists’ data (images, bios, videos) to be easily managed.
Custom fields included: Artist Logo, Hero Image, Embedded Videos, Event Galleries, and EPK Request Form.
Used smooth anchor navigation within each experience for intuitive scroll-to-section behavior.
Step 5: Crafting Artist ‘Experiences’
Description:
Each artist page was structured into three immersive content blocks:
Hero Section:
Large-scale branding with the artist’s custom logo, subtle animated background, and signature visual motif.
Live Experience:
Embedded high-res images and short clips from live performances, DJ sets, and behind-the-scenes visuals.
Stylized using gallery carousels and video loops to simulate a backstage vibe.
Professional Touchpoint:
A custom form for EPK requests, letting industry reps and event planners easily reach out.
Technical Takeaway:
Used Wix VideoBox to host auto-playing clips with no controls for cleaner presentation.
EPK form connected to Wix CRM, sending auto-responses and organizing inquiries by artist.
Step 6: Populating the ‘Releases’ Page
Description:
Showcased a visual archive of the collective’s music releases including singles, EPs, and collab projects.
Step 7: Finalizing the ‘About’ Page
Description:
Communicated the collective’s origin, mission, and growth story.
Included imagery from community work, collabs, and a timeline of major events.
Technical Takeaway:
Emphasized storytelling with split layout sections and integrated 'experience' buttons in artist pages.
Designed responsive contact section with email, socials, and booking links.
Step 8: Optimization & Launch
Description:
Technical Takeaway:
Integrated performance optimizations like lazy loading, compression of videos, and font optimization.
Step 9: Post-Launch Support
Description:
Trained the collective’s internal team on how to use the Wix Editor and CMS to maintain updates.
Offered ongoing support for seasonal content refreshes and expansion as needed.
The project was concluded in 2022.
Like this project
Posted Jul 10, 2025
Designed a dynamic website for Esoteric Collective using Wix, enhancing their digital presence and artist engagement.
Likes
0
Views
15
Timeline
Feb 14, 2022 - Mar 14, 2023
