![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 159 190" xmlns="http://www.w3.org/2000/svg"><g d="M 158.956 138 L 119 138 L 119 42.446 L 159 2 Z M 39.868 162.364 L 0 122.39 L 0 39.974 L 39.868 0 Z M 78.938 97.221 L 119 97.221 L 119 138 L 67.562 190 L 40.359 162.712 L 78.938 124.013 Z" fill="transparent" height="189.99999947846123px" id="pJedgxBn0" width="159px"><path d="M 39.956 136 L 0 136 L 0 40.446 L 40 0 Z" fill="rgb(255, 255, 255)" height="136px" id="PfaV7hBGi" transform="translate(119 2)" width="40px"/><path d="M 39.868 162.364 L 0 122.39 L 0 39.974 L 39.868 0 Z M 78.938 97.221 L 119 97.221 L 119 138 L 67.562 190 L 40.359 162.712 L 78.938 124.013 Z" fill="rgb(0, 0, 0)" height="189.99999947846123px" id="rWSc6CRIY" width="119px"/></g></svg>)
Mysticity
Official Band Website
Client
Mysticity
Platform
Figma, FigJam, Adobe Photoshop, Webflow
Role
Ux Designer
Focus
UX Research, UI/Visual Design, Brand Expansion, Web Build
Designing the Official Website for Mysticy
A bold digital presence for a rising rock band
Introduction
Mysticy is an emerging rock band known for its atmospheric sound, poetic lyrics, and electrifying live performances. They had an existing logo and growing fan base, but lacked a digital home that reflected their unique identity and supported their goals: promoting new music, selling merchandise, and booking shows.
I was brought in as their UX/UI designer to create a high-impact website experience that translated their musical personality into visuals and interactions.
The Challenge
Mysticy already had a logo—moody, sharp-edged, and mystical—but no extended brand system. Their online presence was scattered across social media platforms, making it difficult for fans, press, and booking managers to find reliable information.
Problems we needed to solve:
❌ No central site for music releases and live show updates
❌ Logo existed, but no consistent brand system (colors, typography, textures)
❌ Band wanted a modern visual identity without losing their raw, underground spirit
Research & Discovery
Interviews
I interviewed:
All four band members (vision, tone, personality, musical influence)
6 fans (what they expected from a band website)
2 booking managers (what they need to evaluate a band)
Key Insights
Fans wanted quick access to:
Music streaming links
Tour dates
Merch drops
The band wanted:
A visual identity that feels “mystical, dark, cinematic, and alive”
A site they could update easily after launch
Booking and press needed:
A press kit (bio, photos, tech rider)
Contact information
Brand Expansion & Visual System
Starting with the existing Mysticy logo, I built a cohesive brand identity.
Brand Direction Themes
Theme | Visual Notes |
|---|---|
Mystic + Cinematic | Fog textures, prism light, fractal overlays |
Dark + Emotional | Deep color palette: blacks, obsidian, violet, ember |
Powerful + Raw | High-contrast typography, bold photography |
Final Brand Selections
Typography: Industrial sans-serif for headers, serif with sharp edges for accents
Color Palette:
Primary: Obsidian Black, Electric Violet
Secondary: Copper Ember, Iron Gray
Imagery: High-grain photography, neon lighting, abstract smoke textures
Design Iterations
Wireframes → Mid-Fi → High-Fi
Round 1 explored three conceptual directions:
"Fog & Fire" - atmospheric, video hero, slow transitions
"Ritual" - heavy symbols, vertical scrolling journey
"Voltage" - energetic, glitch effects, bold typography
The band chose a hybrid of Fog & Fire + Voltage.
Build & Launch
The final site was built on Webflow for easy band updates.
Features delivered:
✔ Full responsive design (mobile-first)
✔ Tour calendar connected to ticketing links
✔ Social media smart embeds + Spotify/Apple music players
✔ SEO optimization for band discovery
Conclusion
This project demonstrates how UX research, strong visual identity work, and thoughtful content strategy can help artists amplify their presence and revenue.
For Mysticy, the website was more than a marketing tool—it became a digital stage.
