Project overview
An online gamification tool called Quizy offers quizzes and user generated content opinions on a wide range of subjects in exchange for prizes money. Three main game genres are offered in a colourful and engaging user interface.
Existing Problem
The application had a design flaw because it was built with an outdated, custom User Interface. Brightly coloured themes that put users' brains under extra strain; nothing interactive given that this is a gamification application. These were a few of the problems we identified right away.
Our Solution
Starting with the application's visual representation, we completely overhauled the platform. created new animations and interactions to assist the user's exploration while organising a strong user experience. Introduced illustrations to make it more gamified version when compared with the previous edition.
User flow Map
The primary flow for each of the three main game categories: One 2 One, Contest and Quizy Go had to be established at first. While Quizy Go just focuses on the opinions, the first two focus on the quiz.
Initial Wireframes
After the research phase, we created wireframes of a couple of variations, seeking inspirations from the gamification industry and came up with a pixel perfect version.
Color Pallete
We experimented with colour while adhering to the brand's history by sticking with the Purple variants that make up their identity and implementing some eye-catching gradients.
Typography
Nunito is a free google font, which is optimized for web and mobile interfaces with excellent legibility characteristics in its letterforms which gives a neutral yet friendly appearances.
Components
Here we present you the some of the components we made categorized by the three major game types: One 2 One, Contest and Quizy Go. From results to awards, 50+ components were made.
Pixel Perfect UI
Once we were done with our UX research, we started with the wireframes, ensuring a user friendly, simpler & more understandable wireframes athrough the platform.
Badge Animation
A unique animation was made when users claimed awards. Designed unique badges for users who achieved the highest leaderboard ranks and accolades.
Intuitive User Interface
Similar Portfolios
Aerem
Aerem's proprietary platform wanted to accelerate data collection for quick proposal creation. We conceptualized an automated tool to seamlessly collect information and fast pace the proposal turnaround.
View case study
Perfios Monethics
Perfios x Monethics automates data-driven risk and financial decisions. We simplified the fintech app flow & designed a seamless user experience that helped in the easy tracking, transferring & sharing of financial data
View case studyCome Experience - The Sketch Brahma Difference
