Kung Fu School

I am developing a website for a Kung Fu school in France. The current website is outdated and does not reflect current best practices in web design.

My work involves designing and developing a complete redesign of the website, with a new design, to provide a quality user experience with the best performance. Additionally, the idea is to create a software solution that integrates other services such as content management, registration, and learning tracking.

✨ Demo

👉 https://jeromeabel.github.io/kungfuschool/

🚨 Prerequisites

You will need:

• NodeJS
• Git
• A terminal to run commands

🛠️ Installation

git clone git@github.com:jeromeabel/kungfuschool.git
cd kungfuschool
npm install

🚀 Utilisation

npm run dev

Open the browser at the address: http://localhost:4321/kungfuschool

📝 Documentation

• Version 1 mockup on Figma
• Analysis and design on the Wiki
• Task management and user stories on the Kanban

📅 Plan

• V1 - Visitor Experience Enhancement:
  • Responsive/consistency in design
  • Improvement of SEO and performance
• V2 - CMS for Admin:
  • Administrator autonomy in managing news and content
• V3 - Enhanced Registration Process:
  • Simplification of registration management for the administrator
  • Improvement in communication with students (announcements, notifications)
• V4 - Online Store:
  • Facilitation of the payment process for students
  • Increase in association revenue
  • Diversification of products, showcasing an expanded view of Chinese martial arts culture
  • Student loyalty through exclusive products and promotions
  • Facilitation of student support through donations
• V5 - Learning Platform:
  • Improvement in the learning experience (tracking, content)
  • Implementation of a system to collect and display testimonials
  • Mobile app version for students
• V6 - SaaS:
  • Introduction of a software solution as a service (SaaS)
  • Addressing the administrative needs of any sports school

🎉 Results

UX

• Clear user journey: informations, navigation, consistency
• Support for small screens: responsive design
• Engagment: social links, share blog posts, animations, Call to Action
• Quality (Pagespeed scores):
  • Old score: 82% 82% 68% 69%
  • New scores: 99% 100% 100% 100% (mobile) - 100% 100% 100% 100% (desktop)

DX

• Documentation
• Mockup and mini design system
• Development workflow: user stories, git actions, conventional git commits

👤 Author

• @jeromeabel

📷 Images Credits

AI generated, iconsjs.org, iwuf.org, freepik.com