Crafting a Gamified Quiz Experience: A Modular Approach to User Engagement
Linda is a gamified end-user-facing quiz, trivia, survey and dynamic-content application built for Zeffi, designed with modular Lego-inspired components, dynamic branding, and a CSS-only architecture to maximize user engagement — achieving over 90% user satisfaction and 80%+ completion rates.
Linda — a gamified end-user facing quiz, trivia, survey and dynamic-content application, developed with a design goal of achieving as high user engagement as possible.
Project brief: Design a gamified single-page-app that can be dynamically branded and engages the user into answering the questions till the end.
Role: UI, Interaction, and Visual design
Methods: I designed a clickable prototype for the first testing round. Next I worked with a developer creating the first test version to take the learnings into account and include the gamification aspect. We created 3 personas on people’s usage patterns to next refine the designs. The first live version was released after the third round of testing and iteration. The application has been under constant improvement ever since based on user feedback.
The application was designed with the technical constraint of avoiding javascript and relying on pure CSS to keep the loading time under 1.5 seconds.
Results: Over 90% of the respondents say they liked answering the survey. Based on a simple “Did you like answering this survey” thumbs-up / down question that is shown to every user at the end of a survey. The surveys have a completion rate of over 80%, far above industry standard of 56% for a 10-question survey.
Designed for diversity and customizability
The application supports diverse question types and possibilities, but still successfully hides all the underlying mechanics from the user giving a streamlined experience.
Dynamic branding
The application was designed to accept dynamic content including logo, colors, fonts, and images, etc.
Non-designer-friendly
The application was designed for non-designer users to be able to pick any color and still have everything look coherent. Having just been given 3 main colors, and light or dark theme, the application was designed to calculate all the remaining shades automatically.
Lego-inspired modular thinking
The application was designed as a set of modular Lego-like components, which brought three major benefits:
- Easy to scale
- Easy to test
- Developers loved it
Key results
Some key results from usability testing and customer satisfaction survey. The survey was asked from end-users (survey respondents) and not the survey maker.
Saad Chaudhry
Fractional Product Designer
