Case study: Quiz app and website redesign
Disclaimer
This was a freelance project that I had worked on. At first, I’ve worked on Application redesign followed by Website redesign. Let’s deep dive into the project.
About the project
Sawal Bemisaal is a quiz platform that rewards users with real money if they win. The great part of the application is, users can create quizzes and challenge their friends as well!
They approached me to redesign their application. They were in a plan to add more features to the existing application and improve its user experience.
The scope of the project was to redesign the entire application which has around 75–80 screens and a website to promote their application.
Initial Findings
What were the main problems with the old application?
Here were a few problems that I faced when I used the application on my own.
- Super cluttered interface. Starting from the Splash screen, each and every screen BOOMED my eyes with those high Punchy colours and most importantly it has a poor User Experience.
- Customers had very little idea about what the product is about until they attempt the quiz.
- I found that the application don’t have any brand colour and no proper logo.
- Poor UI. Icon set, random button sizes, the colours that they’ve used clearly showed that they didn’t follow any Usability guidelines and there’s no proper style guide.
- Overall, the application looked very outdated.
So now that we know what the problems are!
So, I wanted to make use of the Aesthetic Usability Effect. It is one of the easiest ways to make the users feel that any product or service is legit, reliable and worth the money.
Client Requirements
I’ve connected with the client to understand what the scope of the project is. After having a good discussion with him, I’ve understood what they were looking for and what their requirements were. These are the #MustHave things that the client wanted!
App needs to be look Royal.
App needs to be highly creative as it’s testing the skills of users.
App needs Modern, punchy yet simple look.
Primary Research
Before diving into the design phase, I needed some user inputs to make solutions accordingly. Here is how I collected user feedback. I ran a quick survey and then I’ve interviewed few people who are interested.
After getting inputs, I’ve noted down all those pain points and frustrations.
Those are the beginning steps for my solution, as I strongly believe that getting the proper insights in the research stage is very important. Because
Who ever understands the Coustomer/ User best, Wins the race!
Finally, It’s time to solve their frustrations & Pain points !!!
Design
Logo & Brand Colour
I started with something that represents their brand. Yes, that’s LOGO!
For Logo, I chose it to be in the shape of Bulb, as it represents creativity and imagination. It is inserted in the coin to make users clear that they can earn money through this application.
I’ve redesigned all screens. The above screens depict the change I’ve made to this app.
Few major changes are:
Designed a new filter mode
The previous version didn’t have any filter option. So users struggled a lot to filter those quizzes based on time and money.
Create Quiz & Quiz ID
I’ve introduced Create New Quiz and Share it to their Friends/Family, this feature helps users to immerse themselves into the app. This made the app more interactive. Because challenging a Friend/Family is always Fun right!
In these quizzes, few quizzes are posted by Admin and a few are created by Users. The major issue we faced while implementing this is “Organizing those user-created quizzes.”
Because, as there are some hundreds and thousands of them. How can the user find that one specific quiz amongst them? I added a search bar so that users can easily find the quizzes based on Quiz ID.
The old version of the application has few flaws in the Purchase coins & Payment screens. The wallet screen has no proper CTA.
So, I wanted to make Payment modes a bit more clear and Purchasing coins easy to use!
One of the major problems users mentioned while interviews are, Flow of the App is clumsy and they faced difficulty in viewing their past, present, future and Created Quizzes. They even found difficulty in sorting out the Quizzes those they had won, lost, missed etc.,
After having continuous conversations( To be more precise, they’re debates actually ) with the client, I somehow managed to convince the client to group all of them under the User profile section.
And there are many changes here and there in that application. Then it’s time to test it with REAL USERS!
I’ve again contacted those interviewees (primary research) and asked them to view the entire application prototype. After gathering all those results, I’ve added few more features to it. Like adding Info Screens, Help screens etc.,
Last but not least
For me when I think of any Quiz app, the one thing that flashes in my mind is POP-UPs and Warning messages!
SO, I’ve designed some tens of it. A few of them are posted below
And I felt it’s a wrap. Then suddenly the client called and said,
Website Redesign
These are a few screens from the old version of the website.
Again!!! The entire Website is super messy and no proper alignment. It took years to load!
So no Engagement Rate
So, Firstly I wanted to work on the Landing page. Then I wanted that website to give a clear understanding of the application even with a single glance.
Thank you for staying with me this far!
