Telegram App

Currently open for work

Liubov

Developing a React-based gamified To-Do List | Deployed in Telegram

#project-Gleamorrow

Gleamorrow was a passion project between people who knew how difficult it can be to manage a to-do list. Especially with co-occurring conditions such as ADHD, Autism, depression, and more. The main goal was to implement a gamified to-do list system that felt exciting, playful, and, hopefully, addictive - so the users would want to return and keep creating to-do lists.

Summary

My contribution

My focus for this project was two-fold: overall design and programming. I created screen-by-screen wireframes, design system, components, as well as the artwork. I also fully coded the app using React and Telegram API, created a Telegram Bot for user access and hosted the user database.

Additionally, I conducted user research, testing, and review based on user feedback.

Services provided:

Figma design: wireframes, component kit
Art Direction: design and execution
React programming and database development
Competitor research, analysis, and comparison
User research and testing
Webflow development

Mission

Collaborated with

Private Marketer & Client Outreach Specialist

My role

Lead UX/UI Designer
Lead Developer
CEO

100+ monthly users

Fully deployed app

This project called for an approach that integrated playfulness and gamification elements. After researching competitors and similar apps, such as Habitica, I settled on a hand-drawn look. As this app would be based in Telegram, I went for a casual-like gameplay.

As the result of competitor research, I compiled a document outlining each company's design decisions, their reasoning, and why it worked for them. Additionally, I researched main gamification strategies to create a product that would engage their users to come back.

Process & Strategy

Wireframe Development

Research & Structure

Having completed research, I moved to webflow development and wireframing. In my design and colour choices, I made sure to reflect the backstory of the game - a house in the woods, where a young girl, Seren, lives. To maintain this story, I chose warm tones and brown shades. As for UI, I focused on making the appearance cozy by making rounded corners, stylised icons, and subtle animations.

I created screen-by-screen wireframes for each section of the game. These included:

To-Do Screen with options to add, edit, remove, and complete tasks, along with Completed Tasks
Focus Timer with unlockable rewards, issued for a certain number of minutes spent focusing
Rewards Screen and minute counter until next reward
Pet Companion Screen - an opportunity to take care of a pet fox by visiting daily
Pet Shop - an opportunity to spend coins received through focusing and completing tasks

React Development & User Feedback

Using React, I built the app and integrated it in Telegram using a bot function and API. Users can interact with the bot to launch the app, review their rewards, and connect with the Gleamorrow community. During development, I focused on creating succinct, modularised code. For the database, I used Python and Railway hosting.

With more than 200 active users, I've been able to gather ample feedback and implement it.

One of the main issues for new users was unfamiliarity with the gaming process, which was described as 'sometimes frustrating' and 'too hard to figure out'. To mitigate this, I developed an onboarding process, which guided the players through the main features, and introduced an FAQ section, where each users could find tips and guidelines for play.