Gamification in learning app — Binar Academy (Ch 7)
In this modern era, everything’s accessible through our smartphones. That includes learning app. We all can learn something new everyday, without even realising, even from apps that we don’t perceive as learning platform, like Instagram or Youtube. However, for people who take learning more seriously, they go further. Nowadays, we are being offered to many apps that will teach you literally anything. Language? Duolingo. New skills in creative industry? Skill share. Coding? Udemy. We name it and there will always be an answer.
Starting the course could be easy, what’s harder is to stay committed to a journey of learning that requires more of our time.
The stats don’t lie, online courses have a 10% to 20% higher failed retention rate than traditional classroom environments (Herbert, 2006). Totally, 40% to 80% online students drop out of online classes (B. Smith, 2010). https://journals.sagepub.com/doi/pdf/10.1177/2158244015621777#:~:text=Online%20courses%20have%20a%2010,Smith%2C%202010).
To make people more motivated and stay in their course (as long as possible), app like Duolingo gamifies their users’ learning journey. Features like leagues & leaderboard, lingot as currency, crowns, streaks are the main parts of their gamification. With all these features, users might feel that learning is not the sole purpose of using the app, but also to play a game, where they can be competitive and rewarded for being good at it.
In this study case, I’m challenged to create a design for newly-proposed gamification features of Binar Academy mobile application.
Like other learning apps that applied gamification, one of the main purposes of gamifying the platform is to make learning fun (or more fun) and to keep the user in the app as long as possible and as frequent as possible.
We were given more or less two weeks to finish the task. To help us keep organised and be at the right pace, we created a timeline.
As part of the product management research process, they have found some interesting findings, such as:
To continue our ideation process, we created User Persona from the questionnaire respondents, as well as User Journey Map, Point-of-View and How-Might-We.
After the product management team gathered the necessary data, we as a team have decided to add 3 main features for this gamification, on top of the existing features:
- Point Scoring System
- Point Leaderboard
- Point Redemption
To take it even further, the UI/UX design team also created flowcharts. These charts visualise the journey the user has to take to reach their end goal.
To continue the design process, the UI/UX design team started by creating wireframes.
Once the product management team agreed with our wireframe, we moved on to make the hi-fi mockup.
For home page, we decided not to do much redesigning as we liked both the design and flow. However, we felt that it could do a bit better with more white space and rounded corners.
Each chapter and quiz’s completion will be ended with a pop-up page of the points breakdown. To support the gamification purposes, we included a button that directs the user to Point Leaderboard. In the future, user will be able to review their answers as well.
We created a dedicated button in the navigation bar, for user to redeem their points, that directs to a page called ‘Shop’. User will be able to redeem their points with vouchers and merchandises.
Points History and Leaderboard are placed inside the ‘Profile’ page. In the leaderboard page, we created a share button, for user to share their ranking to their choice of social media platform. The product management team believe that this feature will help promoting Binar Academy and their courses.
It is also important for us to create a design system, where it will be very useful in the future as a reference, in order to make a consistent design throughout the whole journey of the app.
To prove that we have a design that works for our targets, we conducted unmoderated usability testing via Maze. From this usability testing, we aimed to get users’ feedback regarding the experience of going through the app, from the design and flow perspective.
We summarised the result of the app’s usability testing and we found some insightful feedback.
The obvious usability problem lies on the ‘Shop’ page, which lead users confused on where to redeem their points. We suspected that users found it unnatural to redeem their points on a page called ‘Shop’, as it is usually involve money.
We found that the best solution for this is to replace the ‘Shop’ page with ‘Points’. By putting together the main ‘Points’ feature, user will find them easier.
Click this link to access the final prototype
Product Management Team: Tania Hanjani, Tengku Muhammad, Azis Sani
UI/UX Team: Diandra Erdiputra, Alya Dhia