https://github.com/jillmpla/datatropolis_learning_platform_framer
Framer prototype for a gamified learning platform (Datatropolis - Data City), featuring modules, quizzes, and interactive data challenges.
https://github.com/jillmpla/datatropolis_learning_platform_framer
data-science edtech framer gamification gamification-learning learning-project prototype sketching storyboarding urban-planning wireframes
Last synced: about 2 months ago
JSON representation
Framer prototype for a gamified learning platform (Datatropolis - Data City), featuring modules, quizzes, and interactive data challenges.
- Host: GitHub
- URL: https://github.com/jillmpla/datatropolis_learning_platform_framer
- Owner: jillmpla
- License: mit
- Created: 2025-08-22T00:14:47.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-08-22T00:35:08.000Z (9 months ago)
- Last Synced: 2026-02-02T02:58:57.947Z (3 months ago)
- Topics: data-science, edtech, framer, gamification, gamification-learning, learning-project, prototype, sketching, storyboarding, urban-planning, wireframes
- Homepage: https://maroon-menu-830795.framer.app/
- Size: 4.23 MB
- Stars: 2
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 📚 Learning Platform (Datatropolis - Data City) - Framer Prototype
This repository documents the learning platform Datatropolis - Data City prototype, designed and built with [Framer](https://www.framer.com/).
The project explores how a gamified approach can make data science concepts more engaging, combining **urban planning themes** with structured learning modules, interactive quizzes, and applied data challenges.
🔗 **[Live Demo](https://maroon-menu-830795.framer.app/)**
---
## 🎯 Purpose of the Prototype
- **Educational Modules** - Structured lessons that guide users through data science concepts
- **Interactive Quizzes** - Reinforce learning and provide instant feedback
- **Practical Challenges** - Real-world tasks that allow users to apply knowledge
- **Gamified Dashboard** - A city-building theme ties learning progress to visual growth
---
## 🛠️ Development Process
- **Storyboarding & Early Sketches** - mapped the basic user flows (homepage, modules, quizzes, challenges) to clarify structure before moving into Framer
- **High-Fidelity Prototyping** - used Framer’s grid, stack, and interactive components to design a detailed, functional experience
- **Interactivity & Animation** - dropdowns, slideshows, quizzes with reset options, and chart generation for data challenges
- **User Testing** - in-person usability testing with participants, gathering feedback on clarity, navigation, and interactive elements
---
## 🧩 Key Features
- **Homepage Dashboard** - cards for modules, quizzes, and challenges with progress tracking
- **Modules Page** - dropdown lessons with slideshows and knowledge checks
- **Quizzes** - card-based quizzes with instant feedback and reset functionality
- **Data Challenges** - user inputs generate a chart with option to download; confirmation via modal window
- **Global Navigation** - consistent header and bottom navigation for clarity and usability
---
## 🧱 Design Patterns & System Thinking
- **Cards** for organizing content consistently across dashboard, quizzes, and challenges
- **Stacks & Grids** for responsive layouts, scalable to future lessons and quizzes
- **Reusable Components** like dropdowns, quiz cards, and modal windows built once and applied across multiple flows
---
## 👥 User Testing & Insights
- Participants navigated modules and quizzes smoothly, confirming intuitive design.
- The reset feature in quizzes was seen as highly useful and should be applied more broadly
- Some learners needed clearer visual cues for key information, such as better highlighting of mistakes in knowledge checks and simpler data input in challenges.
- Lessons learned: reinforce feedback cues, refine guidance, and improve discoverability of interactive elements
---
## 📊 Fidelity & Design Decisions
- **Information Design** - Very High Fidelity: consistent layouts, responsive grids, clear organization
- **Interaction Design** - High Fidelity: custom interactive components, but could expand with code overrides
- **Visual Branding** - Very High Fidelity: cohesive theme (urban planning + data science), logo, color palette, consistent typography
- **Editorial Content** - Very High Fidelity: no filler text; real lessons, quizzes, and challenges
---
## 📂 Repository Contents
- **Framer_Learning_Platform_JillPlatts.pdf** - full design process report and usability testing notes
- **Prototype link** - [Live Demo](https://maroon-menu-830795.framer.app/)
---
## 🔮 Next Steps
- Expand accessibility testing (screen readers, keyboard navigation)
- Add more guided feedback in challenges to support novice learners
- Explore integrating real datasets for more authentic experiences