Toffee Ride - Interactive Learning App
About the project
Toffee Ride is an innovative initiative by IIT alumnus who envisaged an intelligent learning platform for primary kids. Toffee Ride has over 1100 engaging lessons and other 8000 interactive activities, solely designed for the purpose of improving the educational endeavors of the primary sector.
The Requirement
The idea was to create to design an Edtech application for students between the classes for I-IV. An app to instill the spirit of self-learning with fun-filled and engaging activities for young students.
My Role
My roles included being the UiUx designer, UiUx engineer and illustrator.
Responsibilities
To do research and design activities which would keep kids engaged and educate. Design the MVP, create illustrations for MVP and develop the Ui in Ionic JS. Later the team got expanded, and my focus was shifted more to Ui development.
User Research
Research Summary :
Since this was an app for kids, researching directly on end users were not an easy process. So what we did were secondary research. In this case that included collecting activity books for kids and identifying the activity patterns they have. And also talking to my cousins who have kids in that age group ( thankfully I had many ) about what the kids prefer.
Development Process
Challenges :
The main challenge was that the app needed a lot of activities for kids. But creating them from scratch won’t work in a MVP environment. So we had to work with what is already available.
Also the app should work on a number of devices with diverse screen size. So responsiveness was must, for which custom tailored codes were needed for most pages.
Design Process :
The design process was different from usual projects as in many screens we didn’t have the freedom to build from scratch. So what we used was something similar to the Double Diamond design system. Once I made the paper wireframe, we jumped to high fidelity prototype and then it would go to development. And for the activity side pre-existing activities are discovered from the web and we check how much alteration can be added so that it would benefit the kids. Then it will be developed and delivered to the client so that they can give us the response. The iterations are made according to the response and the process is repeated. While the developers were working on their tasks, I also had to make illustrations for different stories which was also a part of the app, till we added a dedicated illustrator to the team.
One of the concept was to make the kids feel like they are on a ride and each activity is an achievement.
So the main screen was created like a track with a continuous scroll and activities are found on the path.
The design was updated on the later version with better illustrations but the concept was kept the same.
Development :
We had a limited number of resources to allocate because it was a startup product on MVP phase. So I had to take multiple roles and manage time efficiently. After the project kickstart, we conducted brainstorming sessions with the client to identify the best strategies that could help the dev and design team meet the requirements.
We followed an agile method. Since this a game like app, we took a dedicated illustrator/ui designer for the project. And my focus shifted to coding the Ui and make sure that it works responsively on every device, without compromising the functionality of the activities. The project was initially done in Ionic js as it can be released for both ios and Android. Recently after the funding, the app was migrated to flutter.
End Result
We did well with the MVP but it was a continuous design cycle. Improvements were added to the product. The product got funding and design and dev team were expanded. There are ongoing plans of a huge scale-up for the application with the full focus being dedicated to transforming the application into a channel for automated learning.