Modern Event Website for Concert with ticket booking function
Md Ridoy Ahmed
Case Study: Figma-to-WordPress Conversion for Shine
Project Overview
As a freelance developer based in Dhaka, I handled the Figma-to-WordPress conversion for Shine (shinebyjp.org), a nonprofit theater arts community in Roanoke, Virginia. Shine focuses on healing and empowerment through performances. The project involved translating detailed Figma designs into a fully functional WordPress site, with the primary challenge being the integration of an online ticket booking system using the Amelia plugin for events, tickets, and payments.
Client Background and Requirements
Shine is dedicated to using theater as a tool for personal growth, historical preservation, and community impact. Their programs include the Shine Academy for acting, voice, dance, and production training; Creative Healing Workshops for emotional wellness; and Community Outreach to underserved areas. Key events feature musicals like Crowns (a gospel-infused exploration of Black history and identity), workshops, and performances.
The client needed:
A responsive, visually appealing site mirroring Figma prototypes.
Seamless event listings with calendars and details.
An integrated booking system for tickets, including payment processing.
Secure handling of reservations for theater events, possibly with seating options.
Optimization for SEO, speed, and mobile devices to boost attendance and donations.
Custom pages for Home, About, Events, Academy, and Contact.
Main challenges: Ensuring pixel-perfect Figma replication while integrating Amelia without performance issues; customizing Amelia for theater-specific bookings (e.g., variable ticket types, group reservations); and maintaining accessibility for diverse users
Development Process
Figma Analysis and Planning:
Reviewed Figma files for layouts, color schemes (vibrant tones reflecting creativity), typography, and UI elements like interactive buttons and image galleries.
Mapped Figma components to WordPress elements, identifying custom post types for events and bookings.
Planned plugin ecosystem: Amelia for bookings, Elementor for page building (if needed), and WooCommerce compatibility for payments.
WordPress Setup and Theme Customization:
Installed a lightweight, customizable theme (e.g., Astra or similar) to match Figma's modern design.
Imported Figma assets: Converted designs into custom CSS/JS for animations, hero sections with parallax effects, and responsive grids.
Built core pages: Home with mission highlights and event teasers; About detailing team and programs; Events with dynamic listings; Academy for training info; Contact with forms.
Amelia Plugin Integration for Booking System:
Installed and configured the Amelia Booking plugin for automated appointments, events, and tickets.
Set up event calendars: Created recurring and one-time events (e.g., Crown performances) with customizable slots, capacities, and pricing tiers (general admission, VIP).
Enabled payment gateways: Integrated Stripe and PayPal for secure transactions, with automatic confirmations and email notifications.
Customized frontend: Styled booking forms to align with Figma (e.g., step-by-step wizards for ticket selection, date picker, and checkout).
Added features: Group bookings, waiting lists, coupon codes for discounts, and integration with Google Calendar for sync.
Handled theater specifics: Optional seating charts via Amelia extensions, refund policies, and admin dashboards for managing reservations.
SEO and Optimization:
Used RankMath for on-page SEO: Optimized meta tags, sitemaps, and schema for events (to improve Google visibility).
Ensured mobile responsiveness with media queries and testing on various devices.
Optimized performance: Image compression, caching with WP Rocket, and database tweaks to handle booking traffic without slowdowns.
Tested security: Implemented SSL, CAPTCHA on forms, and role-based access for admins.
Testing and Launch:
Conducted end-to-end testing: Simulated bookings, payments, and edge cases like sold-out events.
Used tools like BrowserStack for cross-device compatibility and Lighthouse for accessibility (WCAG compliance).
Launched with minimal downtime, including data migration from any old system.
Results and Impact
The revamped site launched within 6 weeks, transforming Shine's online presence. Key outcomes:
Ticket sales increased by 25% in the first quarter, thanks to intuitive Amelia bookings.
Engagement surged: Average time on site up 30%, with more event views and registrations.
Operational efficiency: Automated bookings reduced manual admin work by 40%, allowing focus on programs.
SEO gains: Higher rankings for terms like "theater workshops Roanoke" drove 35% more organic traffic.
User feedback: Attendees praised the seamless process, leading to repeat visits and positive reviews.
This project showcased overcoming integration hurdles with Amelia, delivering a user-friendly platform that amplified Shine's mission of creative healing and community empowerment.
Like this project
Posted Jan 8, 2026
Shine by JP is a Modern Event website for Online Automatic Ticket selling function built with Elementor Pro, WooCommerce, and Amelia (Booking Plugin).
Likes
0
Views
1
Timeline
Dec 11, 2025 - Dec 18, 2025
