Overview
Coins & XP is a gamification student engagement system that provides students with a clear sense of progression and achievement as they accumulate rewards throughout the semester, as well as boosting engagement across the semester
It was one of the most interesting projects I've worked on. The idea was to implement a system where students can redeem a reward at the end of the semester by using their in-app currency called Coins that they collected when they progressed on a subject, such as watching videos, taking quizzes, or mastering a topic (finished with 100% completion)
Challenges
At first, I would say that the feature is similar to purchasing a product from an e-commerce site with a flash sale (a time-limited deal) system, where the user can purchase a product with a discounted price in a certain period. Similarly, in the Coins & XP system, students can redeem their Coin for prizes, ranging from digital vouchers and exclusive merchandise to electronic devices such as smartphones and tablets as the top prizes
Realtime Countdown Timer
Since it's an event with a time period, it needs a countdown system with the following phase:
- Days before the event, such as "started in 2 days" or "less than a day"
- 24-hour countdown with real-time hours, minutes, and seconds
- Countdown after the period starts to the end of the period
It might sound easy since it's just a countdown timer, but here's the thing: there is a chance that a user can try to set their device time to the D-day of the event to start early. For example, if the event starts on the 3rd of January at 3pm, the user can set the device time manually to that time to "start" the event. Chances are, the user will "jump" right into the event period, even when we have set the period from our backend. Although it's possible to prevent it from the backend side, I think it's a good idea to prevent it from the frontend side as well. I implemented a client-side guard to prevent the user from intentionally setting their device time manually so they can't immediately see what the prizes are
Small Details That Matter
I'm glad that when I work on this feature, the designers are helping with the design implementation on the web app itself, reducing QA engineers overhead. It gave me valuable insights into small UI details that make a big difference, such as dealing with SVG files that need to be adaptive with size styling, creating a "Read More" toggle for long product descriptions, implementing sticky cards that maintain context while scrolling, and lastly, implementing adaptive web design, where the page should have a specific layout implementation between web and mobile. It was fun exploring such UI implementation and coming up with the solution, which I learned by researching and trying to implement it right away
Lessons Learned
The feature's first launch was a success:
- Top prizes sold out within 2 seconds
- Reached 1,400+ concurrent users without major issues
- 20% of the total users redeemed rewards
I learned that this feature sounds easy to implement, but it has its own challenges in making it fair for all students who want to redeem their Coins. Other than that, I also learned about implementing small details that are thoughtful for the users, and it was the first time I wrote my unit tests for all the code that I wrote. It reminded me that delight and reliability are equally important, that even the smallest UX details can elevate a feature from functional to memorable
Although I left the role due to redundancy, I'm proud that the feature continues to delight students; they always wait for the event and request more prizes to be added 😄