What happens when you combine Game-Design-specific paradigms 🎮 with traditional software development 🖥️ ? Well, today I’m gonna be sharing a story about how I used Valve’s game design philosophy to improve my own little timetable app that I created for FAST Karachi students (shameless plug— https://timetable.dracodev.me/)
The issue at hand:#
I created this website to solve quite a few issues the current system had:
The spreadsheets were hard to read, and often lagged everyone’s phones when a new one was posted or updated. If you had no or slow internet access (as is on majority parts of the campus), you just had to try to remember or guess where you’re going. There was one other site that tried to do this, but that was extremely slow, required the internet, and caused so much friction that it was annoying as heck. Teachers were still relying on spreadsheets as well, they had no better alternative.
Here’s what my system tackled:#
After the initial load, my site has a near-instant load time, and classes are shown instantly Even when your browser forces a reload on the page, the scroll position is saved for convenience The UI is snappy and intuitive, and works 100% offline (once set up) You can now search for empty rooms, teacher schedules and so on by just typing that name or room in the search bar.
Over time though, I felt like there were alot of issues that I, having designed it would be blind to, and so I used the power of Posthog , one of the best analytics tools out there, which is completely open source, self-hostable, and has some of the most insanely low pricing I have seen in a product like this. And the best part, it has near zero performance and load-time overhead. Posthog gave me the tools and insights needed to be able to find out what I could from users without them having to go out of their way to ignore my feedback / bug report button 🥲 Here’s a few cases I wanted to highlight where Posthog was essential to my workflow, and helped alleviate a ot of pain points.
First, Early on, I noticed that students would often be squinting at their phones and counting on their fingers to try to see any gaps in their schedule. Posthog’s Session replay feature really helped me out here, when I saw the logs and I noticed people hovering around the time of the class a bunch, and moving back and forth between classes. When I saw this, I observed my classmates in-person, and noticed that it was kind of hard to see the gaps, which led to my first data-driven change, adding the gap-indicator in between sessions. This feature was well-received, and really helped a lot.
Another insight was when I saw students selecting their required classes, then staring at the unchanged screen wondering why it wont work, not knowing that they were supposed to toggle-on their class filtering. The solution for this was inspired by Valve’s simple yet elegant method of teaching gamers about mechanics without using long paragraphs— and that is to just show them. I made a small yet important change to make it so when the user makes any changes in the selected classes, a subtle yet noticeable animation will toggle and wait for them to see that you can do this, and subconsciously teach them about the feature.
Most recently, the thing that made me write this post, I noticed that new users, when scoping out the site for the first time would just toggle the same switch other people didn’t notice on and off, over-and-over, they would not notice the “Select Classes” button, and would get frustrated and leave. Another annoyance that students just ignore and move on. I took this as an opportunity to increase my site’s conversion rate, and use another one of Valve’s tricks by detecting this behaviour and showing a nice golden glow around the “Select Classes” button, as well as a small nudge to show users they can do a lot more with this app.
Conclusion#
This journey has really shown me why observing user behaviour, as well as analytics are so important to any product, large or small, as well as how Valve has created the extremely green-flag filled empire they have— actually caring about your users.
Before I end this, I’d like to point out that I recently moved the site to an edge runtime server-side redis cache, and if there’s any issues with the google sheets api being ratelimited, I hope it doesn’t cause too many problems, and feel free to submit a bug report using the button on the bottom right corner!
If anyone would like to discuss this with me, or just have a nice conversation, feel free to DM me on LinkedIn.