Design Arena.
An interactive design challenge platform that helps designers improve their skills, receive real-time feedback, and climb the leaderboard.
Project Overview.
Design Arena is a competitive design platform where users participate in real-time design challenges, receive feedback from peers, and rank up based on their performance. The goal is to create an engaging, gamified learning experience for designers.
The Problem.
Many designers struggle to improve because they lack structured challenges, meaningful feedback, and a sense of competition.
🔹 The Solution:
A gamified design platform that offers quick challenges, ranking systems, and real-time feedback, creating an engaging and fun way to learn and grow.
🔹 The Solution:
A gamified design platform that offers quick challenges, ranking systems, and real-time feedback, creating an engaging and fun way to learn and grow.
The Design Process.
✅ Understanding User Needs:
I researched how designers learn, improve, and stay motivated.
✅ Defining the Core User Journey:
I mapped out the main user flow, ensuring a seamless experience from challenge selection to results.
✅ Creating a Consistent Design System:
I established a cohesive UI.
✅ User-Centric Gamification:
I introduced leaderboards, progress tracking, and badges to enhance engagement.
I researched how designers learn, improve, and stay motivated.
✅ Defining the Core User Journey:
I mapped out the main user flow, ensuring a seamless experience from challenge selection to results.
✅ Creating a Consistent Design System:
I established a cohesive UI.
✅ User-Centric Gamification:
I introduced leaderboards, progress tracking, and badges to enhance engagement.
The Core User Flow.
The most important part of the experience is the designer’s journey from entering the platform to receiving feedback.
Here’s how it works:
Here’s how it works:
01
Home screen.
🎯 Key Features:
✅ Hero section with a strong CTA (Start Challenge)
✅ Featured challenges & leaderboards for motivation
✅ A modern dark-mode UI with clear content hierarchy
✅ Hero section with a strong CTA (Start Challenge)
✅ Featured challenges & leaderboards for motivation
✅ A modern dark-mode UI with clear content hierarchy
02
Challenge Discovery.
🎯 Key Features:
✅ Search & filter bar for easy navigation
✅ Challenge cards with relevant details (category, duration, reward)
✅ Intuitive UI that encourages engagement
✅ Search & filter bar for easy navigation
✅ Challenge cards with relevant details (category, duration, reward)
✅ Intuitive UI that encourages engagement
03
Challenge Screen.
🎯 Key Features:
✅ Clear challenge brief & submission area
✅ A countdown timer to enhance engagement
✅ Submit Design CTA with instant feedback
✅ Clear challenge brief & submission area
✅ A countdown timer to enhance engagement
✅ Submit Design CTA with instant feedback
04
Results Screen.
🎯 Key Features:
✅ Performance breakdown with scores for creativity, execution, and usability
✅ Leaderboard position & ranking progress
✅ “Retry Challenge” CTA for continuous improvement
✅ Performance breakdown with scores for creativity, execution, and usability
✅ Leaderboard position & ranking progress
✅ “Retry Challenge” CTA for continuous improvement
05
Leaderboard Screen.
🎯 Key Features:
✅ Top designers highlighted with ranking badges
✅ User ranking displayed with clear progress tracking
✅ Sorting options for weekly, monthly, and all-time rankings
✅ Top designers highlighted with ranking badges
✅ User ranking displayed with clear progress tracking
✅ Sorting options for weekly, monthly, and all-time rankings
Key Takeaways.
💡 Insights from building Design Arena:
✅ Consistency in UI Design Matters –
Keeping a structured design system across all screens ensures a seamless user experience.
✅ Gamification Boosts Engagement –
Adding leaderboards, progress bars, and badges motivates users to improve.
✅ A Clean, Minimalist UI Helps Focus –
Reducing distractions and optimizing hierarchy enhances usability.
✅ Consistency in UI Design Matters –
Keeping a structured design system across all screens ensures a seamless user experience.
✅ Gamification Boosts Engagement –
Adding leaderboards, progress bars, and badges motivates users to improve.
✅ A Clean, Minimalist UI Helps Focus –
Reducing distractions and optimizing hierarchy enhances usability.
Prototype.
To view the prototype, click the button below.
For the best experience, please view this prototype on a desktop computer.