2019
Project Context Internship LoCoMoGo / Bachelor Thesis
Roles UX/UI Design, User Research
Challenge The startup LoCoMoGo wanted to teach children from the ages of 4 to 6 the basics of programming with their toy train. The app accompanying the toy had to be designed based on the capabilities of the target group.
Result I designed an app visualized in an Adobe XD prototype, paper prototype and video mock-up of certain animations. The final concept was used as a basis for the app development of LoCoMoGo.
Tools Adobe XD, Illustrator, Photoshop, After Effects
Background
The demand for STEM (Science, Technology, Engineering and Mathematics) in the labour market is high these days and so might be the number of parents that want to prepare their children for it. The startup LoCoMoGo was developing a toy train that teaches children programming to satisfy this demand. However, the primary objective, according to LoCoMoGo, had to always be for the child to play and have fun. Part of their product was going to be an app used to program the train wirelessly. The purpose of the assignment was to design this app for children between the ages of four to six and to create a prototype.
Figuring Out the User
Before designing, I conducted a literature review to understand how children learn through play, what programming concepts they can be taught at a young age, and how they interact with digital devices. The research revealed that even children as young as four could grasp simple programming concepts, such as sequencing, conditionals, and loops. However, these concepts needed to be kept very simple to accommodate the limited cognitive capacity of young children. Engaging children in purposeful playing sessions with tangible objects proved to be an effective method for teaching them new concepts.
Based on the research and requirements from LoCoMoGo, I created a few scenarios and personas. I also designed a mood board that visually represents the target group, providing some direction for the project.
Ideation
Part of my assignment, was to flesh out the whole structure of the app. So, I sketched out the wireframes for the flow of the app and the individual frames.
I also designed the icons and individual UI elements from sketch to concept.
User Study
During the design process, a paper prototype was tested with young children to evaluate the current concept and guide further design choices. This testing revealed that not every icon was understood correctly, particularly when they were similar in design. To address this, a solution was introduced to gradually introduce new icons. Another finding was that children often dragged the programming blocks they wanted to use onto the virtual train itself, rather than into the programming frame. An easy solution was to allow children to drop the block onto the train, which would then automatically move it into the programming frame.
Final Prototype
The final result was a prototype of the app made in Adobe XD and a mock-up in Adobe After Effects for certain animations. The app allows children to learn the basics of programming through concepts as sequential and conditional programming. As the users would be very young while still being cognitively underdeveloped, the app needed a step-by-step approach. In the free play game mode children have the possibility to explore the possibilities on their own, while the levels provide a more structured approach. The final concept was used as a basis for the app development of LoCoMoGo.
