Overview
Enhanced, engaging, and impactful donation platform through gamification.
This project entailed a comprehensive revamp of the Youtuber Mr.Beasts, Beast Philanthropy’s donation platform. The objective was to bolster user engagement and social impact by incorporating gamification elements such as collectible trophies, leaderboards, and other unique rewards. A key focus was on enhancing the platform’s performance and maintainability through a strategic migration from Vue.js to Next.js.
Role
As the Front-end Developer & Game/Product Designer, I led the design and development aspects of the project, collaborating with a remote team. My primary contribution was as the chief game designer, crafting a scalable gaming system poised for future expansions.
Technologies Used
- Design: Figma
- Front-end Development: NextJs, VueJS, TailwindCSS, Strapi
Challenges Faced
The design of gamified features like a trophy system and leaderboards presented unique challenges, especially considering the sensitivities around public donation amounts. Additionally, we encountered a substantial hurdle when realizing the extensive artwork required for the collectible items, which had not been initially factored into the client’s planning.
Solution
I leveraged Figma to create an interactive prototype of the gamified experience. The transition to Next.js was pivotal in enhancing maintainability and performance, complemented by server-side rendering for faster loading times. The platform’s styling was achieved using Tailwind CSS and custom CSS, ensuring responsiveness and visual appeal.
Results
The redesigned donation platform now boasts a user-friendly interface with engaging gamification elements, resulting in heightened user engagement and social impact. While the original game concept had to be scaled back due to budget constraints, the platform’s performance and maintainability saw significant improvements.
Conclusion
This project underscores my expertise in front-end development and game/product design, leading to an enhanced, engaging donation platform for Beast Philanthropy. The fusion of gamification elements with technical advancements has markedly increased user interaction and platform efficacy.