Behind the UX: Creating student delight with our QBit

Introduction: Why Signup Pages Need Personality

Signup pages are the first impression of any platform, and for students, they need to be more than just functional—they should be fun, engaging, and relatable. Imagine this: you’re excited to join a game or a new learning adventure, but the first thing you face is a dull, lifeless form. In today’s digital-first world, that can feel boring or even intimidating.

This is where personality makes all the difference. By making the signup process interactive and enjoyable, we can turn a routine task into a moment of delight. A friendly, playful touch not only keeps students engaged but also sets the tone for their entire journey.

Designing the Interaction: From Idea to Execution

The Idea: Engaging Students with QBit

We started by putting ourselves in the shoes of our primary users: students. We asked a simple question—how can we make the often mundane task of filling out a signup form feel exciting? The answer was clear: create a playful, interactive element that could entertain and guide students simultaneously.

Enter QBit, From the moment students arrive at the signup page, QBit springs to life:

• Curious Eyes: QBit tracks the cursor with his eyes, giving students a sense of connection and playful interaction.

• Hiding Act: When students click on the password field, Qbit shyly ducks out of view, respecting their privacy charmingly and humorously.

• Motivational Prompts: QBit nudges students with friendly reminders, like “Sign up now and join the activity!”

These small touches create a sense of delight while subtly guiding students through the signup process.

Drumroll 🥁, Please... "And Now, the Moment You’ve Been Waiting For: Let’s Build This Magic!"

1. Understanding the Math Behind the Magic

The first step in making QBit's eyes follow the cursor is calculating the angle of sight between the cursor position and the center of QBit’s eyes. Here's how:

Step 1.1: Capture the coordinates of the cursor (x1, y1) and the coordinates of QBit's eye center (x2, y2)

Step 1.2: Use the slope calculation formula to find the angle θ.

tanθ = (y2​−y1​) (x2​−x1​​)

Step 1.3: Convert this slope into an angle using the arctangent function:

θ = arctan ((y2​−y1) (​x2​−x1​​))

This angle tells us the direction in which QBit's eyes should move relative to the cursor.

2. Calculating New Eye Coordinates

Now, let’s move QBit’s eyes along the calculated line of sight by a fixed distance, say 10px. To do this, we'll use basic trigonometry:

Step 2.1: Use the angle θ to calculate the new x and y offsets:

 offsetX ​= sinθ 10
 offsetY ​= cosθ 10 

Step 2.2: Adjust these offsets by adding them to QBit’s initial eye coordinates (x2, y2) to get the final position of the eyes:

newX​ = x2​ + offsetX​
newY​ = y2​ + offsetY​

Putting It All Together

Here’s a pseudocode example for implementation:

Conclusion

Delightful UX isn’t just about aesthetics—it’s about creating meaningful, engaging moments for users. QBit’s playful interaction transformed a routine signup process into an enjoyable experience, proving that small, thoughtful details can make a big impact. By adding personality and fun, we’ve not only enhanced usability but also built a stronger connection with our student users, making their journey on Quizizz more memorable and exciting.

In a world where digital interactions often feel impersonal, adding a touch of personality can set your platform apart. QBit’s playful interaction reminded us that UX design is not just about solving problems but also about creating joy. By embracing the power of delightful UX, we’re not only enhancing functionality but also building meaningful connections with our users—one small smile at a time.

If you want to build similar or better experiences, we’re looking out for people like you. Head over to our careers page and apply to our open positions.