Custom Illustrations & Quiz App Development

Creating and designing new technology with crisp visuals is something we enjoy, where this Quiz App was a bespoke build for Drug Free Sport NZ.

Drug Free Sport New Zealand came to us wanting a system which hit the below key deliverables

1. Could create multiple quizzes in-house once built.
2. Could be used offline and online, enabling use in remote areas.
3. Had a fresh look that was relatable to young and older demographics.
4. Was able to be easily integrated into their current SilverStripe CMS through a subdomain.

Our Approach to Development & Design

The first step was outlining what the project would look like, and what devices it would be used on. It was clear mobile devices would be important, where our focus was to design a platform that worked best on mobile and then develop the desktop layout.

As our design needed to include multiple sports, we started with a variety of design styles for the client to choose, where we narrowed it down to block colours and clean angles with rounded corners keep things crisp. We wanted to incorporate textured shading to add depth and a bit of grit to the illustrations, helping bring them to life.

Illustrated characters take centre stage, keeping the quiz interesting and appealing without detracting from the important content. 

Quiz Design

To enable a clean workflow we used Figma to showcase the system before we began development. This enabled the client to interact with the prototype and see how it would work before the system was actually built.

Offline & Online App Development

One of the parts to this project that made the development more complicated was the need to have the system offline and online. There is made some normal backend structures more complicated as we were unable to easily create profile for users as the completed the quiz.

To ensure users had an engaging, easy process we built the following workflow

1. App is loaded (must be online for the initial load)
2. Users complete their details on the app via a URL or a QR code.
3. User reads the question
4. User moves to answer the question page (timer starts)
5. User answers the where the correct answers are shown (timer stops)
6. User follows process for all questions which are randomised and have different conditions & rules.
7. User Finishes quiz with a breakdown of their time and answers they got correct
8. User can then view leaderboard (if online) or can see previous leaderboard before they completed quiz offline.
9. User can take a photo and share it online with a mix of set frames/filters.
10. User restarts the quiz (can be done offline)
11. When back in internet the offline results are uploaded to the CMS.

Results

The quiz is now used around the country where DFSNZ can create as many quizzes to suit specific courses they teach.

Try the Quiz