🌙 The Shiny Night

Project overview

The Shiny Night is a visually immersive digital portfolio and event promotion platform highlighting creative projects and nocturnal installations. The goal was to build a responsive WordPress-powered site with smooth scrolling, rich media, and a user-first layout—designed for presenting visuals in a way that feels magical after dark.

Client :

Verdant

Tools :

WordPress, Elementor,, Yoast SEO,, Figma

Duration :

May 2025

Role:

UX/UI Designer & WordPress Developer

Live Link

The problem: 

The creators needed a platform that could beautifully display night-themed visuals—ranging from photography and video to gallery events—without compromising performance or mobile experience. Key challenges included:

  • Heavy media affecting page load times

  • Templated layouts that failed to emphasize visual storytelling

  • Inconsistent typography and content layout across devices

  • Lack of structured content for easy updates

The goal: 

  • Design a visually-focused, responsive layout with smooth transitions

  • Highlight imagery and video in immersive gallery sections

  • Enable easy content management for future projects and events

  • Maintain fast load speeds despite rich media

  • Optimize SEO and accessibility throughout the site

Research & Strategy

  • User Profiles: Creative professionals, event attendees, commissioning organizations

  • Core Requirements: Fast-loading galleries, smooth navigation, mobile responsiveness, clear project documentation

  • Competitive Insight: Reviewed artist and night-installation portfolio websites to identify best practices for media presentation and narrative flow

I conducted user research and usability mapping to uncover how motorsport fans consume content online. The focus was on optimizing flow, speed, and engagement—ensuring the platform meets the expectations of an audience fueled by adrenaline and real-time updates.

Sitemap

  • Home (featured visuals + event announcements)
  • Portfolio (interactive galleries by category)
  • Case Study Pages (detailed storytelling for each project)
  • About & Contact (credentials + social links)

Wireframes

  • Built low-fidelity frameworks in Figma, emphasizing visual hierarchy and flow
  • Live navigation from hero visuals through project galleries to details

Prototype

  • Simulated responsive behavior for desktop, tablet, and mobile
  • Included opening animations, smooth scrolling, and lightbox effects

WordPress Development

  • Theme & Layouts: Customized lightweight theme and built sections using Elementor
  • ACF Structures: Created custom post types for Projects, Events, and Galleries
  • Media Handling: Implemented lazy-loading and compressed image formats (WebP)
  • Performance: Enabled caching, CSS/JS minification, and image optimization
  • SEO & Accessibility: Integrated Yoast SEO, alt-text, appropriate heading structure, and keyboard navigation

🚀 Results & Impact

  • Media-Rich Performance: High-fidelity visuals with fast page loads—even during heavy content sections
  • Increased Engagement: Users reported deeper interaction time due to immersive visuals
  • Scalable Storytelling: The CMS now allows effortless content additions and event updates

📌 Key Takeaways

  • Performance-first mindset is vital for media-heavy websites
  • Custom post types empower consistent, scalable content updates
  • Visual storytelling benefits significantly from interactive transitions and responsive layout structures

📱 Responsiveness & Accessibility

  • Responsive Design: Ensured seamless adaptation across devices
  • Accessibility: Used high-contrast color combinations, readable fonts, alt-text, and logical tab flow for keyboard users

🔄 Iterations

  • Homepage Flow: Simplified hero section to match user feedback and decreased load time
  • Media Galleries: Added lightbox for full-screen viewing and quicker navigation
  • Content Updates: Provided simple admin instructions for future updates and reuse

Thank you for viewing my project. I’d love to hear your thoughts or answer any questions you may have. Feel free to reach out!

Contact Me

Whether you’re curious about my work, want to discuss a project, or just say hello—I’d love to hear from you. Let’s connect and create something great together.