Dancing For Joy
Designing for Joy: A mobile-first, accessible website redesign for Dancing For Joy
Objective
The project required a complete front-end redesign of the Dancing For Joy website, a real dance studio located in Riverview, Florida, treated as a fictional client for a senior capstone project. The goal was to rebuild the entire website using semantic, validated HTML and validated CSS while addressing significant issues related to responsiveness, usability, and accessibility found in the original Wix-based site.
The redesigned website needed to function seamlessly across mobile, tablet, and desktop devices, with a strong emphasis on mobile-first design due to the studio’s parent and family-focused audience. All content, images, color choices, and interactive elements were required to meet accessibility standards, including proper contrast ratios, meaningful text alternatives, and clear content hierarchy.
Synopsis
This project reflects the structure and user experience of modern, accessible small-business websites, with a focus on clarity, warmth, and ease of navigation. The target audience includes families, parents, and dancers seeking a faith-based dance studio that feels welcoming, joyful, and trustworthy. The redesign prioritizes quick access to essential information such as classes, schedules, policies, and enrollment pathways.
The updated visual direction preserves the spirit and mission of Dancing For Joy while introducing a more cohesive and refined brand presence. Soft color palettes, improved typography, and simplified branding elements were used to communicate joy, movement, and spiritual warmth without sacrificing readability or accessibility. The overall design balances playful energy with professional structure to better serve both new and returning visitors.
Process
Using a mobile-first approach, I began by analyzing the existing website to identify usability, responsiveness, and accessibility issues. Low-fidelity wireframes were created to establish a consistent header, navigation, and footer structure across all pages. These wireframes guided the layout of the entire site while allowing flexibility for refinement during development.
After defining the site structure, I rebuilt each page using semantic HTML5 and developed a shared CSS framework using grid and flexbox to ensure consistent spacing, alignment, and responsiveness. Brand elements were refreshed, including color selection and simplified logo variations, with all color combinations tested to meet WCAG AA contrast requirements. Accessibility considerations were integrated throughout the process, including meaningful link text, proper heading hierarchy, alt text for images, ARIA labels where appropriate, and keyboard-friendly navigation.
Throughout development, the site was repeatedly tested across multiple devices and validated using W3C HTML and CSS validation tools. Iterative testing and refinement were used to resolve layout issues, improve readability, and ensure that all pages adapted smoothly across breakpoints.
Results
The final website successfully met all project requirements and delivered a fully responsive, accessible redesign of the Dancing For Joy website. Every page was validated using W3C tools, passed accessibility checks, and displayed consistently across screen sizes without layout distortion, text truncation, or usability barriers.
The redesign resulted in a cohesive visual identity, clearer navigation, improved mobile usability, and an overall experience that better represents the studio’s mission and values. The final product demonstrates effective use of semantic structure, accessible design principles, and modern front-end development practices, making it suitable for public deployment and professional portfolio presentation.
The site can be viewed here:
Dancing For Joy
Project Images
