Quizmart-cover-screens-final-5-min

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.

Cover-Quizmart-Mobile

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.

Web-Quizmart-Discover-N-Comp

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.

Web-Quizmart-Quiz-Page-2-Comp4

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.

Web-Quizmart-Play-Page-Comp

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.

Mobile-Play2

Play

Mobile-Play-Basket3

Quiz Basket

Mobile-Collections3

Collections

Mobile-Credits2

Credits

Mobile-Results2

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.

Information-Architecture-V2

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.

App-Login-Social

Log in with Social Accounts

App-Login-Email

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.

App-Discovery

Discover

App-Quiz-Homepage2

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.

App-Play-Mode2

Play Mode

App-Play

Select Quizzes

App-Start-Game2

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.

App-Join-Game

Join Game

App-Gameplay-MultipleAnswers

Single Choice Question

App-Gameplay-Open-ended

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.

Icon-Downloads

Since the release of the new app version, Quizmart has gained 10,000+ app downloads.

Icon-TV3

Quizmart hosted "The Sofa Games" events for Lithuanian television channel "Laisves TV", gathering more than 9000 players per game.

Icon-Giving

After introducing credits, Quizmart succesfully monetized the platform and started sharing profits with quiz content creators.

Icon-Euro

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.

© eglebraz, 2022

Arrow_R

© eglebraz, 2022