Saad Chaudhry

View Original

Gamified web app

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 clickable prototype for first testing round. Next 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 form end-users (survey respondents) and not the survey maker.