In 2018, Vidyanext an EdTech company was on the pivot of changing their business model and were looking at finding product market fit. This is the story of how I helped them develop the QuizNext app - making learning fun through quizzes in Maths and Science, for kids aged 9-14.
2 member design team | Mobile - Android (ReactNative) | 8 weeks (June 2018 - Aug 2018 ) design + build + launch
I led the design team and was responsible for the experience strategy and design of the hybrid app (initially Android). Being a two member team, we produced all major deliverables, including userflows, IA, UI, animations and marketing collateral between June 2018 and January 2019. I worked alongside a junior designer, a PM and a four member engineering team.
Vidyanet's previous apps weren't making business sense, so the decision to go with just the Learn app taken. The Learn app was the app for students in the then eco system that had quizzes, tests, practice tests and ability to add test marks. We wanted to make the Learn app independent, so we broke away from the ecosystem, which meant keeping only the quizzes. We had two months to design, develop and launch the app so that we could see if this was a meaningful product.
Student academic success comes from students being confident and engaged. Through own research and that of others, Vidyanext had learned that assigning student content appropriate for that particular student's level is the best way to achieve confidence and engagement.
Analyses indicated that quizzing was associated with increases in both the number of student questions and comments made at the beginning of class and the number of students who reported that they came to class having read the assigned material. It was suggested that the immediate feedback provided by quizzes is particularly efficient in identifying areas of misunderstanding and in challenging students' "illusion of knowing" the material.
Source
Key findings (based on what we had - quiz engine)
We also analysed Learn app usage metrics over a period of 12 weeks (averaged) — Quizzes completed 2752, Practice completed 54, Tests completed 272. This was the initial discovery to help us go down the quiz route.
For the MVP (Minimum Viable Product) these were the main features finalised upon.
Some early wireframes. We wanted to get away from the legacy style of packing features into the app and simplify it as far as possible. We used a visual vocabulary in define the architecture so it would be easy to follow.
To help retain users points, leaderboards and badges were introduced. Competing with other users in Challenge added to the gamification.
Initially registration was a 2 step process of entering phone number, board and class. OTP based sign in was the easiest to go with as children were most likely using their parent's phones.
Skip registration was introduced so that users can get a taste of what the app was about before they sign up, this was also a way of testing if skipping registration was valuable to the user. With continued usage it was decided to let users trial the app before registering.
We also A/B tested the results locked vs shown after completing the trial. It was concluded that children preferred to see the results rather than having it locked.
We created a character 'Vee' to give the app personality. The initial version had a bot interface, with Vee interacting with the user. Messages were personalised for the user, based on registration (or trial) and the chapters they had done, like recommending a challenge or a chapter.
Challenge was the app's USP where users were always paired up with random online users on a topic ⇒ chapter level of their choice, to test their knowledge. This created an environment of friendly competition where there was learning without users feeling they were doing a school test. These also helped the users feel more confident going into tests (collected qualitative feedback by talking to some users who used the app on a regular basis).
Practice could be played online or offline and the initial Practice had fewer questions. Practice could be played at a subchapter level.
Assumption: Students want to quickly finish the quizzes without getting too bored. So practice had fewer questions.
Findings: Fewer questions meant finishing practice too quickly, this didn't give enough value. We increased the number of questions but broke up the monotony by having encouragement in the form of animations at timely intervals.
We started designing the profile with points & badges with a settings page to edit user details. To collect initial feedback, a feedback form was inserted into the profile page.
After introducing the school leaderboard we modified the stats to show both leaderboards, to encourage users to use the app more. To give insight to users on their subjects we introduced Subject strength - a visual view of which subjects users needed to work on. It was also realised that users may not do a particular subject because they needed less help with it.
We made an assumption that users wanting to increase points would be influenced by this and also take challenges in subjects that they were good at.
To encourage friendly competition, two types of leaderboards were created. One was an overall leaderboard and the other a school leaderboard. This was to encourage users to add classmates and build a local community of sorts.
In school we used to get together and play Mortal Kombat and other video games. Though this wasn't a video game, this tried to emulate a similar feeling of competitiveness we have amongst friends. Users could share a link to download the app with friends. When they signed up, they would appear in their friends tab when the user played a challenge.
With the initial success of running a campaign to download the app based on referrals, we decided to make adding friends more prominent. This we did by adding it as a main navigation tab.
Fun promo created in AE to be used on social media
With the audience being children, the experience needed to be fun and visually stimulating.
Having a mascot, in this case 'Vee' was to give the app recall value and to give it personality. Elephants have a positive symbolic meaning all over the world, and they are considered to be a symbol of good luck, intelligence and wisdom. Comics are relatable to children and a logo inspired from a comic font makes it more relatable.
Colour palette: We chose blue as the primary colour as we wanted to use a cool and calming colour. The parent (Vidyanext) palette's primary palette was orange which we thought may be too bold. To keep the colour as an association we used it for the primary button.
Secondary colours: These were hues of the primary colour used mainly in the quiz.
Illustrations: We used monsters for avatars, these were readily available stock and saved time creating avatars. Most illustrations included Vee in some form with a few other flat style illustrations.
Some animations done on AE and converted to JSON to use in the app
We set targets of 1000 downloads by the end of July. Part of this was going to be achieved by running an internal referral campaign to get the numbers. Our analytics were a bit skewed but it served one main purposes. That employees would gain more knowledge of the app we were marketing and us selling the concept of a quiz app to people we know made us more confident of our product.
By November we had more than 10k downloads, without a big marketing spend like some of our competitors. Clearly there was something to quiz based revision/learning apps.