Quizmart
Engaging quizzes for everyone
Details
Year
2020-2021
My Role
UX and UI design for a Website and a Mobile App.
My Tasks
Creating a new version of the website and the app. Interviewing users and doing usability testing. Preparing design assets for the EU funding application.
Story
Quizmart is an internal project of Telesoftas. When I joined, it was already running for a couple of years and had a well-established team. Right after my onboarding, I took over Quizmart from my colleagues. By the time I joined, they had gathered some insights about which parts weren’t working well and what improvements were needed.
I started by trying the product, pinpointing the most prominent problems and doing user research. First, I improved the app, fixing the most extensive issues already known, and when I redesigned the web to match the improved user experience and give it a new look and feel.
for everyone
Engaging quizzes
Quizmart
Details
Year
2020-2021
My Role
UX and UI design for a Website and a Mobile App.
My Tasks
Creating a new version of the website and the app. Interviewing users and doing usability testing. Preparing design assets for the EU funding application.
Story
Quizmart is an internal project of Telesoftas. When I joined, it was already running for a couple of years and had a well-established team. Right after my onboarding, I took over Quizmart from my colleagues. By the time I joined, they had gathered some insights about which parts weren’t working well and what improvements were needed.
I started by trying the product, pinpointing the most prominent problems and doing user research. First, I improved the app, fixing the most extensive issues already known, and when I redesigned the Web to match the improved user experience and give it a new look and feel.
UX Writing
Writing a new copy for a landing page was something I hadn’t done before. To get me started with this task, I invited other team members to a workshop to elucidate Quizmart’s voice and tone, things like vision and mission, values and brand voice. Getting a clear picture of what Quizmart is all about significantly easied the task of communicating its values to players and quiz creators. View a new landing page here.
User Journeys
Qiuzmart’s redesign wasn’t only about improving UX and UI. Some fundamental things needed to change to bring value to users and the business. The team aimed to solve the problem of low-quality quizzes by allowing talented content creators to earn credits for their work. Quizmart’s platform could also start making money by providing this service. Below I present two quiz players’ user journeys, comparing the experience of the old and new Quizmart versions.
Web Design
Quizmart's web was transformed from the point of user experience and visually. The New webpage was easier to navigate, discover quizzes and play. Each quiz received a home page with the essential details presented at the top. Combining separate questions into sets was no longer necessary, and all quizzes were ready to play with a click of a button. Visually, a new quiz card was introduced, with an illustration and summary of quiz contents. The background was changed from purple to a neutral grey, allowing bright-coloured accents of the brand to stand out. I present some pages of the new website below.
1 — Discover
Discover is the first page you see after logging in. Here all quizzes are listed, and search or filtering options are also available. In this new version, more attention is given to the individual quizzes, displaying one quiz per row and making it easier for players to decide if the quiz is worth playing. You can compare the old and new versions of the discover page using this before & after slider.
2 — Quiz Page
What used to be a set of questions became a quiz with its dedicated homepage. At the top of the page, payers can read the description and a summary of quiz parameters. Below is a list of questions that can be expanded to show an illustration and reveal answers if wanted. Compare the old and new versions in this before & after slider.
3 — Play Page
The new "Play" page allows for cherry-picking quizzes from various collections. First, players select the collection, and then the list of quizzes appears below. All selected quizzes are transferred to the basket at the bottom of the page and will run continuously when the game starts. Compare the old and new versions of the "Play" page in this before & after slider.
4 — Mobile Versions
Many Quizmart visitors accessed the website using their phones, and some preferred to use the web instead of the app. I have designed all pages to be responsive and support various device sizes, from phones to tablets.
Play
Quiz Basket
Collections
Credits
Game Scoreboard
The App
For the first time, I had an opportunity to design the app to be built with Flutter. That meant I had to create unified designs for both Ios and Android devices. It all started with organising information architecture - the app's structure, to be clear, easy to follow and consistent between all Quizmart's channels. A couple of the app screens are presented below. For a full experience, you can download the app on the App Store or Google Play.
1 — Information Architecture
An information architecture map starts with six main pathways leading to the conversion - playing the quiz. The goal was to make finding, saving, creating and playing quizzes as effortless as possible.
2 — Log In
The fastest way to log in is using social media accounts, and we found that people use this function often. The log-in by email method is also available, and the same options apply to registration.
Log in with Social Accounts
Log in with Email
3 — Discover Quizzes
The "Discover" section is the first thing players see when they open the app, even without logging in. This allows players to explore Quirmart's content before committing to register. The best quizzes are listed at the top, and once you start to scroll, filtering options appear to help to find what interests you.
Discover
Quiz Page
4 — Start a Game
There are a couple of ways to start playing on Quizmart. Below I present the flow of the "Play" section in the bottom menu. This way, players can select multiple quizzes from various collections to be played one after another and start playing alone or with friends.
Play Mode
Select Quizzes
Start Game
5 — Join & Play
Once the game host sends players a link or shares the code, they can join the game. There are a few question types and game modes available in Quizmart. You can see single-choice and open-ended question examples on the screens below.
Join Game
Single Choice Question
Open-ended Question
Usability Testing Insights Map
Between iterations of the app's design, I performed usability testing and documented the insights. A lot of them fell into common themes. I created an insights map to show how everything is connected and what major takeaways have emerged. Some of the issues found were easy to fix, but some findings caused doubts about some fundamental parts of Quizmart. Although I wasn't the decision maker, I did everything I could to inform and educate the stakeholders about potential risks in our current business model. Explore the full Insights Map here.
The Takeaway
Quizmart is continuously growing, and even though I am no longer part of its team, It's my pleasure to see the positive impact of my work. Besides redesigning the app and the web, I prepared service design assets for the EU funding application, which was successful. I hope that this achievement will accelerate Quizmart's journey to success.
Since the release of the new app version, Quizmart has gained 10,000+ app downloads.
Quizmart hosted "The Sofa Games" events for Lithuanian television channel "Laisves TV", gathering more than 9000 players per game.
After introducing credits, Quizmart succesfully monetized the platform and started sharing profits with quiz content creators.
Quizmart received EU funding of 69,750.00€ for the development of the original service design.
Credits to: Quizmart’s creator and visionary, Vytautas Leščiauskas, for seeing the bigger picture and always setting the right course. Product owners Raimundas Bučius and Julija Gavrilova for perfectly organising work in a turbulent and ever-changing Quizmart team. Developers Ieva Šlipaitienė and Daniel Pašin for being patient with my requests and not taking the easiest paths, and my fellow designer Neringa Šidlauskaitė for creating an expressive Quizmart’s brand, illustrations and laying a solid foundation when designing the first version of the app.