Meet Your Learner Persona

Hello there! 👋
Here's my project: A short, playful interaction that learners could experience at the beginning of a course, but not limited to that. 

I used both Lovable and ChatGPT as my buddies throughout this learning journey. The interactive code is embedded directly inside the course project.

Check out the project here: Meet Your Learner Persona

✨The story behind

As a newcomer to vibe coding, the experience was rewarding in the best possible way. I genuinely enjoyed every part of the process and learned a lot, especially about writing effective prompts, navigating code, and making small changes.

I found a lot of inspiration by exploring visual and interaction design references on platforms like Dribbble, Figma, and Godly, which helped shape the experience's look and feel.

Throughout the project, I experimented with both simple and more complex interactions. In the end, I found myself drawn to the simpler ones, those that quietly support the learning journey without adding unnecessary friction or contributing to cognitive overload.

Try taking it to discover your type.

💻Here's also the prompt I used: 

Create a self-contained, embeddable HTML/CSS/JavaScript interactive learning game designed to be placed inside a Rise course code block.

Concept: “Discover Your Learner Persona” – a playful, low-pressure personality-style interaction that helps learners reflect on how they prefer to learn.

Experience goals:

• Fun, fast, and intuitive (2 minutes max)
• No right or wrong answers
• Feels like a game, not a test
• Encourages self-awareness and engagement at the beginning of a course

Interaction design:

• Display one card at a time in the center of the screen
• Each card contains a short first-person statement describing a learning behavior
• Two buttons below each card: “This is me” “Not really”
• When the learner clicks “This is me”, assign 1 hidden point to a specific learner persona
• When “Not really” is clicked, move on without scoring
• After all cards are answered, calculate the dominant learner persona and display the result

Learner personas (4 total):

• The Explorer – learns by experimenting, trying things out, discovering through action
• The Builder – learns best with structure, steps, and logical progression
• The Observer – prefers watching, reading, and understanding before acting
• The Connector – learns through discussion, stories, and social interaction

Cards (8–10 total): Write short, relatable, first-person statements such as:

• “I like to jump in and try things out, even if I don’t fully understand yet.”
• “I feel more confident when learning follows clear steps.”
• “I prefer seeing examples before I start.”
• “Talking things through with others helps me learn.” Each card should clearly map to one persona behind the scenes, but never reveal scoring or categories to the learner.

Result screen:

• Display the learner’s persona as a friendly title (e.g. “You are: The Explorer”)
• Include a short, encouraging description of what this persona means
• Add 2–3 practical tips on how this learner can approach the course effectively
• Include reassuring language that most people are a mix and there is no best persona

Visual & UX style:

• Clean, modern, friendly
• Card-based layout with soft rounded corners
• Smooth transitions between cards
• Large, readable text
• Accessible contrast
• Neutral, welcoming color palette (colorful, but in light colors)

Card layout and behavior:

• Display the cards as a stacked, slightly fanned card pile, inspired by a physical deck of cards.
• Cards should overlap each other diagonally, forming a small pile rather than a grid
• Only the top card is fully readable and interactive at any time
• The cards underneath should be partially visible, offset slightly in position and rotation
• Use subtle differences in rotation (e.g. -3°, +2°, -1°) to create a natural, tactile feel
• Each card should have rounded corners, a soft shadow, and a solid background color

Interaction behavior:

• When a learner answers a card, animate it smoothly off the pile (slide or fade)
• The next card should move into the top position of the stack
• The pile should visually shrink as cards are completed

Technical constraints:

• No external libraries or frameworks
• All HTML, CSS, and JavaScript in a single file
• Fully responsive (works well on desktop and mobile)
• Safe for embedding in Rise as a code block or zip package